React Props vs State: The Difference That Matters

In React, props and state both hold data, but they answer different questions. Props are read-only inputs a parent passes down to configure a child. State is private memory a component owns and updates itself.

The difference at a glance

Think of props as settings a parent hands over, and state as a value the component changes over time. The table captures the split:

Use the table as a checklist when you are unsure where a value belongs.

Props are inputs from the parent

A parent passes props the same way you set HTML attributes. The child reads them but can never change them:

App.jsx

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}
 
function App() {
  return <Greeting name="Maya" />;
}

The browser shows "Hello, Maya." If App rendered a different name, Greeting would show that instead. Greeting itself has no way to change name, and that is the point. Props flow one way.

The guide on passing props covers destructuring, defaults, and passing objects and arrays.

State is private memory

When a component must change its own data, it uses state. The Counter component below owns its number:

App.jsx

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

Click the button and the label updates. The count value lives inside Counter. No parent passed it, and no parent can read or change it directly.

Calling setCount triggers a re-render, and the new value appears on screen. The useState guide explains state snapshots and updates in depth.

Render two Counters next to each other and each one keeps its own number. State is local to the component instance, unlike a shared module variable.

A value can be both prop and state

Props and state are not opposites. The same value often starts as state in a parent and travels down as a prop. Here the parent owns the name and passes it to the child:

App.jsx

function App() {
  const [name, setName] = useState("Maya");
 
  return <Greeting name={name} />;
}
 
function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

App owns the value and can change it. Greeting receives it as a read-only prop and simply renders it. This is the everyday shape of a React app: state at the top, props flowing down.

How to choose

Ask two questions when deciding where a value belongs.

• Does the parent need to configure the child? Use a prop.
• Does the value change because of interaction inside the component? Use state.

A value can start as a prop and influence state. A form might initialize its state from a prop, then let the user edit that state locally. If you can derive a value from existing props or state, do not store it again.

When two components need to share a changing value, move it to their shared parent and pass it down. That pattern is called lifting state up, and the next guides walk through it step by step.

What to learn next

Read the state guide for the full picture on updating values, then see how to share data with props across a component tree. Each new component follows the same rule: props come in, state remembers, and the UI stays in sync.