Why Dependency array usage in React? - Purpose & Use Cases

The Big Idea

Discover how a tiny array can save your app from endless loops and crashes!

The Scenario

Imagine you have a React component that fetches data when it loads and updates the UI. You try to run the fetch code inside a useEffect hook but forget to tell React when to re-run it.

So, every time the component updates, the fetch runs again and again, causing endless network calls and slowing down your app.

The Problem

Without a dependency array, React can't know when to re-run your effect. This leads to repeated runs, wasted resources, and bugs that are hard to track.

Manually controlling when effects run is tricky and error-prone, especially as your app grows.

The Solution

The dependency array tells React exactly which values to watch. React only re-runs the effect when those values change.

This makes your code efficient, predictable, and easier to maintain.

Before vs After

✗ Before

useEffect(() => {
  fetchData();
});

✓ After

useEffect(() => {
  fetchData();
}, [userId]);

What It Enables

It enables React to run side effects precisely when needed, improving performance and avoiding bugs.

Real Life Example

When a user ID changes, you want to fetch new user data. The dependency array lets React know to fetch only when the user ID changes, not on every render.

Key Takeaways

Dependency arrays control when effects run.

They prevent unnecessary or infinite effect executions.

Using them correctly makes your app faster and more reliable.