How does dependency array work in useEffect?

`useEffect` is a React Hook that lets you synchronize a component with an external system. The dependency array is a crucial second argument to `useEffect` that controls when the effect function is re-executed.

What is `useEffect`?

useEffect allows you to perform side effects in functional components. Side effects include data fetching, subscriptions, manually changing the DOM, timers, etc. By default, useEffect runs after every render of the component.

The Dependency Array

The dependency array is the optional second argument passed to useEffect. It tells React when to re-run the effect function. React will compare the values in the dependency array between renders. If any of the values have changed (using strict equality comparison, Object.is), the effect function will be re-executed.

How it Works

When the component renders, React first checks if the values in the dependency array have changed since the *last* render. If a value has changed, React will clean up the previous effect (if a cleanup function was returned) and then run the new effect function. If no values have changed, the effect function will be skipped, preventing unnecessary re-runs.

Cases for the Dependency Array

1. Empty Array `[]`

When an empty array is provided, the effect runs only once after the initial render and cleans up when the component unmounts. This is useful for effects that don't depend on any values from the component's scope and should only run once, like setting up subscriptions or fetching initial data.

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

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    console.log('Effect ran once after initial render.');
    // Simulate data fetching
    fetch('/api/data')
      .then(res => res.json())
      .then(d => setData(d));

    return () => {
      console.log('Cleanup ran on unmount.');
    };
  }, []); // Empty dependency array

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

2. No Array (Omitted)

If the dependency array is omitted entirely, the effect will run after every single render of the component. This is rarely the desired behavior as it can lead to performance issues or infinite loops if not handled carefully. It is equivalent to the behavior of componentDidMount and componentDidUpdate combined in class components.

import React, { useEffect } => 'react';

function MyComponent() {
  useEffect(() => {
    console.log('Effect ran after every render.');
  }); // No dependency array

  return <div>Check console on every render.</div>;
}

3. Array with Dependencies `[dep1, dep2]`

When dependencies are specified, the effect runs after the initial render and then re-runs only if any of the values in the dependency array have changed since the last render. This is the most common use case and allows you to control exactly when your side effect logic executes based on specific state or props changes.

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

function MyComponent({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    if (userId) {
      console.log(`Fetching user data for userId: ${userId}`);
      // Simulate data fetching based on userId
      fetch(`/api/users/${userId}`)
        .then(res => res.json())
        .then(data => setUserData(data));
    }

    return () => {
      console.log(`Cleanup for userId: ${userId}`);
      // Cancel previous fetch or cleanup specific to userId
    };
  }, [userId]); // Effect re-runs only when userId changes

  return (
    <div>
      {userData ? (
        <p>User Name: {userData.name}</p>
      ) : (
        <p>Select a user to view details.</p>
      )}
    </div>
  );
}

Common Pitfalls and Best Practices

• Forgetting Dependencies (Stale Closures): If you use a variable, prop, or state inside your useEffect callback but don't include it in the dependency array, the effect might 'close over' an old value of that variable. This leads to subtle bugs where your effect operates on stale data.
• Over-specifying Dependencies: Including too many dependencies can cause your effect to run more often than necessary. Ensure you only include variables that genuinely necessitate a re-run of the effect.
• Dependencies that Change Every Render: If you include objects or functions created inline (e.g., const obj = {}, const fn = () => {}) in your dependency array, they will be new on every render, causing the effect to re-run constantly. Use useMemo for objects/arrays and useCallback for functions to memoize them and prevent unnecessary re-runs.
• Linting for Hooks: React's eslint-plugin-react-hooks is an invaluable tool. It automatically warns you about missing dependencies, helping to catch potential bugs and enforce correct usage of useEffect.

Understanding and correctly using the dependency array is fundamental to writing efficient, predictable, and bug-free React components with useEffect. Always consider what values your effect relies on and include them accordingly.