What is the difference between props and state?

Question

Accepted Answer

Both hold data that affects what a component renders, but they differ in **who owns the data** and **whether it can change**. - **props** are passed *into* a component from its parent. They are **read-only** — the component must never modify them. - **state** is owned and managed *inside* the component. It can change over time, and changing it triggers a **re-render**. ## Example ```jsx // `step` is a PROP — given by the parent, the child only reads it. // `count` is STATE — owned here, changes on click, causes a re-render. function Counter({ step }) { const [count, setCount] = useState(0); return ( ); } // Parent decides the step and passes it down: ``` Data flows **down** (parent → child via props) and changes flow **up** (child asks the parent to change something via a callback prop like `onChange`). This one-way flow is what makes React apps predictable. ## How to decide which to use - Comes from above and the component shouldn't change it → **prop**. - The component must change it over time → **state**. - Mutating props (`props.x = 1`) is a bug — React won't re-render and you've broken the parent's ownership. To "change a prop", call a callback the parent gave you so the parent updates its own state and passes a new value down.