useEffect hook in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

React Native

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

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

A[state]

B[]

C[props]

D[count]

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dependency array causes the effect to run on every render.

Adding variables in the dependency array makes the effect run more than once.

Using an empty array [] as the dependency list makes the effect run only once when the component mounts.

2fill in blank

medium

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

React Native

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

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

A[state]

B[]

C[count]

D[props]

Attempts:

3 left

💡 Hint

Common Mistakes

Using an empty array causes the effect to run only once.

Using unrelated variables in the dependency array.

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

3fill in blank

hard

Fix the error in the cleanup function to avoid memory leaks.

React Native

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('Timer done');
  }, 1000);

  return () => [1];
}, []);

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

AsetTimeout(timer)

BclearInterval(timer)

CclearTimeout()

DclearTimeout(timer)

Attempts:

3 left

💡 Hint

Common Mistakes

Using clearInterval instead of clearTimeout.

Calling clearTimeout without the timer id.

The cleanup function should call clearTimeout(timer) to cancel the timer and prevent memory leaks.

4fill in blank

hard

Fill both blanks to update the document title with the current count and clean up properly.

React Native

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

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

Aconsole.log('Cleanup')

B[count]

C[]

DsetCount(0)

Attempts:

3 left

💡 Hint

Common Mistakes

Using an empty dependency array causes the title not to update.

Not returning a cleanup function or returning the wrong one.

The cleanup logs a message, and the effect runs whenever count changes, so [count] is the dependency array.

5fill in blank

hard

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

React Native

useEffect(() => {
  const controller = new AbortController();
  fetch('https://api.example.com/data', { signal: [1] })
    .then(response => response.json())
    .then(data => [2](data))
    .catch(error => {
      if (error.name !== 'AbortError') {
        console.error(error);
      }
    });
  return () => [3];
}, []);

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

Acontroller.signal

BsetData

Ccontroller.abort()

Dsignal

Attempts:

3 left

💡 Hint

Common Mistakes

Not passing the abort signal to fetch.

Not aborting the fetch in cleanup.

Using wrong variable names.

The fetch uses controller.signal to allow aborting. The data is set with setData. The cleanup aborts the fetch with controller.abort().