What is the difference between props and state?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
Props are read-only inputs passed from a parent describing how a component should render; state is data a component owns and can update over time, triggering re-renders when it changes.
Detailed explanation
Props flow down the component tree one way. A component treats them as immutable configuration — changing what a parent passes re-renders the child, but the child never edits props itself. State is private memory owned by the component (useState/useReducer); updating it schedules a re-render with new values. The mental model: 'state is for data that changes over time from within; props are for data that varies by usage from outside.' Derived values belong to neither — compute them during render instead of duplicating into state. When two components need the same data, lift that state to their closest common parent and pass pieces down as props. Lifting state up is the canonical answer to 'how do siblings share data?'
Official docs:React docs: State: A Component's Memory
Example
function Counter({ step = 1, label }) { // props: configured by parent
const [count, setCount] = useState(0); // state: owned here
return (
<button onClick={() => setCount(c => c + step)}>
{label}: {count}
</button>
);
}Interview tip
Use the phrase 'one-way data flow' and finish with lifting state up — it preempts the standard follow-up about sharing data between siblings.
Common mistakes
- Mutating props or state directly instead of using setters.
- Storing derived values in state, creating sync bugs.