Multiple effects in a component in React - Step-by-Step Execution

Concept Flow - Multiple effects in a component

Component Mounts

↓

Run useEffect #1

↓

Run useEffect #2

↓

User Interaction or State Change

↓

Run useEffect #1 if deps changed

↓

Run useEffect #2 if deps changed

↓

Component Unmounts

↓

Cleanup from useEffect #1 and #2

When a React component mounts, all useEffect hooks run in order. On updates, only effects with changed dependencies run. On unmount, cleanup functions run.

Execution Sample

React

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

function MultiEffect() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

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

  useEffect(() => {
    console.log('Name effect:', name);
  }, [name]);

  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <input value={name} onChange={e => setName(e.target.value)} />
    </>
  );
}

This React component has two effects: one logs when count changes, the other logs when name changes.

Execution Table

Step	Trigger	State Before	Action	State After	Effect(s) Run	Console Output
1	Component Mount	count=0, name=''	Mount component	count=0, name=''	Both effects run (initial)	Count effect: 0 Name effect:
2	Click Increment Button	count=0, name=''	setCount(count+1)	count=1, name=''	Count effect runs	Count effect: 1
3	Type 'A' in input	count=1, name=''	setName('A')	count=1, name='A'	Name effect runs	Name effect: A
4	Click Increment Button	count=1, name='A'	setCount(count+1)	count=2, name='A'	Count effect runs	Count effect: 2
5	Type 'AB' in input	count=2, name='A'	setName('AB')	count=2, name='AB'	Name effect runs	Name effect: AB
6	Component Unmount	count=2, name='AB'	Unmount component	N/A	Cleanup runs if any	No console output

💡 Component unmounts, effects cleanup if defined, stopping further effect runs.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	Final
count	0	0	1	1	2	2	2
name	''	''	''	'A'	'A'	'AB'	'AB'

Key Moments - 3 Insights

Why do both effects run on the first render even though their dependencies are different?

On initial mount, React runs all useEffect hooks regardless of dependencies, as shown in execution_table step 1.

If only 'count' changes, why doesn't the 'name' effect run?

Because the 'name' effect depends only on 'name', it runs only when 'name' changes, as seen in steps 2 and 4 where only 'count' changes.

What happens to effects when the component unmounts?

React runs cleanup functions from all effects if provided, stopping side effects; no console output occurs as shown in step 6.

Visual Quiz - 3 Questions

Look at the execution table. What is the value of 'count' after step 4?

A 0

B 2

C 1

D Undefined

💡 Hint

Check the 'State After' column in row for step 4.

At which step does the 'Name effect' first run?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Effect(s) Run' and 'Console Output' columns for step 1.

If the 'name' state never changes, how many times will the 'Name effect' run?

A Every render

B Never

C Only once on mount

D Every time 'count' changes

💡 Hint

Refer to the explanation in key_moments about initial mount effects.

Concept Snapshot

React components can have multiple useEffect hooks.
Each effect runs after render if its dependencies change.
On mount, all effects run once.
On unmount, cleanup functions run if provided.
Effects run independently based on their own dependencies.

Full Transcript

This visual execution shows how a React component with two useEffect hooks behaves. When the component mounts, both effects run once regardless of dependencies. When the user clicks the increment button, only the effect watching 'count' runs. When the user types in the input, only the effect watching 'name' runs. On unmount, cleanup functions run if defined. The variable tracker shows how 'count' and 'name' change step-by-step. Key moments clarify why effects run on mount and how dependencies control effect execution. The quiz tests understanding of state changes and effect triggers.