useEffect

🔍 What Is It?

useEffect(fn, deps) runs fn after the component renders. It is React's escape hatch for synchronising with external systems.

Three forms:

• →useEffect(fn) — runs after every render
• →useEffect(fn, []) — runs once after the first render (mount)
• →useEffect(fn, [dep1, dep2]) — runs after renders where dep1 or dep2 changed

Cleanup function:

Return a function from the effect to clean up before the next run or on unmount:

useEffect(() => {
  const sub = subscribe(channel);
  return () => sub.unsubscribe(); // cleanup
}, [channel]);

🎯 Why Do We Need It?

React rendering must be a pure function — no side effects during render. useEffect is the designated place for side effects:

• →Data fetching — calling an API when a component mounts or a filter changes
• →Subscriptions — WebSocket connections, event listeners, Observables
• →Timers — setInterval, setTimeout
• →DOM manipulation — measuring elements, integrating third-party libraries
• →Synchronising external state — syncing React state to localStorage

Without useEffect, you would have no way to trigger these after rendering.

🏗️ What Happens in Real Projects?

In a real SaaS dashboard:

• →Fetch dashboard metrics when the selected date range changes
• →Subscribe to a WebSocket for real-time notifications
• →Sync filter state to URL query params
• →Set document.title to the current page name
• →Initialise a charting library (Chart.js, D3) on a canvas element
• →Clean up event listeners when a modal closes

⚙️ How It Works

Execution order:

1. Component renders (JSX evaluated, DOM updated)
2. Browser paints the screen
3. useEffect runs
4. On next render: cleanup of previous effect runs, then new effect runs
5. On unmount: cleanup of last effect runs

Dependency array rules:

• →React uses Object.is() to compare dependencies
• →Objects and arrays are compared by reference, not value
• →The ESLint rule react-hooks/exhaustive-deps catches missing dependencies — always follow it
• →If a dependency changes every render (e.g., an inline object), the effect runs every render too

💻 Example

useEffect Patterns in Production — Data fetching, subscriptions, and cleanup patterns from real projects.

function useUserProfile(userId: string) {
  const [profile, setProfile] = useState<UserProfile | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    // Cancellation flag prevents setState on unmounted component
    let cancelled = false;

    setLoading(true);
    setError(null);

    fetchUserProfile(userId)
      .then((data) => {
        if (!cancelled) {
          setProfile(data);
          setLoading(false);
        }
      })
      .catch((err) => {
        if (!cancelled) {
          setError(err.message);
          setLoading(false);
        }
      });

    return () => { cancelled = true; };
  }, [userId]); // re-fetches when userId changes

  return { profile, loading, error };
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits