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.

Practice

1. What is the main benefit of using multiple useEffect hooks in a React component?

easy

A. It combines all side effects into one function for faster execution.

B. It separates different side effects for better readability and maintenance.

C. It prevents the component from rendering multiple times.

D. It automatically optimizes the component's performance.

Solution

1. Step 1: Understand the purpose of multiple useEffect hooks

   Multiple useEffect hooks allow you to separate different side effects logically in a component.

2. Step 2: Recognize the benefit of separation

   This separation makes the component easier to read and maintain because each effect handles a specific task.

3. Final Answer:

   It separates different side effects for better readability and maintenance. -> Option B

4. Quick Check:

   Multiple effects = separation and clarity [OK]

Hint: Multiple effects separate tasks for clarity and easier updates [OK]

Common Mistakes:

• Thinking multiple effects combine tasks into one
• Believing multiple effects prevent re-renders
• Assuming multiple effects auto-optimize performance

2. Which of the following is the correct syntax to use two separate useEffect hooks in a React functional component?

easy

A. useEffect(() => { /* effect 1 */ }, []); useEffect(() => { /* effect 2 */ }, []);

B. useEffect(() => { /* effect 1 */ }, []) useEffect(() => { /* effect 2 */ }, []);

C. useEffect(() => { /* effect 1 */ } useEffect(() => { /* effect 2 */ });

D. useEffect(() => { /* effect 1 */ }, [] && []) useEffect(() => { /* effect 2 */ }, []);

Solution

1. Step 1: Recall correct useEffect syntax

   The useEffect hook takes a function and a dependency array as arguments, separated by a comma.

2. Step 2: Identify correct separation of two hooks

   Two separate useEffect hooks should be called one after another, each with its own function and dependency array, ending with semicolons.

3. Final Answer:

   useEffect(() => { /* effect 1 */ }, []); useEffect(() => { /* effect 2 */ }, []); -> Option A

4. Quick Check:

   Separate hooks with own deps and semicolons [OK]

Hint: Each useEffect needs its own function and dependency array [OK]

Common Mistakes:

• Using commas instead of semicolons between hooks
• Combining dependency arrays incorrectly
• Omitting dependency arrays causing unwanted runs

3. Consider this React component code:

function Example({ count }) {
  useEffect(() => {
    console.log('Effect A:', count);
  }, [count]);

  useEffect(() => {
    console.log('Effect B: component mounted');
  }, []);

  return <div>Count: {count}</div>;
}

What will be logged when the component first mounts with count = 5?

medium

A. Effect B: component mounted only

B. Effect B: component mountedEffect A: 5

C. Effect A: 5 only

D. Effect A: 5Effect B: component mounted

Solution

1. Step 1: Understand useEffect execution order on mount

   All useEffect hooks run after the first render. They run in the order they appear in code.

2. Step 2: Identify the order of console logs

   The first useEffect logs 'Effect A: 5', the second logs 'Effect B: component mounted'. So logs appear in code order.

3. Final Answer:

   Effect A: 5
   Effect B: component mounted -> Option D

4. Quick Check:

   Effects run in code order on mount [OK]

Hint: Effects run in code order after first render [OK]

Common Mistakes:

• Assuming effects run in reverse order
• Thinking effects run before render
• Confusing dependency arrays impact on first run

4. What is wrong with this React component using multiple effects?

function Demo({ value }) {
  useEffect(() => {
    console.log('Effect 1:', value);
  }, [value]);

  useEffect(() => {
    console.log('Effect 2');
  });

  return <div>Value: {value}</div>;
}

medium

A. The first useEffect should not have a dependency array.

B. You cannot use two useEffect hooks in one component.

C. The second useEffect has no dependency array, so it runs after every render.

D. The console.log statements are invalid inside useEffect.

Solution

1. Step 1: Check dependency arrays in useEffect hooks

   The first useEffect has a dependency array [value], so it runs only when value changes.

2. Step 2: Analyze second useEffect without dependency array

   The second useEffect has no dependency array, so it runs after every render, which might be unintended.

3. Final Answer:

   The second useEffect has no dependency array, so it runs after every render. -> Option C

4. Quick Check:

   Missing deps means effect runs every render [OK]

Hint: Always add dependency array to control effect runs [OK]

Common Mistakes:

• Thinking multiple useEffects are not allowed
• Ignoring missing dependency arrays
• Believing console.log is invalid inside useEffect

5. You want to fetch user data when the component mounts and also update the document title whenever the user's name changes. How should you organize your useEffect hooks?

hard

A. Use two separate useEffect hooks: one with empty deps for fetch, one with [user.name] for title.

B. Use one useEffect to fetch data and update title together with both dependencies.

C. Use one useEffect with no dependencies to do both tasks on every render.

D. Use two useEffect hooks both with empty dependency arrays.

Solution

1. Step 1: Separate concerns with multiple useEffect hooks

   Fetching data should happen once on mount, so useEffect with empty dependency array is best.

2. Step 2: Update document title when user.name changes

   Use a separate useEffect with [user.name] dependency to update title only when name changes.

3. Final Answer:

   Use two separate useEffect hooks: one with empty deps for fetch, one with [user.name] for title. -> Option A

4. Quick Check:

   Separate effects by task and dependencies [OK]

Hint: Separate effects by when and why they run [OK]

Common Mistakes:

• Combining unrelated tasks in one effect
• Missing dependencies causing stale updates
• Running fetch on every render unintentionally