State vs Props — React Technical Interview Questions & Answers

State vs Props

State vs Props

  • Props come in. State lives inside. A sale label on a card is often a prop — the parent already knows ‘Sale’. Whether the card is expanded is often state — only that card cares. If two cards must expand together, that flag lifts to the parent and comes back down as props.
  • Interview table: who owns it, who can change it, does a change re-render the owner. Don’t say ‘props are immutable, state is mutable’ and stop — state is updated by replacing, not by poking fields.
  • State vs Props — on screen: Sale tag + Show → Hide. label is a prop. open is state inside Card.
  Parent
    │ amount={199}
    ▼
  Price → ₹199

Technical Interview Tip: One example each side + when to lift.

Code Examples for State vs Props

Example

// State vs props
import { useState } from "react";

function Tag({ label }) {
  return <span>{label}</span>;
}

export default function Card() {
  const [open, setOpen] = useState(false);
  return (
    <article>
      <Tag label="Sale" />
      <button onClick={() => setOpen(!open)}>{open ? "Hide" : "Show"}</button>
    </article>
  );
}

State vs Props — on screen: Sale tag + Show → Hide. label is a prop. open is state inside Card.

How to Explain State vs Props to an Interviewer

When do you lift state?

Siblings need the same data

Can a child change a prop directly?

No