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.