What is the Difference Between Props and State?
Understand the difference between props and state in React, how each is owned and updated, and why the distinction matters for building interactive UIs.
Expected Interview Answer
Props are read-only data passed into a component from its parent, while state is data a component owns and manages internally that can change over time and trigger a re-render.
Props flow one way, from parent to child, and a component can never modify the props it receives — only the parent that owns the value can change it and pass down a new one. State, created with useState or useReducer, lives inside the component itself and is updated with a setter function that schedules a re-render whenever it changes. Props make components configurable and reusable, since the same component renders differently depending on what's passed in. State makes components interactive, capturing things like form input, toggles, or fetched data that change in response to user actions or effects.
- Props enable reusable, configurable components
- State enables interactivity and dynamic UI
- Clear unidirectional data flow via props
- Predictable re-renders triggered by state updates
- Separation of concerns between owner and consumer of data
AI Mentor Explanation
Props are like the batting order handed to a player by the captain — fixed instructions the player cannot rewrite mid-innings, only follow. State is like the player's own running tally of runs scored, which they update themselves after every shot, and that personal count changes how they approach the next ball.
Step-by-Step Explanation
Step 1
Parent owns props
A parent component defines a value and passes it down as an attribute when rendering the child.
Step 2
Child reads props
The child receives props as a read-only object and cannot modify it directly.
Step 3
Component declares state
Inside the component, useState creates a piece of state with an initial value and a setter.
Step 4
Events update state
User interactions or effects call the setter function, updating the state value.
Step 5
React re-renders
A state update triggers React to re-render the component with the new value.
Step 6
State can become props
A parent's state is often passed down as props to children, linking the two concepts.
What Interviewer Expects
- States props are read-only and owned by the parent
- States state is internal and mutable via a setter
- Explains that changing state triggers a re-render
- Understands data flows down via props, one-directionally
- Can give an example distinguishing the two
Common Mistakes
- Saying props can be mutated by the child directly
- Confusing state updates as synchronous and immediate
- Treating props and state as interchangeable
- Forgetting that state is scoped to the component that declares it
- Mutating state directly instead of calling the setter
Best Answer (HR Friendly)
“Props are information a component receives from its parent and cannot change, like instructions handed down. State is information a component keeps and updates on its own, like a personal counter, and changing it makes the screen update automatically.”
Code Example
function Counter({ label }) {
// props: 'label' comes from the parent, read-only
const [count, setCount] = useState(0); // state: owned locally
return (
<div>
<p>{label}: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
function App() {
return <Counter label="Clicks" />;
}Follow-up Questions
- Can a child component modify the props it receives?
- What happens to a component's state when it unmounts?
- How do you lift state up between sibling components?
- What is the difference between useState and useReducer for managing state?
- How does prop drilling relate to this distinction?
MCQ Practice
1. Who is allowed to modify a component's props?
Props are owned and controlled by the parent; the receiving component treats them as read-only.
2. What triggers a component re-render when using state?
Calling the setter function returned by useState schedules a re-render with the updated value.
3. Which best describes state?
State is data a component manages internally and can update over time, unlike read-only props.
Flash Cards
Who owns props? — The parent component; the child only reads them and cannot change them.
Who owns state? — The component itself, managed internally via useState or useReducer.
What direction do props flow? — One-directionally, from parent down to child.
What happens when state changes? — React schedules a re-render of the component with the updated state value.