Dependency array usage in React - Step-by-Step Execution

Concept Flow - Dependency array usage

Component renders

↓

Dependency array checked

↓

Dependencies changed?

No→Skip effect

Yes↓

Effect cleanup runs (if any)

↓

Effect callback executes

Shows how React checks dependencies after each render to decide if useEffect runs or skips.

Execution Sample

React

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

function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(`Count is ${count}`);
  }, [count]);
  return <button onClick={() => setCount(count + 1)}>Increment</button>;
}

A counter button that logs the count only when count changes.

Execution Table

Step	Render #	count value	Dependency array [count]	Effect runs?	Effect output
1	Initial render	0	[0]	Yes	Count is 0
2	Click button -> setCount(1)	1	[1]	Yes	Count is 1
3	Click button -> setCount(2)	2	[2]	Yes	Count is 2
4	Render without count change	2	[2]	No	No effect run
5	Click button -> setCount(3)	3	[3]	Yes	Count is 3

💡 Effect skips when dependency array values do not change between renders.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
count	0	1	2	2	3	3
dependency array [count]	[0]	[1]	[2]	[2]	[3]	[3]
effect runs?	Yes	Yes	Yes	No	Yes	Yes

Key Moments - 3 Insights

Why does the effect not run on every render?

Because React compares the dependency array values from the last render to the current one. If they are the same (see step 4 in execution_table), it skips running the effect.

What happens if the dependency array is empty?

The effect runs only once after the initial render and never again, since there are no dependencies to change.

Why do we include variables in the dependency array?

To tell React to re-run the effect only when those variables change, avoiding unnecessary effect executions.

Visual Quiz - 3 Questions

Look at the execution_table, at which render does the effect NOT run?

A Render 2

B Render 4

C Render 3

D Render 1

💡 Hint

Check the 'Effect runs?' column in execution_table for each render step.

What is the value of count after the third click according to variable_tracker?

A 3

B 2

C 1

D 0

💡 Hint

Look at the 'count' row in variable_tracker after 'After 4'.

If we remove 'count' from the dependency array, how would the effect behave?

A It runs on every render

B It never runs

C It runs only once after initial render

D It runs only when count changes

💡 Hint

Recall how an empty dependency array affects useEffect execution.

Concept Snapshot

useEffect(() => { /* effect */ }, [deps])
- Runs effect after render if any dep changed
- Skips effect if deps unchanged
- Empty array runs effect once
- Helps optimize side effects
- Always include all used variables in deps

Full Transcript

This visual shows how React's useEffect hook uses the dependency array to decide when to run an effect. On each render, React compares the current dependency array values to the previous ones. If any value changed, the effect runs; otherwise, it skips. For example, a counter component logs the count only when the count changes. The dependency array includes 'count', so the effect runs on initial render and whenever count updates. If the dependency array is empty, the effect runs only once after the first render. This mechanism helps avoid unnecessary effect executions and keeps components efficient.