useState hook in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

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

The useState hook lets you add state to functional components. It helps components remember values between renders, like a counter or user input.

beginner

How do you declare a state variable using useState?

You call <code>const [value, setValue] = useState(initialValue);</code>. <code>value</code> holds the current state, and <code>setValue</code> updates it.

beginner

Why should you use the setter function from useState instead of changing the state variable directly?

Using the setter function tells React Native to update the UI and remember the new state. Changing the variable directly won’t update the screen.

intermediate

What happens when you call the setter function from useState with the same value as the current state?

React Native skips re-rendering because the state didn’t change. This helps keep the app fast by avoiding unnecessary updates.

intermediate

Can you use multiple useState hooks in one component? Why would you do that?

Yes, you can use many useState hooks to keep different pieces of state separate. This makes your code clearer and easier to manage.

What does useState return when you call it?

A A boolean indicating if state changed

B A single value representing the state

C An array with the current state and a function to update it

D A function to update the state only

useState returns an array with two items: the current state value and a setter function to update that state.

Which of these is the correct way to update state using useState?

A changeState(newValue);

B state = newValue;

C updateState(newValue);

D setState(newValue);

You must use the setter function returned by useState, commonly named setState, to update the state.

What is the initial value of state when you call useState() without arguments?

A undefined

B null

C 0

D empty string

If you don’t provide an initial value, the state starts as undefined.

Why might you use multiple useState hooks instead of one with an object?

A To avoid using setter functions

B To keep state updates simple and independent

C Because React Native doesn’t support objects in state

D To reduce the number of renders

Using multiple useState hooks keeps state pieces separate, making updates easier and clearer.

What happens if you call the setter function with a function instead of a value?

A The function receives the current state and returns the new state

B It causes an error

C The state resets to initial value

D The state becomes a function

Passing a function to the setter lets you update state based on the current state safely.

Explain how the useState hook works in React Native and why it is important.

Think about how components remember and update information.

Describe a simple example where you would use multiple useState hooks in one component.

Imagine a form with separate inputs.

Practice

1. What does the useState hook do in a React Native component?

easy

A. It fetches data from an external API automatically.

B. It styles the component with CSS properties.

C. It allows the component to remember and update values over time.

D. It creates a new screen in the app navigation.

Solution

1. Step 1: Understand the purpose of useState

   The useState hook is designed to let components keep track of values that can change, like user input or toggles.

2. Step 2: Compare options with useState's role

   Only It allows the component to remember and update values over time. correctly describes this behavior. Styling, fetching data, or navigation are handled by other tools.

3. Final Answer:

   It allows the component to remember and update values over time. -> Option C

4. Quick Check:

   useState manages state = A [OK]

Hint: Remember: useState stores and updates values inside components [OK]

Common Mistakes:

• Confusing useState with styling or navigation
• Thinking useState fetches data automatically
• Believing useState creates new screens

2. Which of the following is the correct way to declare a state variable called count with initial value 0 using useState?

easy

A. const [count, setCount] = useState;

B. const [count, setCount] = useState(0);

C. const count, setCount = useState(0);

D. const count = useState(0);

Solution

1. Step 1: Recall useState syntax

   The correct syntax uses array destructuring: const [state, setState] = useState(initialValue);

2. Step 2: Check each option

   const [count, setCount] = useState(0); matches the correct syntax. const count = useState(0); misses destructuring, C uses comma incorrectly, and A misses parentheses.

3. Final Answer:

   const [count, setCount] = useState(0); -> Option B

4. Quick Check:

   useState syntax = D [OK]

Hint: Use array destructuring with useState and provide initial value [OK]

Common Mistakes:

• Not using array destructuring
• Forgetting parentheses after useState
• Using commas instead of brackets

3. What will be displayed on the screen after the button is pressed twice in this React Native component?

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

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    
      {count}
       setCount(count + 1)} />
    
  );
}

medium

A. 2

B. 0

C. 1

D. Error: setCount is not a function

Solution

1. Step 1: Understand initial state and button action

   The initial count is 0. Each button press calls setCount(count + 1), increasing count by 1.

2. Step 2: Calculate count after two presses

   After first press: count = 1. After second press: count = 2. The displayed text updates accordingly.

3. Final Answer:

   2 -> Option A

4. Quick Check:

   Two increments from 0 = 2 [OK]

Hint: Each press adds 1 to count starting from 0 [OK]

Common Mistakes:

• Thinking count stays 0 without update
• Confusing initial value with updated value
• Expecting error due to misunderstanding setCount

4. Identify the error in this React Native code using useState:

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

export default function Example() {
  const [value, setValue] = useState;
  return (
    
      {value}
       setValue('Hello')} />
    
  );
}

medium

A. useState is missing parentheses to call it as a function.

B. The setter function name should be getValue, not setValue.

C. The initial state value must be a number, not undefined.

D. The Button component cannot have an onPress prop.

Solution

1. Step 1: Check useState declaration

   The code uses useState without parentheses, so it does not call the function to get state and setter.

2. Step 2: Understand consequences

   Without calling useState(), value and setValue are undefined, causing errors when used.

3. Final Answer:

   useState is missing parentheses to call it as a function. -> Option A

4. Quick Check:

   useState() must be called with () [OK]

Hint: Always call useState with parentheses: useState() [OK]

Common Mistakes:

• Forgetting parentheses after useState
• Misnaming setter function
• Assuming Button lacks onPress prop

5. You want to toggle a boolean state isVisible between true and false each time a button is pressed. Which is the best way to update the state using useState to ensure the toggle works correctly even if updates happen quickly?

const [isVisible, setIsVisible] = useState(false);

hard

A. setIsVisible(!isVisible);

B. setIsVisible(true);

C. setIsVisible(false);

D. setIsVisible(prev => !prev);

Solution

1. Step 1: Understand state updates with previous value

   When toggling, using the previous state ensures correct flipping even if updates queue quickly.

2. Step 2: Compare update methods

   setIsVisible(prev => !prev); uses a function to get previous state and invert it, which is reliable. setIsVisible(!isVisible); uses current state which may be stale. Options B and D set fixed values, not toggling.

3. Final Answer:

   setIsVisible(prev => !prev); -> Option D

4. Quick Check:

   Use functional update for toggling state [OK]

Hint: Use functional update: setState(prev => !prev) for toggles [OK]

Common Mistakes:

• Using current state directly causing stale updates
• Setting fixed true or false instead of toggling
• Not using functional update for quick repeated changes