Dependency Array Nuances

🧠 What Is the Dependency Array in useEffect?

In React’s useEffect hook, the second argument — often an empty array or a list of variables — is known as the dependency array. It controls when the effect should re-run. But this seemingly simple array has some tricky nuances that can lead to bugs if misunderstood. Let's dive into how it really works. 🔍

🔁 The Three Main Patterns

▶️ 1. Empty Array []

Effect runs only once when the component mounts.

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

🔄 2. With Dependencies [value]

Effect runs on initial mount and whenever value changes.

useEffect(() => {
  console.log("Value changed:", value);
}, [value]);

🌪️ 3. No Array (⚠️ Avoid!)

Effect runs after every render — dangerous unless truly needed.

useEffect(() => {
  console.log("Runs after every render");
});

🔍 Nuance #1: Reference vs. Value

If you include an object, array, or function in the dependency array, the effect may re-run on every render — even if the actual data hasn’t changed — because references are different each time.

useEffect(() => {
  console.log("Runs every time!");
}, [props.filter]); // if props.filter is a new object each time

Solution: Memoize values using useMemo or useCallback if needed.

📌 Nuance #2: Stable Functions

Declaring a function inside a component will cause it to be recreated on every render. If you pass it as a dependency, your effect re-runs every time.

const myFunction = () => {
  console.log("Do something");
};

useEffect(() => {
  myFunction();
}, [myFunction]); // will re-run on every render

Fix: Use useCallback to stabilize the function:

const myFunction = useCallback(() => {
  console.log("Do something");
}, []);

📎 Nuance #3: Derived State

Avoid putting values in the dependency array that are derived directly from other state or props unless necessary. Instead, use the raw source of truth.

// Instead of
useEffect(() => {
  // ...
}, [filteredTasks]);

// Use:
useEffect(() => {
  // ...
}, [tasks, searchTerm]);

⚠️ Nuance #4: Missing Dependencies

React will warn you if you forget to include a dependency. Ignoring this can lead to stale values or incorrect logic.

Don’t silence the warning without understanding it! If a variable is used inside useEffect, it must go in the dependency array unless you have a specific reason not to include it.

💬 Nuance #5: ESLint and Exhaustive Deps

React’s eslint plugin (with react-hooks/exhaustive-deps) automatically suggests missing dependencies. While helpful, it’s not always context-aware.

✅ Use it as a guide, not a strict rule. When you intentionally want to skip a dependency, leave a comment to explain:

useEffect(() => {
  doSomethingOnce();
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

💡 Bonus: Custom Hooks and Dependencies

When using custom hooks inside useEffect, ensure they return stable values or memoized callbacks — or you'll get unnecessary re-renders.

🚀 Final Thoughts

The dependency array is powerful but subtle. Getting it wrong can lead to performance issues, infinite loops, or stale state bugs. But with a little attention — and the right patterns — you can master it and make your effects reliable and efficient. 🧠✅

Rule of thumb: If it’s used inside the effect, it probably belongs in the array. And when in doubt — memoize it. 😉