react-hooks

React Hooks (short rule)

Overview

Avoid unstable dependencies, derived state in useEffect, and setState without a dependency array. Most loop bugs come from object/array literals in dependency arrays, Zustand selectors returning new objects each render, or syncing state that should be useMemo.

Full patterns, guardrails, and debugging: documentation/architecture/patterns/react-hooks-patterns.md

Example — unstable callback in config object (useSessionTimeout)

// ❌ WRONG: inline arrow is new every render → useSessionTimeout's effect re-runs → setState loop
useSessionTimeout({
  onLogout: () => {
    void authLogout();
  },
});

// ✅ RIGHT: stable callback (useSessionTimeout also reads onLogout via ref as defense-in-depth)
const handleSessionTimeoutLogout = useCallback(() => {
  void authLogout();
}, [authLogout]);
useSessionTimeout({ onLogout: handleSessionTimeoutLogout });

Rule: Never pass inline functions or object literals into hooks that merge config into useMemo/useEffect deps unless those hooks store callbacks in a ref.

Example — unstable dependency (wrong vs right)

// ❌ WRONG: new object every render → effect runs every render
useEffect(() => {
  setX(filtered);
}, [{ foo: bar }]);

// ✅ RIGHT: memoize or depend on primitives
const opts = useMemo(() => ({ foo: bar }), [bar]);
useEffect(() => {
  setX(filtered);
}, [opts]);

Example — derive instead of effect + setState

// ❌ WRONG: derived data as state
const [normalized, setNormalized] = useState([]);
useEffect(() => {
  setNormalized(normalize(data));
}, [data]);

// ✅ RIGHT
const normalized = useMemo(() => normalize(data ?? []), [data]);

Summary

1. Prefer useMemo / React Query select over useEffect + setState for derived data.
2. Dependency arrays: primitives, or stable references via useMemo / useCallback; use shallow for Zustand object selectors.
3. Do not call refetch() in an effect to drive queries — use a stable queryKey and enabled.