Multiple effects in a component in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component with multiple useEffect hooks?

Consider this React component that uses two useEffect hooks. What will be logged to the console when the component first renders?

React

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

function Example() {
  const [count, setCount] = useState(0);

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

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

A Effect A: 0\nEffect B: Component mounted

B Effect B: Component mounted\nEffect A: 0

C Effect A: 0

D Effect B: Component mounted

💡 Hint

Remember that effects with empty dependency arrays run once after the first render, and effects with dependencies run after render and when dependencies change.

The effects run in the order they are defined after the first render. The first effect (Effect A) depends on count and logs Effect A: 0 since count is initialized to 0. The second effect (Effect B) has an empty dependency array and logs Effect B: Component mounted.

❓ state_output

intermediate

What is the value of count after clicking the button twice?

Given this React component with two useEffect hooks, what will be the value of count displayed after clicking the button two times?

React

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

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(c => c + 1);
  }, []);

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

  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

A 2

B 1

C 3

D 0

💡 Hint

Think about how the initial effect increments count once, then each button click increments count by one.

Initially, count is 0. The first useEffect runs once after mount and increments count to 1. Then clicking the button twice increments count by 2 more, resulting in 3.

❓ lifecycle

advanced

Which option correctly describes the order of effect cleanup and setup when count changes?

In this component, what is the order of console logs when count changes from 0 to 1?

React

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

function Demo() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect setup:', count);
    return () => {
      console.log('Effect cleanup:', count);
    };
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

A Effect setup: 0\nEffect setup: 1

B Effect setup: 1\nEffect cleanup: 0

C Effect cleanup: 1\nEffect setup: 0

D Effect cleanup: 0\nEffect setup: 1

💡 Hint

Recall that React runs cleanup of the previous effect before running the new effect.

When count changes, React first runs the cleanup function of the previous effect (logging Effect cleanup: 0), then runs the new effect setup (logging Effect setup: 1).

📝 Syntax

advanced

Which option will cause a runtime error due to incorrect useEffect dependencies?

Which of these useEffect hooks will cause a runtime error or infinite loop?

A useEffect(() => { setCount(count + 1); }, [count]);

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

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

D useEffect(() => { fetchData(); }, []);

💡 Hint

Consider what happens if you update state inside an effect that depends on that state.

Option A updates count inside an effect that depends on count. This causes the effect to run repeatedly, creating an infinite loop and runtime error.

🔧 Debug

expert

Why does this component not update the document title as expected?

Examine this React component. Why does the document title not update when count changes?

React

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

function TitleUpdater() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count is ${count}`;
  }, []);

  return <button onClick={() => setCount(count + 1)}>Increment</button>;
}

A Because document.title cannot be changed inside useEffect.

B Because the effect has an empty dependency array, it runs only once and does not update on count changes.

C Because setCount is not called correctly inside the effect.

D Because useState is initialized with 0, so count never changes.

💡 Hint

Think about how dependency arrays control when effects run.

The effect runs only once after the first render because of the empty dependency array. It sets the title to 'Count is 0' and never updates it again when count changes.

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