performanceRauno
Bypass React Render with Refs
SHOULD
SHOULD: For high-frequency real-time values (pointer position, scroll, rAF), write to the DOM through a `ref` instead of `useState` — the visual result is identical with zero re-renders.
Use refs for real-time values that update the DOM directly to avoid unnecessary re-renders
const el = useRef<HTMLDivElement>(null);
onPointerMove = (e) => { el.current!.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`; };Bad
Good
Why it matters
For high-frequency updates like mouse position tracking, scroll values, or animation frames, using useState causes a full component re-render on every update. Using refs and updating the DOM directly bypasses the React render cycle entirely, achieving the same visual result with zero re-renders.
References