React · Theory

State vs Props

Theory

15/94

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.

Diagram

Parent
    │ amount={199}
    ▼
  Price → ₹199

Exam tip

One example each side + when to lift.

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.

Short notes

DefProps : in from parent, read-only.
RuleState : owned, setter, re-render.
RememberLift : when siblings share it.

// 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

Example

Short notes

Questions

State vs Props

Example

Short notes

Questions