JavaScript React Hooks Practice

Effects are React's way to synchronize your component with something outside React: the DOM, a timer, a WebSocket, an API. They're not for orchestrating React state.

If your effect just transforms props/state into other state, you probably don't need an effect. Compute it during render instead. Understanding module scope and closures helps explain why hooks must be called at the top level.

// BAD: Effect to derive state
const [items, setItems] = useState([]);
const [filtered, setFiltered] = useState([]);

useEffect(() => {
  setFiltered(items.filter(x => x.active));
}, [items]);

// GOOD: Compute during render
const [items, setItems] = useState([]);
const filtered = items.filter(x => x.active); // No effect needed

The dependency array tells React when to re-run your effect. Get it wrong and you'll see infinite loops or stale data.

The rule

Include every value from the component scope that the effect uses:

useEffect(() => {
  fetchData(userId); // Uses userId
}, [userId]); // Must include userId

Why objects and functions cause loops

Objects and functions are compared by reference. A new object/function is created each render:

// BUG: Infinite loop because options is new every render
const options = { limit: 10 };
useEffect(() => {
  fetchData(options);
}, [options]); // options !== options (different reference)

// FIX 1: Move inside effect
useEffect(() => {
  const options = { limit: 10 };
  fetchData(options);
}, []); // No external dependency

// FIX 2: Memoize
const options = useMemo(() => ({ limit: 10 }), []);
useEffect(() => {
  fetchData(options);
}, [options]); // Stable reference now

Trust exhaustive-deps

The ESLint rule exhaustive-deps catches missing dependencies. Don't suppress it. It's almost always right:

// WARNING: React Hook useEffect has a missing dependency: 'userId'
useEffect(() => {
  fetchUser(userId);
}, []); // Missing userId = stale closure bug

If you think you need an empty array but use external values, restructure the effect or move logic elsewhere.

Cleanup runs:

1. Before each re-run when dependencies change
2. On unmount when the component leaves the DOM

useEffect(() => {
  const ws = new WebSocket(url);
  ws.onmessage = handleMessage;

  return () => ws.close(); // Cleanup
}, [url]); // When url changes: close old socket, open new one

Think of cleanup as "undoing" what setup did. This setup/teardown lifecycle mirrors the Observer design pattern, where you subscribe on mount and unsubscribe on cleanup:

If you forget cleanup, you'll get memory leaks, duplicate subscriptions, or stale handlers responding to old data.

React 18+ Strict Mode intentionally runs your effects twice in development:

Why: To verify your cleanup mirrors your setup. If your app breaks with this behavior, you have a bug (usually missing cleanup).

Not a bug to fix by disabling Strict Mode. Fix the effect instead. Understanding how DOM event listeners work helps you write proper cleanup for browser APIs:

// BUG: Breaks in Strict Mode (duplicate listeners)
useEffect(() => {
  window.addEventListener('resize', handleResize);
}, []);

// FIX: Add cleanup
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

JavaScript closures capture variables by reference (see functions page for the general concept). In React, this shows up when:

1. An effect captures old state/props
2. A callback inside setInterval reads stale values
3. An event handler uses outdated state

The setInterval trap

// BUG: Always logs 0 (stale closure)
const [count, setCount] = useState(0);

useEffect(() => {
  const id = setInterval(() => {
    console.log(count); // Captures count = 0 forever
  }, 1000);
  return () => clearInterval(id);
}, []); // Empty deps = never re-runs, count stays stale

// FIX 1: Add count to deps (restarts interval each change)
useEffect(() => {
  const id = setInterval(() => console.log(count), 1000);
  return () => clearInterval(id);
}, [count]);

// FIX 2: Use functional update (reads latest state)
useEffect(() => {
  const id = setInterval(() => {
    setCount(c => c + 1); // c is always current
  }, 1000);
  return () => clearInterval(id);
}, []);

// FIX 3: useRef for "latest value"
const countRef = useRef(count);
countRef.current = count; // Update each render

useEffect(() => {
  const id = setInterval(() => {
    console.log(countRef.current); // Always current
  }, 1000);
  return () => clearInterval(id);
}, []);

Does changing this value need to update the UI?
├── Yes → useState
└── No → useRef

useRef use cases:

• Timer/interval IDs
• DOM element references
• "Latest value" storage for callbacks
• Values that change frequently but shouldn't re-render (scroll position, animation frame)

// Storing a timeout ID (no re-render needed)
const timeoutRef = useRef(null);

// Keeping the latest callback without re-triggering effects
const onChangeRef = useRef(onChange);
onChangeRef.current = onChange;

useEffect(() => {
  const handler = () => onChangeRef.current(value);
  // handler always calls the latest onChange
}, [value]);

Before React Compiler: Manual memoization was common to prevent re-renders.

With React Compiler (v1.0+): Memoization is automatic in most cases. Manual useMemo/useCallback become escape hatches for when you need explicit control.

When you still need them:

• Stabilizing effect dependencies
• Passing callbacks to heavily memoized children
• Expensive calculations that shouldn't re-run
• External libraries requiring stable references

// Stabilize for effect dependency
const options = useMemo(() => ({ userId, limit }), [userId, limit]);

useEffect(() => {
  fetchData(options);
}, [options]); // Won't loop now

Don't over-memoize. Adding useMemo/useCallback everywhere adds complexity and can hurt performance if the memoization cost exceeds the re-render cost.

useEffect can't be async directly (it must return cleanup or undefined, not a Promise):

// WRONG: Returns a Promise
useEffect(async () => {
  const data = await fetchData();
  setData(data);
}, []);

// RIGHT: Inner async function
useEffect(() => {
  async function load() {
    const data = await fetchData();
    setData(data);
  }
  load();
}, []);

// RIGHT with cleanup (cancellation)
useEffect(() => {
  const controller = new AbortController();

  async function load() {
    try {
      const res = await fetch(url, { signal: controller.signal });
      const data = await res.json();
      setData(data);
    } catch (err) {
      if (err.name !== 'AbortError') {
        setError(err); // Don't throw or it would be unhandled
      }
    }
  }

  load();
  return () => controller.abort();
}, [url]);

For more on AbortController and async patterns, see the async/await page.

• React: You Might Not Need an Effect
• React: Synchronizing with Effects
• React: StrictMode
• React: useEffect reference
• React Compiler introduction