What is state in React?

beginner

Re-explain

State is data React keeps for a component, and it can change over the component's lifetime. When state changes, React re-renders the component.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

State is local to its component, and each copy of the component gets its own. It is mutable in the sense that it changes over time, but you never modify it directly. You call the setter, like setCount, and React re-renders with the new value.

Rewriting in plainer words…

This answer doesn't lend itself to a diagram - it reads best . No credits were charged.

Why there's no diagram: “”

The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓

The diagram below the answer is the concept . Jump to it ↓

Tailored explanation · switch back to · ·

What should the new diagram focus on?

Guided practice for React One question at a time. Answer out loud, get graded, see what you missed.

How well did you know this?

AI:

Saved in this browser - sign in to keep your review list.

How should your speech become text?

Listening… your words appear above as you speak - tap Stop when you're done.

Recording · cr - tap Stop & transcribe when you're done.

Transcribing with AI…

Voice:

Keep going - a few more words and AI can grade it.

Interview lens How interviewers actually use this question

Likely follow-ups

What's the difference between props and state? Props come from the parent and the child only reads them. State belongs to the component, and only its setter changes it.
If a click handler calls setCount(count + 1) twice, what does count end up as, and why? Both calls read the same count from this render, so it goes up by 1. The updater form setCount(c => c + 1) builds on the latest queued value.
Why not change an object in state directly, like user.name = 'Sam', and then call the setter? React compares old and new values with Object.is. A mutated object keeps its reference, so React may skip the render. Pass a new copy instead.
Two sibling components need the same piece of state. Where should it live? Move it to their closest common parent, then pass the value and the setter down as props.
Should you keep a value in state if you can compute it from props or other state? No. Compute it during render. A second copy in state can drift out of sync with its source and needs extra updates to stay correct.

What you can say

State is data React keeps for a component that can change over time, and when it changes, React re-renders that component.
In a function component I get it from useState, which gives me the current value and a setter, like count and setCount starting at zero.
When the user clicks, I call setCount(count + 1), and React re-renders the component with the new count.
I never assign to the state variable myself. The setter is how React finds out something changed.
State is local, so each copy of the component keeps its own value. If two components need the same data, I lift the state up to a common parent.

Weak answers to avoid

Mutates state directly count++ or pushing into a state array skips the setter, so React has no reason to re-render. Say you always call the setter with a new value.
Blurs state and props Props come from the parent and the child doesn't change them. Keep them apart. State is data the component owns and updates through its setter.
Treats state as shared or global Each rendered copy of a component has its own state, so two Counters count separately. Sharing a value means lifting state up or using Context.
Expects the new value right after the setter Reading count on the line after setCount still gives the old value. The new value shows up on the next render, which is why the updater form exists.

Interview lens

Likely follow-ups, what you can say, and the weak answers to avoid.

Want a quick review of the fundamentals? See the React cheatsheet.

← Back to all React questions

Pro · $10/mo

88 of 103 React answers are in Pro.

Full answers, code samples, and AI explanations that go simpler or deeper. Cancel anytime.

Full answers + code
AI explanations, simpler or deeper
1,000 AI credits / month
Cancel anytime

Get Pro → See plans & pricing →