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.