A Complete Guide to useEffect

Mental model

Use effects for subscriptions, timers, imperative APIs, and other side effects outside React rendering.

Dependencies are a contract

If an effect reads a value, include it in the dependency list or refactor so it no longer depends on that value.

tsx
Copy
1useEffect(() => {2  const controller = new AbortController();3  fetchUser(id, { signal: controller.signal });4  return () => controller.abort();5}, [id]);

Avoid these

• Data transforms that belong in render
• Chained effects updating state repeatedly
• Fetching without cancellation