What is useEffect in React - Practice Questions & Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the primary purpose of useEffect in React?

In React functional components, what does the useEffect hook mainly do?

A It replaces the useState hook to manage component state.

B It manages side effects like data fetching, subscriptions, or manually changing the DOM after rendering.

C It is used to create new React components dynamically.

D It automatically optimizes component rendering performance.

💡 Hint

Think about tasks that happen after the component shows on screen, like loading data or setting timers.

useEffect runs code after the component renders. This is useful for side effects such as fetching data, setting up subscriptions, or changing the DOM outside React's normal flow.

❓ component_behavior

intermediate

When does useEffect run with an empty dependency array?

Consider this React code snippet:

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

When will this effect run?

React

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

A Only once, right after the component mounts (first render).

B Every time the component re-renders.

C Only when the component unmounts.

D Every time any state or prop changes.

💡 Hint

Empty array means no dependencies to watch for changes.

When the dependency array is empty, useEffect runs only once after the first render, similar to componentDidMount in class components.

❓ state_output

advanced

What is logged when useEffect updates state without dependencies?

What will be logged to the console when this component runs?

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

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

  useEffect(() => {
    setCount(count + 1);
    console.log(count);
  });

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

React

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

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

  useEffect(() => {
    setCount(count + 1);
    console.log(count);
  });

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

A Throws an error because setCount is called inside useEffect.

B Logs 0 once and stops updating count.

C Logs 1 once and stops updating count.

D Logs 0, then 1, then 2, ... infinitely causing a render loop.

💡 Hint

Think about what happens when state changes inside useEffect without dependencies.

Without a dependency array, useEffect runs after every render. Calling setCount inside it updates state, causing another render, which triggers useEffect again. This creates an infinite loop logging increasing counts starting from 0.

🔧 Debug

advanced

Why does this useEffect cleanup not work as expected?

Examine this React code:

useEffect(() => {
  const id = setInterval(() => console.log('Tick'), 1000);
  return () => clearInterval(id + 1);
}, []);

Why does the interval not clear properly when the component unmounts?

React

useEffect(() => {
  const id = setInterval(() => console.log('Tick'), 1000);
  return () => clearInterval(id + 1);
}, []);

A Because setInterval is not allowed inside useEffect.

B Because the cleanup function is missing the dependency array.

C Because clearInterval is called with id + 1, which is not the correct interval ID.

D Because the interval ID is not stored in a ref.

💡 Hint

Check the argument passed to clearInterval.

The interval ID returned by setInterval must be passed exactly to clearInterval. Adding 1 changes the ID, so the interval is never cleared, causing it to keep running.

❓ lifecycle

expert

In what order do these useEffect hooks run and clean up?

Given this component:

function Example() {
  useEffect(() => {
    console.log('Effect 1');
    return () => console.log('Cleanup 1');
  }, []);

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

  return <div>Example</div>;
}

What is the correct sequence of console logs when the component mounts and then unmounts?

React

function Example() {
  useEffect(() => {
    console.log('Effect 1');
    return () => console.log('Cleanup 1');
  }, []);

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

  return <div>Example</div>;
}

A Mount: Effect 1, Effect 2; Unmount: Cleanup 2, Cleanup 1

B Mount: Effect 2, Effect 1; Unmount: Cleanup 1, Cleanup 2

C Mount: Effect 1, Effect 2; Unmount: Cleanup 1, Cleanup 2

D Mount: Effect 2, Effect 1; Unmount: Cleanup 2, Cleanup 1

💡 Hint

Remember that effects run in order, but cleanups run in reverse order.

On mount, effects run in the order they appear: Effect 1 then Effect 2. On unmount, cleanup functions run in reverse order: Cleanup 2 then Cleanup 1.