Usama

Posted on Dec 26

Understanding the useEffect Dependency Array

#performance #react #frontend #ui

When I first watched a long and technical lecture about useEffect, especially the dependency array, I felt confused. There were many terms, many examples, and a lot of theory.
But after listening carefully and experimenting a bit, I finally understood the core idea behind it. This blog is my own explanation of what I learned, in my own words.

What is useEffect in simple terms?

In React, useEffect is used to perform side effects.
Side effects are things that happen outside of rendering UI, like:

Fetching data from an API

Updating the document title

Setting timers

Listening to events

React renders the UI, and useEffect lets us say:

“After rendering, please do this extra work.”

The structure of useEffect

useEffect(() => {
  // side effect code
}, [dependencies]);

The most important part here is the dependency array.

What is the dependency array?

The dependency array is the second argument of useEffect.
It tells React when the effect should run again.

After understanding it properly, this is the key idea I learned:

The values inside the dependency array are usually state or props.
When any of those values change, the useEffect runs again.

This one sentence cleared most of my confusion.

Why are dependencies usually state or props?

State and props are special because:

They can change over time

When they change, the component re-renders

So React watches them.

If I put a state or prop inside the dependency array, I am basically telling React:

“Hey React, keep an eye on this value.
When it updates, please run this effect again.”

Example: useEffect with state dependency

const [count, setCount] = useState(0);

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

What happens here?

Component renders first time → useEffect runs

count changes → component re-renders

React compares old count with new count

If the value is different → useEffect runs again

So yes, when the value updates, the effect runs.
This was the most important realization for me.

Empty dependency array []

useEffect(() => {
  console.log("Runs only once");
}, []);

This means:

There are no dependencies

Nothing to watch for changes

So React runs this effect:

Only once

When the component renders for the first time

This is commonly used for:

Initial API calls

Setup logic

No dependency array at all

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

This means:

React does not know when to stop

Effect runs after every render

This can cause:

Performance issues

Infinite loops

So after understanding this, I realized why people say:

“Always think before skipping the dependency array.”

Multiple dependencies

useEffect(() => {
  console.log("Runs when count or name changes");
}, [count, name]);

Here React checks:

Did count change?

OR did name change?

If any one of them changes, the effect runs again.

The biggest confusion I had (and how it got cleared)

At first, I thought:

“useEffect re-renders the component”

But that is wrong.

The correct understanding is:

State/props change → component re-renders

Dependency change → useEffect runs

So useEffect does not cause rendering directly
It reacts to rendering caused by state/prop updates.

Final understanding (in one paragraph)

After watching a long lecture and thinking deeply, I finally understood that the dependency array is React’s way of knowing when to run an effect again. The values inside it are usually state or props because those values can change. When they update, the component re-renders, React compares the old and new dependency values, and if something has changed, the useEffect runs again. That’s it. No magic, no confusion.