Optimizing Canvas Animations in React

React's virtual DOM is built for declarative UI updates, but it becomes a bottleneck when you need 60fps canvas animations like particle systems, generative art, or data visualizations. The fix is to bypass React's render cycle entirely. Store all mutable animation state — coordinates, velocities, colors — in a useRef object instead of useState. Inside a useEffect, spin up a requestAnimationFrame loop that reads from and writes to that ref, then draws directly to the canvas context. This keeps React completely out of the hot path. On a recent portfolio project, switching from state-driven to ref-driven rendering dropped CPU usage from 18% to under 1% on a mid-range laptop. The key detail most tutorials miss: always cancel your rAF handle in the useEffect cleanup, or you'll leak animation frames across route transitions and cause cascading performance degradation. Source: production implementation on jawadbuilds.com, 2026.