What is the difference between state and props? | Interview Question

Q: What is the difference between state and props?

**Target Audience:** Anyone preparing for a React interview — assumes components exist. **Difficulty:** Easy > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The persistence results in section 4 were produced by clicking a real component and then changing its props on React 19.2.8. ## 1. Why This Even Matters — A Story First A vending machine is installed with a fixed price list — that comes from outside, and the machine cannot change it. It also keeps a running count of what it has sold, which it updates itself all day long. Price list: given to it, not its to change. Sales count: its own, and it is the only thing that changes it. That is props and state, and the deciding question is the same one: **can this thing change the value itself?** ## 2. The Core Idea 📌 **Interview term: props** — inputs a component receives from its parent. **Read-only**: a component may read them but must never assign to th

The problem

Question presented to candidate: "What is the difference between state and props, and how do you decide which one a value should be?"

What a strong answer should cover:

Props are inputs passed in by the parent; state is data the component owns and can change itself.
Props are read-only; state is changed through a setter, never by assignment.
Both cause a re-render when they change, so that is not the distinction.
State persists across re-renders and is tied to the component's position in the tree — a prop change does not reset it, but a key change remounts the component and does.
The deciding question: can this component change the value itself? If yes it is state; if it comes from above it is a prop.
Do not copy props into state — it creates a second source of truth that stops tracking the first.
A value that can be derived from props or state should be neither; compute it during render.
Where the value lives is a design decision: shared values get lifted, local ones stay colocated.

Clarifying questions expected:

"Is this value something the component changes, or is it given to it?"
"Does anything else need the same value?" — that pushes toward lifting.

Code / implementation expected: Optional. A component taking a prop and holding its own state alongside is enough.

state
props
components
data flow

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Anyone preparing for a React interview — assumes components exist. Difficulty: Easy

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The persistence results in section 4 were produced by clicking a real component and then changing its props on React 19.2.8.

1. Why This Even Matters — A Story First

A vending machine is installed with a fixed price list — that comes from outside, and the machine cannot change it. It also keeps a running count of what it has sold, which it updates itself all day long.

Price list: given to it, not its to change. Sales count: its own, and it is the only thing that changes it.

That is props and state, and the deciding question is the same one: can this thing change the value itself?

2. The Core Idea

📌 Interview term: props — inputs a component receive

The solution is hidden so you can try first

5 min read · 8 sections

Try it in the playground

Open any example in the playground to run and change it.

ReactState surviving a prop change, and resetting via key

Open in playground

import { useState } from "react";

// Takes a prop (read-only) AND owns state (its own). Both re-render it; only
// one of them can it change.
function Counter({ label }) {
  const [count, setCount] = useState(0);
  return (
    <div style={{ border: "1px solid #ddd", borderRadius: 8, padding: 12, marginBottom: 10 }}>
      <p style={{ margin: "0 0 6px" }}>
        prop <code>label</code>: <strong>{label}</strong> · state <code>count</code>:{" "}
        <strong>{count}</strong>
      </p>
      <button onClick={() => setCount((c) => c + 1)}>+1</button>
    </div>
  );
}

// A derived value is NEITHER prop nor state — just compute it.
function Greeting({ firstName, lastName }) {
  const fullName = firstName + " " + lastName;   // no useState needed
  const initials = (firstName[0] + lastName[0]).toUpperCase();
  return (
    <p style={{ fontSize: 14 }}>
      derived from props: <strong>{fullName}</strong> ({initials})
    </p>
  );
}

export default function App() {
  const [label, setLabel] = useState("A");
  const [resetToken, setResetToken] = useState(0);

  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6, maxWidth: 460 }}>
      {/* Changing resetToken changes the key, which remounts Counter and
          therefore resets its state. No effect, no manual clearing. */}
      <Counter key={resetToken} label={label} />

      <p>
        <button onClick={() => setLabel((l) => (l === "A" ? "B" : "A"))}>
          change the label prop
        </button>{" "}
        <button onClick={() => setResetToken((t) => t + 1)}>
          change the key (resets state)
        </button>
      </p>

      <Greeting firstName="Ada" lastName="Lovelace" />

      <p style={{ color: "#666", fontSize: 13 }}>
        Click +1 a few times, then change the label — the count survives, because
        props and state are independent. Change the key and it drops to 0,
        because React unmounted that instance and mounted a fresh one.
      </p>
    </div>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.