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.

Practice

1. What does an empty dependency array [] in a useEffect hook mean?

easy

A. The effect runs only when a state changes.

B. The effect runs after every render.

C. The effect never runs.

D. The effect runs only once after the first render.

Solution

1. Step 1: Understand the role of dependency array

   The dependency array tells React when to run the effect based on changes in listed variables.

2. Step 2: Interpret empty array meaning

   An empty array means no variables to watch, so React runs the effect only once after the first render.

3. Final Answer:

   The effect runs only once after the first render. -> Option D

4. Quick Check:

   Empty array = run once [OK]

Hint: Empty array means run effect once after mount [OK]

Common Mistakes:

• Thinking empty array runs effect every render
• Confusing empty array with no array
• Assuming effect never runs with empty array

2. Which of the following is the correct syntax for a useEffect hook that runs only once after the component mounts?

easy

A. useEffect(() => { console.log('Hello'); });

B. useEffect(() => { console.log('Hello'); }, []);

C. useEffect(() => { console.log('Hello'); }, [{}]);

D. useEffect(() => { console.log('Hello'); }, [() => {}]);

Solution

1. Step 1: Identify correct useEffect syntax

   The second argument is the dependency array controlling when the effect runs.

2. Step 2: Check which option uses empty array

   useEffect(() => { console.log('Hello'); }, []); uses an empty array, so effect runs once after mount, which is correct.

3. Final Answer:

   useEffect(() => { console.log('Hello'); }, []); -> Option B

4. Quick Check:

   Empty array syntax = useEffect(() => { console.log('Hello'); }, []); [OK]

Hint: Empty array in second argument runs effect once [OK]

Common Mistakes:

• Omitting dependency array runs effect every render
• Using non-constant values in dependency array incorrectly
• Confusing dependency array with effect callback

3. Consider this code:

const [count, setCount] = useState(0);
useEffect(() => {
  console.log('Count is', count);
}, [count]);

setCount(1);
setCount(2);

What will be logged to the console?

medium

A. Count is 0, Count is 2

B. Count is 0 only

C. Count is 2 only

D. Count is 0, Count is 1, Count is 2

Solution

1. Step 1: Understand effect dependency on count

   The effect runs after first render (count=0) and whenever count changes.

2. Step 2: Analyze state updates

   Two state updates happen quickly: setCount(1) then setCount(2). React batches them, so only final count=2 triggers effect after initial render.

3. Final Answer:

   Count is 0, Count is 2 -> Option A

4. Quick Check:

   Effect runs on initial and final count change [OK]

Hint: Effect runs after render with latest dependency value [OK]

Common Mistakes:

• Assuming effect runs for every intermediate state update
• Ignoring batching of state updates
• Thinking effect runs before first render

4. What is wrong with this useEffect usage?

const [count, setCount] = useState(0);
useEffect(() => {
  console.log(count);
}, []);

medium

A. Effect will run only once and log initial count, ignoring updates.

B. Effect will never run because dependency array is empty.

C. Effect will run on every render causing infinite loop.

D. Syntax error due to missing dependencies.

Solution

1. Step 1: Check dependency array usage

   Empty array means effect runs once after first render only.

2. Step 2: Understand effect behavior with state

   Effect logs count only once with initial value, ignoring later count changes.

3. Final Answer:

   Effect will run only once and log initial count, ignoring updates. -> Option A

4. Quick Check:

   Empty array ignores state changes [OK]

Hint: Empty array ignores state changes inside effect [OK]

Common Mistakes:

• Thinking effect runs on every count change
• Assuming empty array stops effect from running
• Confusing syntax error with logical error

5. You have a useEffect that depends on two props: userId and filter. Which dependency array is correct to ensure the effect runs only when these props change?

useEffect(() => {
  fetchData(userId, filter);
}, ???);

hard

A. []

B. [fetchData]

C. [userId, filter]

D. [userId]

Solution

1. Step 1: Identify variables used inside effect

   The effect uses userId and filter inside its callback.

2. Step 2: List all used variables in dependency array

   To rerun effect when either userId or filter changes, both must be in the dependency array.

3. Final Answer:

   [userId, filter] -> Option C

4. Quick Check:

   List all used variables in dependencies [OK]

Hint: Include all used variables in dependency array [OK]

Common Mistakes:

• Leaving dependency array empty causing stale data
• Including functions that don't change as dependencies
• Listing only some used variables