Common lifecycle use cases in React - Step-by-Step Execution

Concept Flow - Common lifecycle use cases

Component Mounts

↓

useEffect with [

↓

Component Renders

↓

User Interaction or Prop Change

↓

State Update triggers Re-render

↓

useEffect with dependencies runs

↓

Component Unmounts

↓

Cleanup function runs

This flow shows how React functional components use useEffect for mounting, updating, and cleanup during their lifecycle.

Execution Sample

React

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

function Timer() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <div>Seconds: {count}</div>;
}

A timer component that increments seconds every second using useEffect to start and clean up the interval.

Execution Table

Step	Trigger	State Before	Action	State After	What Re-renders	DOM Change
1	Initial Mount	count=0	Run useEffect (start interval)	count=0	Timer component	Display 'Seconds: 0'
2	1 second passes	count=0	Interval callback increments count	count=1	Timer component	Display 'Seconds: 1'
3	2 seconds pass	count=1	Interval callback increments count	count=2	Timer component	Display 'Seconds: 2'
4	Component Unmounts	count=2	Cleanup function clears interval	count=2	No re-render	Timer removed from DOM
5	No further intervals	count=2	No action	count=2	No re-render	No DOM change

💡 Component unmounts and cleanup stops interval, no further state updates.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
count	0	1	2	2	2

Key Moments - 3 Insights

Why does the interval keep running even though the component re-renders multiple times?

Because the useEffect has an empty dependency array [], it runs only once on mount, so the interval is set up once and keeps running independently of re-renders (see execution_table steps 1-3).

What happens if we forget to return the cleanup function in useEffect?

The interval would continue running even after the component unmounts, causing memory leaks and unexpected behavior (see execution_table step 4 for cleanup importance).

Why does the component re-render when count changes?

Because setCount updates state, React triggers a re-render to update the displayed count (see execution_table steps 2 and 3).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of count at step 3?

A 0

B 1

C 2

D 3

💡 Hint

Check the 'State After' column at step 3 in the execution_table.

At which step does the cleanup function run to stop the interval?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look for 'Cleanup function clears interval' in the 'Action' column.

If the dependency array in useEffect was omitted, how would the execution table change?

A The interval would start only once on mount.

B The interval would restart on every render, creating multiple intervals.

C The cleanup would never run.

D The count would never update.

💡 Hint

Think about how useEffect runs without dependencies and how that affects intervals.

Concept Snapshot

React functional components use useEffect to handle lifecycle events.
- useEffect with [] runs once on mount (setup).
- Return a cleanup function to run on unmount.
- State updates trigger re-renders.
- useEffect with dependencies runs on those changes.
This manages side effects like timers safely.

Full Transcript

This visual execution shows how React functional components use the useEffect hook to manage common lifecycle use cases. When the component mounts, useEffect runs once to start a timer interval. The state variable 'count' increments every second, triggering re-renders that update the displayed seconds. When the component unmounts, the cleanup function returned by useEffect clears the interval to prevent memory leaks. The execution table traces each step: initial mount, timer ticks, and cleanup on unmount. The variable tracker shows how 'count' changes over time. Key moments clarify why useEffect runs only once with an empty dependency array, why cleanup is necessary, and how state updates cause re-renders. The quiz tests understanding of state values at steps, when cleanup runs, and effects of missing dependencies. This helps beginners see React lifecycle in action with hooks.

Practice

1. What is the primary purpose of the useEffect hook in React functional components?

easy

A. To define event handlers

B. To declare state variables

C. To run code after the component renders or updates

D. To style components dynamically

Solution

1. Step 1: Understand the role of useEffect

   The useEffect hook runs side effects like data fetching or timers after rendering.

2. Step 2: Compare with other options

   Declaring state is done with useState, event handlers are functions, and styling is separate.

3. Final Answer:

   To run code after the component renders or updates -> Option C

4. Quick Check:

   useEffect runs side effects after render [OK]

Hint: useEffect runs code after render or update [OK]

Common Mistakes:

• Confusing useEffect with useState
• Thinking useEffect is for styling
• Believing useEffect defines event handlers

2. Which of the following is the correct syntax to run an effect only once when a React component mounts?

easy

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

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

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

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

Solution

1. Step 1: Understand dependency array in useEffect

   An empty array [] means the effect runs once on mount only.

2. Step 2: Analyze other options

   Omitting dependencies runs effect after every render; arrays with unstable values like functions or objects run on every render since they are recreated.

3. Final Answer:

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

4. Quick Check:

   Empty array runs effect once on mount [OK]

Hint: Empty dependency array means run once on mount [OK]

Common Mistakes:

• Omitting dependency array causes repeated runs
• Using non-empty arrays runs effect multiple times
• Putting recreated functions or objects in dependency array causes re-runs

3. Consider this React component:

function Timer() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);
  return <div>Count: {count}</div>;
}

What will be displayed after 3 seconds?

medium

A. Count: 0

B. Count: 1

C. Count: 1000

D. Count: 3

Solution

1. Step 1: Understand the interval effect

   The effect sets an interval that increments count every 1000ms (1 second).

2. Step 2: Calculate count after 3 seconds

   After 3 intervals, count increments from 0 to 3.

3. Final Answer:

   Count: 3 -> Option D

4. Quick Check:

   Interval increments count every second [OK]

Hint: Interval increments count every second [OK]

Common Mistakes:

• Ignoring cleanup function
• Thinking count stays 0
• Confusing milliseconds with count value

4. What is wrong with this React useEffect usage?

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('Hello');
  }, 1000);
});

medium

A. Missing dependency array causes multiple timeouts to be set on every render

B. setTimeout is not allowed inside useEffect

C. console.log cannot be used inside useEffect

D. The timeout duration must be less than 500ms

Solution

1. Step 1: Check dependency array presence

   Without a dependency array, the effect runs after every render, creating a new timeout each time.

2. Step 2: Understand consequences

   This causes multiple timers to accumulate (no cleanup returned), leading to multiple console.logs firing.

3. Final Answer:

   Missing dependency array causes multiple timeouts to be set on every render -> Option A

4. Quick Check:

   Missing dependencies cause repeated effect runs [OK]

Hint: Always add dependency array to avoid repeated effects [OK]

Common Mistakes:

• Thinking setTimeout is disallowed in useEffect
• Believing console.log can't be used
• Assuming timeout duration limits

5. You want to fetch user data only when the userId prop changes in a React component. Which useEffect hook is correct?

function UserProfile({ userId }) {
  const [user, setUser] = React.useState(null);

  useEffect(() => {
    fetch(`https://api.example.com/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, ???);

  return <div>{user ? user.name : 'Loading...'}</div>;
}

hard

A. [userId]

B. [user]

C. []

D. [fetch]

Solution

1. Step 1: Identify when to run the effect

   The effect should run only when userId changes to fetch new data.

2. Step 2: Choose correct dependency array

   Including userId in the dependency array triggers effect on its change.

3. Final Answer:

   [userId] -> Option A

4. Quick Check:

   Dependency array controls when effect runs [OK]

Hint: Put changing props in dependency array [OK]

Common Mistakes:

• Using empty array runs effect only once
• Using state variable instead of prop
• Including functions like fetch in dependencies