React Props vs State: What Is the Difference and When to Use Each

Props and state are the two ways data lives in a React component, and mixing them up causes a large share of beginner bugs. The short version: props are inputs from a parent, and state is memory owned by the component itself.

Props: data passed in

Props are the arguments a component receives. They flow one way, from parent to child, and a child must treat them as read-only.

function Welcome({ name }) {
  return <h1>Hello, {name}</h1>;
}

function App() {
  return <Welcome name="Asha" />;
}

If Welcome needs different data, the parent passes new props. The child never changes its own props.

State: data the component remembers

State is data that changes over time inside a component and should cause a re-render when it does. In function components you create it with the useState hook.

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}

Quick comparison

• Who owns it: props belong to the parent; state belongs to the component that declares it.
• Can it change: props are read-only to the receiver; state is updated with its setter function.
• What it causes: both trigger a re-render when their values change, but only state is changed from inside.

How a child changes parent data

Data flows down, but events flow up. If a child needs to change something owned by the parent, the parent passes a function as a prop, and the child calls it.

function Parent() {
  const [items, setItems] = useState([]);
  const add = (item) => setItems([...items, item]);
  return <AddForm onAdd={add} />;
}

Lift state up

When two components need the same changing data, move the state to their closest common parent and pass it down as props. This keeps a single source of truth instead of two copies that can disagree.

Do not duplicate or over-store state

Values that you can compute from props or other state should be calculated during rendering, not stored.

const fullName = firstName + " " + lastName; // not a separate piece of state

Copying a prop into state is a common mistake. The state does not update when the prop changes, so you end up with stale data.

Update state correctly

• Never mutate state directly. Create a new array or object: setItems([...items, item]).
• If the next value depends on the previous one, use the updater form: setCount(c => c + 1).
• Remember that state updates apply on the next render, so the variable you already hold is a snapshot. The React Hooks mental model explains this in more depth.

Choosing quickly

Ask: does this value change over time because of user interaction or data loading, and does this component own that change? If yes, it is state. If the value comes from a parent, or never changes, it is a prop or a plain constant.

Practise

The React Core Concepts quiz covers state updates, keys and derived data, and the React Hooks Lab provides interactive practice.

Key takeaways

• Props flow down and are read-only; state is owned and updated by the component.
• Use callbacks to send changes up, and lift state up to share it.
• Derive values instead of storing them.
• Update state immutably.