- Replace immutable refs with mutable objects for pointer tracking to reduce GC pressure - Remove synchronous getBoundingClientRect from animation loop to prevent layout thrashing - Ensure mouse coordinates are updated efficiently without re-allocating arrays Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
1.7 KiB
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.
2025-01-26 - Missing Node Modules
Learning: The environment might lack node_modules completely, preventing npx vitest or pnpm exec tsc from running even if dependencies are listed in package.json. Network restrictions may prevent pnpm install.
Action: When node_modules is missing and cannot be installed, rely on static analysis, careful code review, and verifying file contents manually. Do not assume tests can run.
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.
2025-01-26 - WebGL Layout Thrashing
Learning: WebGL animation loops often contain fallback paths (e.g., if (!rect) rect = getBoundingClientRect()) that trigger synchronous layout thrashing every frame if the primary path fails or initializes late.
Action: Remove synchronous layout reads from requestAnimationFrame loops. Use ResizeObserver to cache dimensions and handle the "not ready" state by skipping updates or using safe defaults (0,0) instead of forcing a reflow.