Lifecycle mapping with hooks in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to run a function after the component mounts.

React

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

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

A[]

B[true]

C[null]

D[0]

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-empty array causes the effect to run multiple times.

Leaving out the dependency array runs the effect after every render.

Using an empty array [] as the dependency list runs the effect only once after the component mounts.

2fill in blank

medium

Complete the code to clean up a subscription when the component unmounts.

React

useEffect(() => {
  const id = subscribe();
  return () => {
    [1](id);
  };
}, []);

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

Asubscribe

Bunsubscribe

Cclear

Dremove

Attempts:

3 left

💡 Hint

Common Mistakes

Calling subscribe again in cleanup causes duplicate subscriptions.

Not returning a cleanup function causes resource leaks.

The cleanup function should call unsubscribe to stop the subscription when the component unmounts.

3fill in blank

hard

Fix the error in the effect to update the document title when count changes.

React

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

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

A[count]

B[title]

C[setCount]

D[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using an empty array means the title never updates after first render.

Using unrelated variables in dependencies causes unnecessary runs.

The effect should depend on count so it runs whenever count changes.

4fill in blank

hard

Fill both blanks to create a state and update it on button click.

React

const [[1], [2]] = useState(0);

<button onClick={() => [2]([1] + 1)}>Increment</button>

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

Acount

BsetCount

Cvalue

DsetValue

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order of state and setter.

Using unrelated names that don't match in update function.

The first blank is the state variable name, and the second is the function to update it.

5fill in blank

hard

Fill all three blanks to fetch data on mount and store it in state.

React

const [[1], [2]] = useState(null);

useEffect(() => {
  fetch('/api/data')
    .then(res => res.json())
    .then(data => [2](data));
}, [3]);

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

Adata

BsetData

C[]

D[data]

Attempts:

3 left

💡 Hint

Common Mistakes

Not using the setter to update state.

Missing or wrong dependency array causing multiple fetches.

We create a state variable data and its setter setData. The effect runs once on mount with an empty dependency array [].