useState hook in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ state_output

intermediate

What is the output of this React Native component?

Consider this React Native component using useState. What will be displayed after pressing the button twice?

React Native

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

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

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

A 2

B 1

C 0

D Button press causes error

💡 Hint

Each button press increases the count by 1.

The initial count is 0. Pressing the button twice calls setCount(count + 1) two times, increasing count to 2.

❓ component_behavior

intermediate

How does this useState update behave inside a loop?

What will be the final value of count after pressing the button once in this React Native component?

React Native

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

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

  const handlePress = () => {
    for (let i = 0; i < 3; i++) {
      setCount(count + 1);
    }
  };

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Add 3" onPress={handlePress} />
    </View>
  );
}

A 3

B 0

C 1

D Button press causes error

💡 Hint

Remember that state updates are asynchronous and do not immediately update count inside the loop.

Each setCount(count + 1) uses the same count value (0) because state updates are batched. So after the loop, count becomes 1, not 3.

📝 Syntax

advanced

Which option correctly initializes useState with a function?

Which code snippet correctly uses useState with a function to set the initial state lazily?

A const [value, setValue] = useState(() => { expensiveComputation() });

B const [value, setValue] = useState(() => expensiveComputation());

C const [value, setValue] = useState(() => expensiveComputation);

D const [value, setValue] = useState(expensiveComputation());

💡 Hint

Lazy initialization requires passing a function that returns the initial value.

Option B correctly passes a function that calls expensiveComputation() and returns its result lazily. Option B calls the function immediately. Option B returns undefined because of missing return. Option B returns the function itself, not the result.

🔧 Debug

advanced

Why does this useState update not reflect immediately in the UI?

In this React Native component, why does the displayed count not update immediately after calling setCount(count + 1) twice in a row?

React Native

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

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

  const incrementTwice = () => {
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment Twice" onPress={incrementTwice} />
    </View>
  );
}

A Because React Native does not support multiple state updates in one function.

B Because setCount is asynchronous and the second call cancels the first.

C Because the Button component does not trigger state updates properly.

D Because both setCount calls use the same stale count value, so count only increases by 1.

💡 Hint

Think about how state values are captured in closures.

Both setCount calls use the same count value from the closure (stale value). So the state only increments by 1, not 2.

🧠 Conceptual

expert

What is the best way to increment state multiple times in one event handler?

You want to increment a counter state three times in a single button press. Which approach ensures the count increases by 3?

A Call setCount(c => c + 1) three times in a row.

B Call setCount(count + 1) three times in a row.

C Call setCount(count + 3) once.

D Call setCount(() => count + 3) once.

💡 Hint

Remember how React batches state updates and how to use the updater function form.

Option A uses the functional updater form, which correctly increments the state three times by applying each update to the latest state. Option A uses stale state and increments only once. Option A increments by 3 once but may cause issues if state updates are asynchronous. Option A returns a function instead of a value, causing errors.