What is the purpose of the useState hook in React?

Updated Feb 20, 2026

Short answer

The useState hook lets a React function component store and update state — data that can change over time and trigger a re-render. It replaces the need for class component state and gives function components a simple way to remember values between renders.

Deep explanation

useState is a built-in React Hook that adds local state management to function components. Before Hooks were introduced, state was mainly handled inside class components. With useState, a function component can keep track of information such as form inputs, counters, toggles, loading states, and user preferences.

The hook returns two values:

The current state value.
A function used to update that value.

The basic pattern looks like this:

Counter.jsx

JSX

1import { useState } from "react";
2
3function Counter() {
4  const [count, setCount] = useState(0);
5
6  return (
7    <button onClick={() => setCount(count + 1)}>
8      Clicked {count} times
9    </button>
10  );
11}

Here, count stores the current value, and setCount updates it. When setCount runs, React schedules a re-render so the UI can reflect the new state.

How `useState` works

A React component runs again every time it re-renders, but state values created with useState are preserved by React between those renders.

The flow is:

Rendering diagram…

`useState` does not directly change a variable; it tells React that the component's state has changed and the UI should update.

State updates and re-rendering

Calling the setter function does not immediately modify the existing state variable inside the current render. Instead, React creates a new render with the updated value.

For example:

JSX

1const [name, setName] = useState("Alex");
2
3function updateName() {
4  setName("Sam");
5  console.log(name); // Still "Alex" in this render
6}

This happens because each render has its own snapshot of state. The next render receives the updated value.

Updating based on previous state

When a new value depends on the previous value, use the functional update form:

JSX

setCount(previousCount => previousCount + 1);

This is safer because React may group multiple state updates together for performance.

`useState` compared with other approaches

Approach	Best for	Trade-off
`useState`	Simple component data	Can become harder to manage with many related values
`useReducer`	Complex state transitions	Requires more setup
Props	Data passed from parent components	Child cannot directly modify parent data
Context	Shared application data	Can cause unnecessary re-renders if overused

Use `useState` for data that belongs to one component and changes because of user interaction or events.

Important rules

React Hooks have rules that must be followed:

Call useState only at the top level of a component or custom Hook.
Do not call it inside loops, conditions, or nested functions.
Use the setter function instead of modifying state directly.

⚠️ A useful interview rule: state updates should describe what changed, while React decides when the component re-renders.

Real-world example

A login form is a common use case for useState. Each input field needs to remember what the user typed and update the screen as the user enters data.

LoginForm.jsx

JSX

1import { useState } from "react";
2
3function LoginForm() {
4  const [email, setEmail] = useState("");
5
6  return (
7    <input
8      value={email}
9      onChange={(event) => setEmail(event.target.value)}
10      placeholder="Email"
11    />
12  );
13}

The email state stores the current input value. Each keystroke calls setEmail, causing React to render the component again with the latest value.

Rendering diagram…

This pattern is called a controlled component because React state controls what appears in the input.

Common mistakes

* **Direct mutation** - Changing a state value directly, like `count++`, bypasses React's update system. Use the setter function instead.
* **Stale updates** - Using `setCount(count + 1)` for multiple dependent updates can use an old value. Use the functional form when based on previous state.
* **Conditional Hooks** - Calling `useState` inside an `if` statement breaks Hook ordering. Keep Hooks at the top level.
* **Too much state** - Storing values that can be calculated from existing state creates unnecessary complexity. Store only data that must be remembered.

Follow-up questions

What is the difference between state and props in React?
Why does calling a state setter cause a re-render?
Why should you use the functional form of a state update?
What is the difference between useState and useReducer?