useEffect hook in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React Native component?

Consider this React Native component using useEffect:

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

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

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <View>
      <Text>Count: {count}</Text>
    </View>
  );
}

What will the Count text show after 3 seconds?

React Native

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

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

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <View>
      <Text>Count: {count}</Text>
    </View>
  );
}

A Count: 4

B Count: 0

C Count: 1

D Count: 3

💡 Hint

Think about how many times the interval callback runs in 3 seconds.

The useEffect runs once on mount because of the empty dependency array. The interval increases count by 1 every 1000ms (1 second). After 3 seconds, the count increments 3 times, so it shows 3.

❓ lifecycle

intermediate

When does this useEffect run?

Look at this React Native snippet:

useEffect(() => {
  console.log('Effect ran');
}, [props.value]);

When will the effect run?

React Native

useEffect(() => {
  console.log('Effect ran');
}, [props.value]);

A Only when props.value changes

B Every time the component renders

C Only when the component mounts

D Never

💡 Hint

Check the dependency array.

The effect runs on mount and whenever props.value changes. It does not run on every render, only when the dependency changes.

📝 Syntax

advanced

What error does this code raise?

Examine this React Native code using useEffect:

useEffect(() => {
  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    setData(data);
  }
  fetchData();
}, []);

What error will this code produce?

React Native

useEffect(() => {
  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    setData(data);
  }
  fetchData();
}, []);

A ReferenceError: setData is not defined

B No error, runs correctly

C TypeError: fetchData is not a function

D SyntaxError: useEffect callback cannot be async

💡 Hint

Check if all variables used are declared.

The code does not show setData defined anywhere. This causes a ReferenceError when calling setData(data). The useEffect callback itself is not async, so no syntax error occurs.

❓ state_output

advanced

What is the final value of count after clicking the button twice?

Consider this React Native component:

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

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

  useEffect(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Click me" onPress={() => setCount(count + 1)} />
    </View>
  );
}

What happens after clicking the button two times?

React Native

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

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

  useEffect(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Click me" onPress={() => setCount(count + 1)} />
    </View>
  );
}

A Count stays the same

B Count increases indefinitely causing a crash

C Count increases by 2 and stops

D Count increases by 1 and stops

💡 Hint

Think about what happens when count changes and triggers useEffect.

The useEffect depends on count and calls setCount(count + 1) every time count changes. This causes an infinite loop of updates, so the count increases indefinitely, likely crashing the app.

🔧 Debug

expert

Why does this useEffect not update the displayed data?

Here is a React Native component fetching data:

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

export default function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => {
        data = json;
      });
  }, []);

  return (
    <View>
      <Text>{data ? data.message : 'Loading...'}</Text>
    </View>
  );
}

Why does the component never show the fetched data?

React Native

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

export default function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => {
        data = json;
      });
  }, []);

  return (
    <View>
      <Text>{data ? data.message : 'Loading...'}</Text>
    </View>
  );
}

A Because fetch is not awaited

B Because useEffect has an empty dependency array

C Because data is assigned directly instead of using setData

D Because data.message does not exist

💡 Hint

How do you update state in React?

State variables like data must be updated using their setter function setData. Direct assignment to data does not update state or cause a re-render, so the UI never updates.

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