What is the difference between state and props?

Question

Accepted Answer

Both hold data that drives what a component renders, but they differ in ownership and mutability . props — read-only data passed from a parent component. The parent owns and updates them; the child only reads. Used to configure and customize children. state — private, mutable data managed inside the component (via useState or this.state ). Changes to state trigger a re-render. Used for data the component itself controls. Lift state up — if multiple components need the same state, hoist it to the closest common parent and pass it down via props. Treat both as immutable — never mutate props ; never mutate state directly — always call the setter. Re-renders — both prop changes (from parent) and state changes trigger re-renders. Controlled vs uncontrolled — form inputs whose value lives in state are &ldquo;controlled&rdquo;; uncontrolled inputs hold their own DOM state. Key distinction: props are external inputs (read-only), state is internal data (mutable). Mention that data can be state in a parent and props in a child. The 'lifting state up' pattern shows practical understanding.