State

Introduction

Props let a parent configure a child, but they cannot change on their own from inside the child — they are read-only. Yet plenty of UI needs to change over time based on user interaction: a counter going up, a form field being typed into, a menu opening and closing. That is exactly what state is for.

This lesson introduces state conceptually and gives you a first working look at the useState Hook, the primary way function components hold state. A full, dedicated lesson on useState comes later in the Hooks section of this course — for now, focus on understanding what state is and how it behaves.

What Is State?

State is data that a component manages internally and that can change over time — as opposed to props, which are handed down from a parent and never change from within the component itself. State is what lets a component "remember" something between renders, like whether a checkbox is checked or how many times a button has been clicked.

A First Look at useState

Function components use the useState Hook to declare a piece of state. Calling useState(initialValue) returns an array with exactly two things: the current value, and a function to update it. Most code immediately destructures these two into named variables.

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return <p>Current count: {count}</p>;
}

Current count: 0

State vs Props

Props and state are the two core sources of data in React, but they play very different roles. Understanding the distinction clearly is one of the most important conceptual steps in learning React.

State Updates Trigger Re-Renders

Whenever you call a state updater function (like setCount from the earlier example), React schedules the component to run again with the new state value, producing updated JSX. This is the mechanism that makes React UIs feel "live" — you never manually touch the DOM, you just update state and let React re-render.

User clicks a button
        ↓
Event handler calls setCount(count + 1)
        ↓
React schedules a re-render of the component
        ↓
The component function runs again with the new state value
        ↓
React updates the real DOM to match the new UI

Example: A Simple Counter

Here is a complete, working counter component. Clicking the button updates state, which causes React to re-render the component with the new count.

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default Counter;

Count: 3
[Increment button]

Every click calls setCount with a new value, React re-renders Counter, and the paragraph shows the updated count — all without a single manual DOM update.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

State gives components memory — the ability to track and react to changing data over time, distinct from the fixed data passed in through props. Every interactive piece of a React app, from form inputs to toggles to counters, relies on this same underlying idea: update state, and let React handle the re-render.

In this lesson, you learned what state is, saw a first look at useState, compared state against props, and understood how state updates trigger re-renders through a simple counter example. Next, you will learn how to handle events in React — the trigger that usually causes state to change in the first place.