Props vs State in React: What's the Difference?

Jun 19, 2026 · 6 min read

← All articles

If you're new to React, "props vs state" is probably the first thing that genuinely trips you up. The good news: the difference is simple once it clicks, and almost every confusing bug in this area comes from blurring the line between the two.

Props: data passed in

Props are the values a component receives from its parent. Think of them like arguments to a function — the component reads them, but it never changes them. They flow down the tree, from parent to child.

function Greeting({ name }) {
  return <h1>Hi, {name}!</h1>;
}

// the parent decides what "name" is
<Greeting name="Ada" />

Because props are read-only, a component can't reach up and change what its parent handed it. That one-way flow is exactly what makes React apps easy to follow — there's more on it in thinking in components.

State: data the component owns

State is data a component creates and controls itself — and, crucially, can change over time. When state changes, the component re-renders. You add it with useState:

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

Here count belongs to Counter — nobody passed it in. For the full picture of how those updates actually work, see how useState works.

A rule of thumb

• Will the value change while the component is on screen? If not, it's probably a prop (or just a constant).
• Does the component itself need to change it in response to an event? That's state.
• Do several components need the same value? Lift the state to their closest shared parent and pass it down as props.

The classic mistake: copying props into state

It's tempting to take a prop and stash it in state "so I can use it":

// usually wrong — now there are two sources of truth
function Profile({ user }) {
  const [name, setName] = useState(user.name);
  // if the parent later changes user.name, this copy won't notice
}

Now you have two copies of the same data that can drift apart. Unless you specifically want a local, editable draft — like a form field, which is its own topic in controlled vs uncontrolled inputs — just read the prop directly. And remember: changing state re-renders the component, which is worth understanding in when and why components update.

Key takeaways

• Props are passed in and read-only; state is owned and changeable.
• Changing state re-renders the component; you can't change props.
• Don't copy props into state unless you truly need a separate local value.

Want the structured path? Explore the React roadmap or browse more articles.