React Hooks Advanced Patterns

Strict Mode mounts → unmounts → remounts to catch bugs from missing cleanups. Production runs effects once per mount.

Updating state inside the effect with a dep that changes when state updates. Memoize the value or remove from deps if it doesn't need to trigger.

Returns the same function reference unless deps change — avoids re-rendering children that take it as a prop and use memo().

useMemo(f, d): memoizes a value (the result of f()).
useCallback(f, d): memoizes the function itself. Equivalent to useMemo(() => f, d).

Mutable container that doesn't trigger re-render: DOM nodes, timers, latest-value pattern, instance variables.

const ref = useRef(state);
useEffect(() => { ref.current = state; });
// use ref.current inside callbacks

Use useReducer when next state depends on previous state, when state shape is complex, or when actions describe intent better than setters.

Lift up if 2-3 components share state. Context for app-wide state or theme/auth. Don't use Context for high-frequency updates — re-renders all consumers.

Every consumer re-renders when context value changes. Split contexts by domain, memoize value, or use selector libraries (useContextSelector).

Must start with use — React linter and DevTools rely on this.

1) Call at the top level of a component or another hook — not inside loops/conditions.
2) Call from React functions only — components or other hooks.

function useDebounced(v, ms=300) {
  const [d, setD] = useState(v);
  useEffect(() => {
    const t = setTimeout(() => setD(v), ms);
    return () => clearTimeout(t);
  }, [v, ms]);
  return d;
}