React Native Academy · Lesson

Managing Component State with useState

Introduce the useState hook, store a counter or toggle value in state, and trigger re-renders by calling the state setter function.

What Is State?

State is data that can change over time and that a component owns and manages internally. Unlike props (which come from the parent and are read-only), state is created and updated by the component itself. When state changes, React automatically re-renders the component to reflect the new values in the UI. Common state examples include: whether a modal is open, the text the user has typed, the currently selected tab, or items fetched from an API. State is what makes React components interactive.

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

export default function Counter() {
  // Declare state: count starts at 0
  const [count, setCount] = useState(0);

  return (
    <View style={{ padding: 24, alignItems: 'center' }}>
      <Text style={{ fontSize: 48, fontWeight: 'bold' }}>{count}</Text>
      <TouchableOpacity
        onPress={() => setCount(count + 1)}
        style={{ marginTop: 16, padding: 12, backgroundColor: '#4f86f7', borderRadius: 8 }}
      >
        <Text style={{ color: '#fff', fontSize: 18 }}>Increment</Text>
      </TouchableOpacity>
    </View>
  );
}

The useState Hook Signature

useState is a React Hook that you call at the top level of your component function. It takes one argument — the initial state value — and returns an array with two elements: the current state value and a setter function. You destructure these using array destructuring. The naming convention is [value, setValue]. The setter function is what you call to update state — never mutate the state variable directly. Each state variable is independent; call useState multiple times for multiple pieces of state.

import { useState } from 'react';

function MyComponent() {
  // Syntax: const [value, setter] = useState(initialValue);
  const [count, setCount] = useState(0);          // number
  const [name, setName] = useState('');            // string
  const [isVisible, setIsVisible] = useState(false); // boolean
  const [items, setItems] = useState([]);          // array
  const [user, setUser] = useState(null);          // object or null

  // Update state by calling the setter:
  // setCount(5);          ← sets to 5
  // setName('Alice');     ← sets to 'Alice'
  // setIsVisible(true);   ← sets to true
}

All lessons in this course

← Back to React Native Academy