What is the difference between props and state in React?
❓ Interview Prompt: Compare props and state regarding immutability, ownership, and component re-rendering.
Both props and state are plain JavaScript objects that trigger a re-render when they change, but they serve opposite purposes:
| Feature | Props ('props') | State ('useState') |
|---|---|---|
| Definition | Arguments passed from parent to child | Internal data managed by the component |
| Mutability | Immutable (read-only by receiving component) | Mutable (via setter function) |
| Ownership | Owned by parent component | Owned by local component |
| Purpose | Configure component and pass data down | Track dynamic user input and UI changes |
One-Way Data Flow:
React enforces unidirectional data flow. A child component should never mutate its props directly. To update parent state from a child, the parent passes down a callback function as a prop.
Code Implementation Example
// Parent manages state and passes it as props
function CounterApp() {
const [count, setCount] = useState(0); // STATE (mutable via setCount)
return (
<CounterDisplay
count={count} // PROPS (read-only in child)
onIncrement={() => setCount(c => c + 1)} // Callback prop
/>
);
}
// Child receives props
function CounterDisplay({ count, onIncrement }) {
return (
<div>
<p>Current count: {count}</p>
<button onClick={onIncrement}>Add 1</button>
</div>
);
}Props are read-only configuration passed from above; state is local, mutable data managed by the component itself.