State and the useState Hook

State is data that a component owns and manages internally, which can change over time in response to user actions, network responses, or timers. Unlike props, which are handed down from a parent, state lives inside the component itself and is completely private to it unless explicitly shared.

The useState hook is the primary way function components create and manage state. Calling useState(initialValue) returns a pair — the current state value and a setter function to update it — and, critically, calling that setter schedules a re-render of the component so the UI stays in sync with the latest data.

Why it matters

State is what makes a component interactive: the value of a counter, whether a menu is open, what has been typed into a field. The rule that state must be changed through its setter, and never modified directly, is the most important thing to understand about React, and the source of the most common bugs.

Declaring State with useState

const [count, setCount] = useState(0); declares a piece of state named count, initialized to 0, along with a function setCount used to update it. The array destructuring syntax is just a convention; useState technically returns a two-element array, and you name both elements yourself.

State Updates Trigger Re-Renders

Calling the setter function (e.g. setCount(count + 1)) tells React that this component's state has changed. React then re-runs the component function to compute new JSX and efficiently updates the real DOM to match. This is the core rendering model of React: state changes in, new UI out, automatically.

State Is Local and Isolated Per Component Instance

Each time a component is rendered as a separate instance (for example, multiple <Counter /> elements on the same page), each instance gets its own independent state. Updating one instance's state does not affect any other instance's state, even though they share the same component definition.

• Never mutate state directly (e.g. count = count + 1) — always call the setter function, since direct mutation will not trigger a re-render.
• When new state depends on the previous state, prefer the updater-function form, setCount(prev => prev + 1), to avoid stale values in rapid or batched updates.
• Initializing useState with an expensive computation should use the lazy initializer form, useState(() => computeInitial()), so the computation only runs once.

Example

import { useState } from 'react';

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

  function handleIncrement() {
    setCount((prev) => prev + 1);
  }

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

export default Counter;

Clicking the "Increment" button repeatedly increases the number shown in "Current count: 0" up through 1, 2, 3, and so on, because each click calls setCount and triggers a re-render with the updated value.

Exercise

Do this in src/App.jsx of a Vite + React project. Build a counter: a paragraph showing the count, a button that adds one, and a button that resets it to zero. Update the count from its previous value.

Expected result: the page shows "Count: 0"; each click on Add one increases it by one, and Reset returns it to zero.

import { useState } from "react";

export default function App() {
  // TODO: declare the count state, starting at 0

  return (
    <div>
      {/* TODO: a paragraph showing "Count: <count>" */}
      {/* TODO: a button that adds one */}
      {/* TODO: a button that resets to zero */}
    </div>
  );
}

import { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((previous) => previous + 1)}>Add one</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

Quick quiz

Interview questions