What is state in React?

Updated Feb 20, 2026

Short answer

In React, state is a built-in object that stores dynamic data in a component. When state changes, the component re-renders to update the UI.

Deep explanation

State represents data that can change over time inside a component.

React provides useState to manage state in functional components.

Example:

TypeScript

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

How it works:

count holds current value
setCount updates state
UI re-renders when state changes

Real-world example

Like button example

TypeScript

1function LikeButton() {
2  const [likes, setLikes] = useState(0);
3
4  return (
5    <button onClick={() => setLikes(likes + 1)}>
6      ❤️ {likes} Likes
7    </button>
8  );
9}

Here:

Initial state = 0 likes
Every click increases likes
UI updates automatically

Common mistakes

### 1. Modifying state directly
```
count = count + 1
// ❌ wrong
```
Correct:
```
setCount(count + 1)
```
---
### 2. Assuming state updates instantly
State updates are asynchronous.
---
### 3. Using state for non-changing data
Not everything needs state—static values should not be stored in state.

Follow-up questions

What is the difference between state and props?
What is useState in React?
What causes a component to re-render?