What is State in React?
Understand state in React: private mutable data managed with useState that re-renders your UI on change. Includes functional updates and a counter example.
Expected Interview Answer
State is a component's private, mutable data that changes over time; when state updates, React re-renders the component to reflect the new value in the UI.
Unlike props, which are passed in and read-only, state is owned and managed inside the component — in functional components via the useState Hook. You never mutate state directly; you call the setter (e.g. setCount) so React knows to schedule a re-render. State updates can be asynchronous and batched, so to compute a new value from the previous one you should use the functional updater form.
- Makes components interactive and dynamic
- Triggers automatic re-renders on change
- Keeps data local and encapsulated
- Drives UI directly from data
- Supports functional updates for reliable transitions
AI Mentor Explanation
State is like the live scoreboard during a match — runs, wickets, overs. It changes as the game unfolds and the whole ground instantly sees the update. You don't scribble on the board directly; the official operator (the setter) changes it so everyone stays in sync, just as calling setState re-renders the UI with the new score.
Step-by-Step Explanation
Step 1
Declare state
Call const [count, setCount] = useState(0) to create a state value and its setter.
Step 2
Read the value
Use the state variable (count) directly inside your JSX to drive the rendered UI.
Step 3
Update via the setter
Call setCount(newValue) instead of mutating count directly so React schedules a re-render.
Step 4
Use the functional updater
When the next value depends on the previous, use setCount(prev => prev + 1) for correctness under batching.
Step 5
Let React re-render
On each state change React re-runs the component and updates only what changed in the DOM.
What Interviewer Expects
- Defining state as private, mutable component data
- Knowing state changes trigger re-renders
- Distinguishing state from props
- Never mutating state directly
- Using the functional updater form when appropriate
Common Mistakes
- Mutating state directly instead of using the setter
- Assuming setState updates the value synchronously
- Not using the functional updater for dependent updates
- Confusing state with props
- Storing derived data in state that could be computed on render
Best Answer (HR Friendly)
“State is the information a component keeps track of that can change while the app runs, like a counter or a form input. When the state changes, React automatically refreshes the screen so the user always sees the latest data.”
Code Example
import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
// Use the functional updater so batched clicks all count
const increment = () => setCount(prev => prev + 1)
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
)
}Follow-up Questions
- What is the difference between state and props?
- Why must you use the setter instead of mutating state?
- When should you use the functional updater form of setState?
- Why are state updates sometimes batched and asynchronous?
- When would you reach for useReducer instead of useState?
MCQ Practice
1. What happens when a component's state changes?
Updating state via its setter tells React to re-render the component so the UI reflects the new value.
2. Which is the correct way to update count based on its previous value?
The functional updater setCount(prev => prev + 1) reads the latest value and is safe under batching.
3. How does state differ from props?
State is private and managed within the component, while props are read-only inputs passed from the parent.
Flash Cards
What is state in React? — A component's private, mutable data that triggers a re-render when it changes.
How do you update state in a functional component? — Call the setter returned by useState, e.g. setCount(newValue) — never mutate directly.
Why use the functional updater? — It reads the latest previous value, staying correct when updates are batched.
State vs props? — State is owned and changeable inside the component; props are read-only inputs from the parent.