The Dependency Array and Execution Lifecycle0%
Cleanup Functions in useEffect

The Dependency Array and Execution Lifecycle

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

The Dependency Array and Execution Lifecycle

1. Controlling Effect Execution

The second argument passed to useEffect is the Dependency Array. This array tells React exactly which state variables or props the effect relies on.

React evaluates the dependency array using shallow equality (Object.is) before every re-render to determine whether the effect callback should run again.

Output
Does dependencyArray exist?
├─ NO ──> Runs on INITIAL MOUNT and AFTER EVERY RE-RENDER
│
├─ YES: [] (Empty) ──> Runs ONLY ONCE on INITIAL MOUNT
│
└─ YES: [a, b] ──> Runs on INITIAL MOUNT and ONLY WHEN 'a' OR 'b' CHANGES

2. The 3 Dependency Array Modes

Mode 1: No Dependency Array (Run on Every Render)

JSX
useEffect(() => {
console.log('Component rendered or re-rendered!');
});
// ⚠️ WARNING: If you update state inside an effect with no dependencies,
// you will create an INFINITE RENDER LOOP!

Mode 2: Empty Dependency Array [] (Run on Mount Only)

JSX
useEffect(() => {
console.log('Component mounted to screen!');
fetchInitialAnalytics();
}, []);
// Runs once when the component first appears on the screen.

Mode 3: Specific Dependencies [dep1, dep2] (Run on Change)

JSX
useEffect(() => {
console.log(`User ID changed to: ${userId}. Fetching user profile...`);
fetchUserProfile(userId);
}, [userId]);
// Runs on mount AND whenever the value of userId changes.

3. The Golden Rule of Dependencies

Every reactive value referenced inside your effect callback MUST be included in the dependency array.

A "reactive value" includes:

  • Props
  • State variables
  • Variables or functions declared inside the component body
JSX
function SearchResults({ query }) {
const [filter, setFilter] = useState('all');
 
useEffect(() => {
// 'query' comes from props; 'filter' comes from state.
// Both MUST be in the dependency array!
fetchResults(query, filter);
}, [query, filter]); // ✅ All reactive values included!
}

4. The Pitfall of Objects and Functions in Dependencies

Because React checks dependencies using reference equality (Object.is), defining objects or functions inside your component body can trigger unwanted effect runs:

JSX
function Dashboard() {
// ❌ Problem: options is a brand new object reference on EVERY render!
const options = { theme: 'dark' };
 
useEffect(() => {
applyTheme(options);
}, [options]); // Effect runs on EVERY render because options reference changes!
 
// ✅ Solution: Move static objects outside the component, or use useMemo
}
Interactive Quiz

Practice Quiz

Question 1
What happens if you omit the dependency array entirely in useEffect(() => { ... })?
Question 2
What happens if you update a state variable inside an effect that has NO dependency array?
Question 3
What comparison mechanism does React use to check if dependencies have changed?
Question 4
Which variables MUST be included in the useEffect dependency array?
Question 5
Why can declaring an object literal inside a component body and passing it to a dependency array cause an effect to run repeatedly?
Next Lesson

Cleanup Functions in useEffect

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
The useEffect Hook for Side EffectsCleanup Functions in useEffect

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext