What is the difference between state and props?
Why Interviewers Ask This
This is a classic screening question for React.js roles. Hiring managers ask it early in interviews to gauge your baseline understanding and determine if you can communicate technical concepts clearly.
Answer
State and props are both JavaScript objects that hold information influencing the rendered output, but they serve different purposes. Props: passed FROM parent TO child; read-only inside the receiving component; the component cannot modify its own props; changes come from the parent re-rendering with new props. State: managed WITHIN the component; can be changed by the component itself via the state setter; triggers a re-render when changed; persists across renders (unlike local variables). Analogy: think of a React component as a function — props are the function's parameters (input from outside), state is the function's local variables (internal data). Decision guide: if the data is passed in from a parent, use props; if the data is owned by this component and can change over time, use state. Never modify props — this is a React rule. State changes are what drive UI updates. Start with props and only introduce state when you need to track something that changes and is not derivable from props.
Common Mistake
Candidates often give textbook answers here. Interviewers are more impressed when you relate the concept to a specific problem you solved in a real React.js project.