Effect execution timing in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to run the effect only once after the component mounts.

React

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

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

A[null]

B[]

C[true]

D[0]

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-empty dependency 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 makes the effect run only once after the component mounts.

2fill in blank

medium

Complete the code to run the effect whenever the 'count' state changes.

React

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

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

A[setCount]

B[]

C[count]

D[count, setCount]

Attempts:

3 left

💡 Hint

Common Mistakes

Using an empty array runs effect only once, not on count changes.

Including setter functions in dependencies is usually unnecessary.

Including count in the dependency array makes the effect run whenever count changes.

3fill in blank

hard

Fix the error in the effect to avoid running infinitely when 'value' changes.

React

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

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

A[value, setValue]

B[value]

C[setValue]

D[]

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'value' in dependencies causes infinite re-renders.

Not using a dependency array runs effect every render.

Using an empty dependency array prevents the effect from running infinitely by not reacting to value changes.

4fill in blank

hard

Fill both blanks to run the effect when 'userId' changes and clean up before next run.

React

useEffect(() => {
  const subscription = subscribeToUser([1]);
  return () => [2];
}, [userId]);

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

AuserId

Bsubscription.unsubscribe()

Cunsubscribe()

Dsubscription.close()

Attempts:

3 left

💡 Hint

Common Mistakes

Not cleaning up subscriptions causes memory leaks.

Calling wrong cleanup method causes errors.

The effect subscribes using userId and cleans up by calling subscription.unsubscribe() before the next effect run.

5fill in blank

hard

Fill all three blanks to update document title with count and clean up on unmount.

React

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

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

Acount

B'React App'

D[]

Attempts:

3 left

💡 Hint

Common Mistakes

Not including count in dependencies causes stale title.

Not resetting title on cleanup leaves wrong title after unmount.

The effect updates the document title with count. On cleanup, it resets the title to 'React App'. The effect runs whenever count changes.