How to Use useState in React Native: Simple Guide

In React Native, you use the useState hook to add state to functional components by importing it from React and calling const [state, setState] = useState(initialValue). This lets you store and update values that affect your UI dynamically.

Syntax

The useState hook is imported from React and used inside a functional component. It returns an array with two items: the current state value and a function to update that state.

• state: The current value stored.
• setState: Function to change the state.
• initialValue: The starting value of the state.

javascript

import React, { useState } from 'react';

function MyComponent() {
  const [state, setState] = useState(initialValue);
  // use state and setState in your component
}

Example

This example shows a button that counts how many times it is pressed using useState. Each press updates the count and re-renders the text.

javascript

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

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

  return (
    <View style={{ padding: 20 }}>
      <Text>You pressed {count} times</Text>
      <Button title="Press me" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Output

UI shows text "You pressed 0 times" and a button labeled "Press me". Pressing the button increases the number in the text.

Common Pitfalls

Common mistakes when using useState include:

• Trying to update state directly instead of using the setter function.
• Not initializing state properly, causing unexpected behavior.
• Using the old state value inside the setter without a function when updates depend on previous state.

javascript

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

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

  // Wrong: directly modifying state (DO NOT DO THIS)
  // count = count + 1;

  // Right: use setter function
  const increment = () => setCount(prevCount => prevCount + 1);

  return (
    <View style={{ padding: 20 }}>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={increment} />
    </View>
  );
}

Output

UI shows a count number and a button. Pressing the button increases count correctly using the setter function.

Quick Reference

Concept	Description	Example
Import	Bring useState from React	import { useState } from 'react';
Declare state	Create state and setter	const [value, setValue] = useState(0);
Update state	Use setter to change state	setValue(newValue);
Functional update	Update based on previous state	setValue(prev => prev + 1);

Key Takeaways

useState adds state to functional components in React Native.

Always use the setter function to update state, never modify state directly.

Initialize state with a proper starting value to avoid bugs.

Use functional updates when new state depends on previous state.

Each state update triggers a UI re-render with the new value.