Introduction: Why useEffect Matters in React

React’s component-based architecture makes UI development intuitive, but handling side effects—like API requests, timers, or event listeners—can quickly get messy. That’s where the useEffect Hook steps in.

Introduced in React 16.8, useEffect allows functional components to perform side effects—something only class components could do before using lifecycle methods like componentDidMount or componentDidUpdate.

In simple terms:
Whenever you want something to happen after a render—such as fetching data or updating the DOM—useEffect is your go-to tool.

What is useEffect?

The useEffect Hook lets you perform side effects in functional components.

Syntax:

useEffect(() => {
  // side-effect logic here
}, [dependencies]);

• The first argument is a function (your effect).

• The second argument is a dependency array that controls when the effect runs.

How useEffect Works (Step-by-Step)

1. Run After Render

useEffect runs after the DOM is painted, not during the render cycle.

useEffect(() => {
  console.log('Component mounted or updated');
});

If you omit the dependency array, the effect runs after every render.

2. Run Only Once (on Mount)

useEffect(() => {
  console.log('Component mounted');
}, []);

An empty dependency array ([]) makes the effect run only once, mimicking componentDidMount.

3. Run When Dependencies Change

useEffect(() => {
  console.log('Count changed:', count);
}, [count]);

The effect will run only when count changes.

4. Cleanup Function (Like componentWillUnmount)

Use this to clean up resources like timers or event listeners:

useEffect(() => {
  const interval = setInterval(() => console.log('Tick'), 1000);
  return () => clearInterval(interval); // cleanup on unmount or dependency change
}, []);

Common useEffect Use Cases

Complete Functional Example: Fetching API Data

import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Fetch user data from API
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((data) => {
        setUsers(data);      // Update users state
        setLoading(false);   // Set loading to false
      })
      .catch((err) => console.error(err));
  }, []); // Run only once after component mounts

  if (loading) return <p>Loading users...</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

Tips & Common Pitfalls

✅ Best Practices

• Use cleanup functions to avoid memory leaks.

• Break large effects into multiple useEffect calls based on responsibility.

• Include all external variables used inside useEffect in the dependency array.

⚠️ Common Mistakes

• Missing dependencies: Leads to stale values or missed updates.

• Infinite loops: Caused by updating state within an effect that runs on every render.

• Not using cleanup: Can cause performance issues or unwanted behavior.

Comparison Table: useEffect vs Class Lifecycle Methods

Conclusion: Best Practices for useEffect

• Think of useEffect as event-driven logic: “When X happens, do Y.”

• Start simple, then break effects into smaller pieces as complexity grows.

• Always review your dependency array—React will remind you if something’s missing.

Pro Tip: Use tools like eslint-plugin-react-hooks to catch mistakes early.

✅ Actionable Takeaways

• Use useEffect(() => {...}, []) for API calls on mount.

• Use cleanup functions to prevent memory leaks.

• Split logic into multiple useEffect calls for clarity and modularity.

• Watch dependencies like a hawk—React re-runs the effect if they change.