Effect execution timing in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

When does this effect run?

Consider this React component using useEffect. When will the effect's console.log run?

React

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

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

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

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

A Only once when the component mounts.

B Every time the component renders, regardless of count.

C Every time the count state changes.

D Only when the component unmounts.

💡 Hint

Look at the dependency array in useEffect.

The effect runs after every render where the 'count' value changes because 'count' is in the dependency array.

❓ lifecycle

intermediate

Effect cleanup timing

What happens when a component with this effect re-renders due to state change?

React

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

function Logger() {
  const [text, setText] = useState('');

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

  return <input value={text} onChange={e => setText(e.target.value)} />;
}

A Cleanup runs after every render regardless of text.

B Cleanup runs only when the component unmounts.

C Cleanup never runs because there is no dependency array.

D Cleanup runs before the effect runs again on text change.

💡 Hint

Think about when cleanup functions run in useEffect with dependencies.

The cleanup runs before the next effect runs when the dependency changes, so before the effect runs again on 'text' change.

📝 Syntax

advanced

Identify the effect execution error

Which option causes a syntax error preventing the effect from running?

React

import React, { useEffect } from 'react';

function Demo() {
  useEffect(() => {
    console.log('Hello');
  }, );

  return <div>Demo</div>;
}

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

B useEffect(() => { console.log('Hello'); });

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

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

💡 Hint

Check the dependency array syntax.

Option A has a trailing comma with no dependency array, causing a syntax error.

❓ state_output

advanced

Effect and state update timing

What will be logged to the console after clicking the button once?

React

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

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

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

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

A Count is 0

B Count is 1

C Count is undefined

D No output

💡 Hint

The effect runs after state updates and re-renders.

After clicking, count updates to 1, triggering the effect which logs 'Count is 1'.

🔧 Debug

expert

Why does this effect run infinitely?

This component causes an infinite loop of effect executions. Why?

React

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

function InfiniteLoop() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    setValue(value + 1);
  }, [value]);

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

A Because setValue is called inside useEffect with value in dependencies, causing continuous updates.

B Because useEffect has no dependency array, so it runs every render.

C Because value is never updated, so effect runs infinitely.

D Because the component never renders.

💡 Hint

Think about what triggers the effect and what the effect does.

The effect updates 'value' state, which triggers the effect again due to 'value' in dependencies, causing an infinite loop.