useEffect hook in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the useEffect hook in React Native?

The useEffect hook lets you run code after the component renders. It helps manage side effects like fetching data, setting up subscriptions.

beginner

How do you run an effect only once when a component mounts using useEffect?

Pass an empty array [] as the second argument to useEffect. This tells React to run the effect only once after the first render.

intermediate

What happens if you omit the dependency array in useEffect?

The effect runs after every render, which can cause performance issues or unwanted repeated actions.

intermediate

How can you clean up side effects in useEffect?

Return a cleanup function inside useEffect. This function runs before the effect runs again or when the component unmounts, useful for removing subscriptions or timers.

intermediate

Explain the role of the dependency array in useEffect.

The dependency array tells React when to re-run the effect. The effect runs only if one of the dependencies changes between renders.

What does passing an empty array [] as the second argument to useEffect do?

A Runs the effect only when the component unmounts

B Runs the effect after every render

C Prevents the effect from running at all

D Runs the effect only once after the first render

An empty dependency array means the effect runs once after the component mounts.

Where should you put cleanup code for subscriptions or timers in useEffect?

A Inside the main body of the effect

B Outside the component

C In a function returned from the effect

D In the dependency array

Returning a function from useEffect lets React clean up before re-running or unmounting.

What happens if you omit the dependency array in useEffect?

A Effect runs after every render

B Effect runs only once

C Effect never runs

D Effect runs only on unmount

Without dependencies, the effect runs after every render.

Which of these is NOT a typical use case for useEffect?

A Defining a component's state

B Setting up a timer

C Setting up event listeners

D Fetching data from an API

State is defined with useState, not useEffect.

If you want an effect to run when a specific variable changes, where do you list that variable?

A Inside the effect function

B In the dependency array

C In the cleanup function

D In the component's props

Variables that trigger the effect to re-run go in the dependency array.

Describe how the useEffect hook works and why it is useful in React Native.

Think about when and why you need to do things like fetch data or set timers.

Explain the importance of the dependency array in useEffect and what happens if it is empty or missing.

Consider how React Native decides when to run your effect.

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