Difference Between State and Props in React
Learn the difference between state and props in React, with clear examples, data flow rules, code, and interview questions to help you answer with confidence.
Expected Interview Answer
Props are read-only inputs passed from a parent component to a child, while state is private, mutable data owned and managed inside a component itself.
Props flow one way, downward, and a child must never modify them — they configure the component from the outside. State lives inside a component, is initialized there (usually with useState), and changing it with the setter triggers a re-render. A common pattern is that one component holds state and passes pieces of it down to children as props, so data has a single source of truth.
- Clear one-way data flow that is easy to trace
- Props keep components reusable and configurable
- State enables interactivity and dynamic UI
- Single source of truth reduces bugs
- Predictable re-renders when state changes
AI Mentor Explanation
Props are like the match instructions a captain hands a batter before they walk out — a target score and a strike rate they cannot rewrite. State is the batter's own running tally of runs and balls faced, which only they update each delivery. The captain sets props from outside; the player manages their private state within the innings.
Step-by-Step Explanation
Step 1
Identify the data owner
Decide which component truly owns a piece of data — that component holds it as state.
Step 2
Initialize state locally
Use useState inside the owning component to create the value and its setter.
Step 3
Pass data down as props
Hand the value to child components through props so they can display it.
Step 4
Keep props read-only
Children read props but never mutate them; they request changes via callbacks instead.
Step 5
Update state to re-render
Call the state setter to change data and trigger a re-render of the affected subtree.
What Interviewer Expects
- Props are read-only, state is mutable
- Understanding of one-way (top-down) data flow
- State lives in the owning component, props are passed in
- Knowledge that updating state triggers a re-render
- Ability to give a concrete parent-child example
Common Mistakes
- Saying you can mutate props directly inside a child
- Confusing state and props as interchangeable
- Mutating state directly instead of using the setter
- Forgetting that state changes cause re-renders
- Duplicating the same data in both state and props
Best Answer (HR Friendly)
“Props are information a component receives from its parent and cannot change, like instructions passed in. State is data a component keeps and manages on its own, and when it changes, the component updates what the user sees.”
Code Example
function Parent() {
const [count, setCount] = useState(0)
return (
<div>
<Display value={count} />
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
)
}
function Display({ value }) {
// value is a read-only prop; Display never mutates it
return <p>Count: {value}</p>
}Follow-up Questions
- Can a child component change its props? Why or why not?
- What happens to the UI when state changes?
- How do you pass data from a child back up to a parent?
- What is lifting state up in React?
- When should data be state versus a prop?
MCQ Practice
1. Which statement about props is correct?
Props are passed in from a parent and are read-only; a child must not modify them.
2. What triggers a re-render in React?
Updating state through its setter schedules a re-render of the component and its subtree.
3. Where does state live?
State is declared and managed inside the component that owns it, typically via useState.
Flash Cards
Are props mutable? — No. Props are read-only inputs from the parent; a child must never change them.
Is state mutable? — Yes, via its setter. Calling the setter updates the value and re-renders the component.
Which direction does data flow? — One way, top-down: parents pass data to children through props.
What is lifting state up? — Moving shared state to the closest common ancestor and passing it down as props.