useEffect hook in React Native

Introduction

The useEffect hook lets your React Native app do things after rendering, like fetching data or updating the screen. It helps your app react to changes smoothly.

When you want to load data from the internet after the screen shows up.

When you need to update the screen after a user changes something.

When you want to set up a timer or interval that runs repeatedly.

When you want to clean up resources like stopping a timer when leaving a screen.

Syntax

React Native

useEffect(() => {
  // code to run after render or when dependencies change
  return () => {
    // optional cleanup code
  };
}, [dependencies]);

The first argument is a function that runs after the component renders.

The second argument is an array of dependencies; the effect runs when these change. If empty, it runs only once after the first render.

Examples

This runs only once when the component first appears.

React Native

useEffect(() => {
  console.log('Runs once after first render');
}, []);

This runs every time the count value changes.

React Native

useEffect(() => {
  console.log('Runs when count changes:', count);
}, [count]);

This sets up a timer when the component mounts and cleans it up when it unmounts.

React Native

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Tick');
  }, 1000);
  return () => clearInterval(timer);
}, []);

Sample App

This component shows a number and a button. When you press the button, the number increases. The useEffect logs the new number every time it changes.

React Native

import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';

export default function Counter() {
  const [count, setCount] = useState(0);

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

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 24 }}>Count: {count}</Text>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Important Notes

Always include the dependency array to control when the effect runs.

Cleanup functions help avoid memory leaks, especially with timers or subscriptions.

Effects run after the screen updates, so they don't block the UI.

Summary

useEffect runs code after your component renders or updates.

Use it to fetch data, update things, or clean up resources.

Control when it runs by listing dependencies in an array.

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