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().

Practice

1. What does the useEffect hook do in a React Native component?

easy

A. Defines the component's UI layout

B. Declares a new state variable

C. Runs code after the component renders or updates

D. Handles user input events

Solution

1. Step 1: Understand the purpose of useEffect

   The useEffect hook is designed to run side effects after rendering or updating a component.

2. Step 2: Compare with other React Native features

   Declaring state is done with useState, UI layout is JSX, and event handling uses props or handlers, not useEffect.

3. Final Answer:

   Runs code after the component renders or updates -> Option C

4. Quick Check:

   useEffect runs after render/update = A [OK]

Hint: useEffect runs code after render or update [OK]

Common Mistakes:

• Confusing useEffect with useState
• Thinking useEffect defines UI
• Assuming useEffect handles events directly

2. Which of the following is the correct syntax to run useEffect only once when the component mounts?

easy

A. useEffect(() => { /* code */ });

B. useEffect(() => { /* code */ }, []);

C. useEffect(() => { /* code */ }, true);

D. useEffect(() => { /* code */ }, null);

Solution

1. Step 1: Identify how to run useEffect once

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

2. Step 2: Analyze other options

   Omitting the dependency array runs on every render, and passing non-array values like true or null causes a type error since the second argument must be an array.

3. Final Answer:

   useEffect(() => { /* code */ }, []); -> Option B

4. Quick Check:

   Empty array means run once = A [OK]

Hint: Empty array runs useEffect once on mount [OK]

Common Mistakes:

• Forgetting the empty array causes repeated runs
• Using non-empty arrays thinking it runs once
• Omitting the dependency array

3. Consider this React Native code snippet where the setCount calls are in an event handler after initial mount:

const [count, setCount] = useState(0);
useEffect(() => {
  console.log('Count is', count);
}, [count]);

setCount(1);
setCount(2);

What will be printed in the console?

medium

A. Count is 0

B. Count is 1

C. Count is 1 and then Count is 2

D. Count is 2

Solution

1. Step 1: Understand useEffect dependency on count

   The effect runs after render when count changes. It logs the current count value.

2. Step 2: Analyze setCount calls

   Calling setCount(1) then immediately setCount(2) causes React to batch updates, so only the last value (2) triggers a render and effect.

3. Final Answer:

   Count is 2 -> Option D

4. Quick Check:

   Last setCount triggers effect with 2 = C [OK]

Hint: Last state update triggers useEffect with that value [OK]

Common Mistakes:

• Thinking both setCount calls trigger separate effects
• Expecting initial count log
• Ignoring React's batching of state updates

4. What is wrong with this useEffect usage?

useEffect(() => {
  fetchData();
}, fetchData);

Assuming fetchData is a function defined outside the component.

medium

A. Dependency array should be an array, not a function

B. fetchData should be called inside useEffect, not outside

C. useEffect cannot call functions

D. No dependency array means it runs only once

Solution

1. Step 1: Check dependency argument type

   The second argument to useEffect must be an array listing dependencies, not a function.

2. Step 2: Understand correct usage

   To run effect when fetchData changes, pass [fetchData]. Passing just fetchData causes a type error.

3. Final Answer:

   Dependency array should be an array, not a function -> Option A

4. Quick Check:

   Dependency must be array = B [OK]

Hint: Dependency argument must be an array [OK]

Common Mistakes:

• Passing a function instead of an array
• Omitting dependency array thinking it's optional
• Confusing function call with dependency list

5. You want to fetch user data only when the user ID changes in a React Native component. Which useEffect hook setup is best?

hard

A. useEffect(() => { fetchUserData(); }, [userId]);

B. useEffect(() => { fetchUserData(userId); }, [fetchUserData]);

C. useEffect(() => { fetchUserData(); });

D. useEffect(() => { fetchUserData(); }, []);

Solution

1. Step 1: Identify when to run fetchUserData

   The fetch should run only when userId changes, so userId must be in the dependency array.

2. Step 2: Evaluate options

   useEffect(() => { fetchUserData(); }, []); runs only once, ignoring userId changes. useEffect(() => { fetchUserData(); }); runs every render. useEffect(() => { fetchUserData(userId); }, [fetchUserData]); depends on fetchUserData, which is likely stable or external, not userId.

3. Final Answer:

   useEffect(() => { fetchUserData(); }, [userId]); -> Option A

4. Quick Check:

   Dependency array with userId triggers fetch on change = D [OK]

Hint: Put changing values in dependency array [OK]

Common Mistakes:

• Leaving dependency array empty when value changes
• Omitting dependency array causing too many fetches
• Using wrong dependencies causing missed updates