Extracted the high-frequency typing animation logic into a new, memoized `TypedText` component. This prevents the entire `Hero` component (including the heavy `GradientBlinds`) from re-rendering on every character update. - Created `TypedText` component in `Hero.tsx` - Wrapped `TypedText` in `React.memo` - Moved `useTypingEffect` call into `TypedText` - Updated `Hero` to use `TypedText` Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
8 lines
830 B
Markdown
8 lines
830 B
Markdown
## 2024-05-22 - Missing Scripts and Environment
|
|
**Learning:** The project lacks `lint` script in `package.json`. Running `pnpm lint` might invoke system tools (like Android Lint?) instead of failing or doing nothing useful. Always check `package.json` scripts first.
|
|
**Action:** Use specific commands like `pnpm exec tsc --noEmit` or `npx vitest` as discovered/documented, rather than assuming standard scripts exist.
|
|
|
|
## 2024-05-22 - High-Frequency State Isolation
|
|
**Learning:** High-frequency state updates (like typing effects) in large parent components (`Hero`) trigger massive unnecessary re-renders of expensive sub-trees (`GradientBlinds`, `Button`).
|
|
**Action:** Isolate high-frequency state into small, leaf-node components (e.g., `TypedText`) and wrap them in `React.memo` if necessary, keeping the heavy parent static.
|