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

01

Understand 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.

statepropscomponentsdata flow

02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the 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

Solution ready — 2 min read

Classified // press E to declassify

04

Explore the playground snippets

State surviving a prop change, and resetting via key

Run 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>
  );
}

05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.