React Hooks

Priority: P1 (OPERATIONAL)

Effective usage of React Hooks.

Implementation Guidelines

• •Rules: Top-level only. Only in React functions.
• •useEffect: Sync with external systems ONLY. Cleanup required.
• •useRef: Mutable state without re-renders (DOM, timers, tracking).
• •useMemo/Callback: Measure first. Use for stable refs or heavy computation.
• •Dependencies: Exhaustive deps always. Fix logic, don't disable linter.
• •Custom Hooks: Extract shared logic. Prefix use*.
• •Refs as Escape Hatch: Access imperative APIs (focus, scroll).
• •Stability: Use useLatest pattern (ref) for event handlers to avoid dependency changes.
• •Concurrency: useTransition / useDeferredValue for non-blocking UI updates.
• •Initialization: Lazy state useState(() => expensive()).

Anti-Patterns

• •No Effects for Data Flow: Derive state in render.
• •No Missing Deps: Causes stale closures.
• •No Complex Effects: Split into multiple simple effects.
• •No Oversubscription: Check why-did-you-render.

Code

// Custom Hook
function useWindowSize() {
  const [size, setSize] = useState({ w: 0, h: 0 });

  useEffect(() => {
    function handleResize() {
      setSize({ w: window.innerWidth, h: window.innerHeight });
    }
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []); // Empty = mount only

  return size;
}

// Lazy Init
const [state, setState] = useState(() => computeExpensiveValue());

Reference & Examples

See references/REFERENCE.md.