What is useEffect in React - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the useEffect hook from React.

React

import React, { [1] } from 'react';

Drag options to blanks, or click blank then click option'

AuseEffect

BuseState

CuseContext

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useState instead of useEffect

Forgetting to import useEffect

Using useContext or useRef by mistake

The useEffect hook is imported from React to run side effects in functional components.

2fill in blank

medium

Complete the code to run a side effect after the component renders.

React

useEffect(() => { console.log('Component rendered'); [1] });

Drag options to blanks, or click blank then click option'

Anull

B()

C[]

D{}

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the second argument causes effect to run after every render

Using {} or () instead of []

Passing null does not work as dependency list

Passing an empty array [] as the second argument makes useEffect run only once after the first render.

3fill in blank

hard

Fix the error in the cleanup function of useEffect.

React

useEffect(() => { const timer = setTimeout(() => {}, 1000); return [1]; });

Drag options to blanks, or click blank then click option'

A() => clearTimeout(timer)

BclearTimeout(timer)

CclearInterval(timer)

D() => clearInterval(timer)

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the result of clearTimeout instead of a function

Using clearInterval instead of clearTimeout

Not returning a cleanup function

The cleanup function must be a function that React calls to clean up. So return a function that calls clearTimeout.

4fill in blank

hard

Fill both blanks to run effect only when count changes and clean up properly.

React

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

Drag options to blanks, or click blank then click option'

A() => console.log('Cleanup')

Bcount

Ccount + 1

D() => clearTimeout(timer)

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong dependency in array

Not returning a function for cleanup

Returning a function that does not clean up

The effect runs when count changes. The cleanup function logs 'Cleanup' before the next effect.

5fill in blank

hard

Fill all three blanks to fetch data on mount, store it in state, and clean up properly.

React

const [data, setData] = useState(null);
useEffect(() => {
  let isMounted = true;
  fetch('/api/data')
    .then(response => response.json())
    .then(json => { if ([1]) setData(json); });
  return [2];
}, [3]);

Drag options to blanks, or click blank then click option'

AisMounted

B() => { isMounted = false; }

C[]

D[data]

Attempts:

3 left

💡 Hint

Common Mistakes

Not checking if component is mounted before setting state

Missing cleanup function

Wrong dependency array causing multiple fetches

This pattern avoids setting state if the component unmounts before fetch finishes. The empty array [] makes the effect run only once on mount.