Props vs State in React: When to Use Which

Props vs State in React: When to Use Which

Props and state are the two kinds of data in React, and beginners constantly mix them up. Here is a clear way to decide which to use.

The Simple Rule

If the data comes from outside the component, it is props. If the data is owned and changed by the component itself, it is state.

Props: External Inputs

Props are passed in by a parent. The component cannot change them. Use props when a value is provided from above and the component just reads and displays it.

State: Internal Memory

State is created inside the component with useState. The component can change it. Use state when the component needs to track something that changes over time, like a counter or a form input.

When a Value Is Both

Sometimes a value starts as a prop but the component needs to change it. The right move is usually to keep the value in the parent's state and pass it down as a prop, with a callback to change it. This is called a controlled component.

Do Not Duplicate

A common bug is copying a prop into state and then letting the two drift apart. Keep one source of truth. If the parent owns the value, let it own the changes too.

Derived Values

If a value can be computed from props or existing state, do not store it in state. Compute it during render. Storing derived values creates sync bugs.

The Takeaway

Props are read-only inputs from the parent. State is internal, changeable memory. When unsure, ask: who owns this data and who changes it? That answer tells you props or state.