React Props vs State: Complete Comparison
Props and state are not rival concepts in React; they answer different questions about ownership, change, and component responsibility.
The real distinction is ownership
Props are inputs a component receives from outside. State is data the component owns and updates over time. That sounds basic, but many React bugs come from forgetting it. When the wrong component owns a piece of data, every refactor gets harder: forms become awkward, side effects multiply, and sibling components start coordinating through workarounds.
Use props for values the parent controls
If a parent decides what a child should render, props are the right mechanism. Theme choice, selected item, fetched data, permissions, and callbacks from parent to child all belong in that model. Props keep data flow explicit, which is one of React’s biggest strengths when a UI gets large.
Use state for local, changing UI concerns
- Input text that the component itself manages.
- Whether a menu is open.
- Temporary interaction state like hover, pending, or expanded sections.
Local state is useful when the data matters mainly to that component and does not need to be coordinated elsewhere.
What “lifting state up” really means
People often hear that state should be lifted up and over-apply it. Not every boolean deserves a global home. Lift state only when more than one component genuinely needs the same source of truth. Otherwise, you replace one problem with another by making simple UI behavior harder to reason about.
A practical test
Ask two questions: who should be allowed to change this value, and who needs to observe it? If the answer is “the parent owns it,” use props. If the answer is “this component manages it for itself,” use state. Good React structure is often just correct data ownership made boring and obvious.