Multiple effects in a component in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React hook used for side effects.

React

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

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

AuseState

BuseEffect

CuseRef

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of useEffect for side effects.

Forgetting to import useEffect.

The useEffect hook lets you perform side effects in React components.

2fill in blank

medium

Complete the code to add a side effect that logs 'Hello' once when the component mounts.

React

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

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

A[]

B[true]

C[null]

D[0]

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving out the dependency array causes the effect to run after every render.

Using non-empty arrays causes repeated runs.

An empty dependency array [] makes the effect run only once after the first render.

3fill in blank

hard

Fix the error in the effect that should 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]

Bcount

C[]

D[setCount]

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-array dependency causes errors.

Leaving the dependency array empty causes stale updates.

The effect depends on count, so it must be in the dependency array to update correctly.

4fill in blank

hard

Fill both blanks to create two effects: one logs on mount, the other logs count changes.

React

useEffect(() => { console.log('Mounted'); }, [1]);
useEffect(() => { console.log(count); }, [2]);

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

A[]

B[count]

C[true]

D[null]

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same dependency array for both effects.

Forgetting to include count in the second effect's dependencies.

The first effect runs once on mount with an empty array. The second runs when count changes.

5fill in blank

hard

Fill all three blanks to create effects: one on mount, one on count change, and one on user change.

React

useEffect(() => { console.log('Start'); }, [1]);
useEffect(() => { console.log(count); }, [2]);
useEffect(() => { console.log(user); }, [3]);

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

A[]

B[count]

C[user]

D[true]

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same dependency array for all effects.

Leaving out dependencies causing stale or missing updates.

The first effect runs once on mount. The second runs when count changes. The third runs when user changes.