React state versus props, with one small example

• Props are inputs a parent passes to a child, like function arguments. The child reads them and never changes them.
• State is data a component owns and can change with its setter. Changing state makes React render the component again.

One example with both

function SeatBadge({ seats }) {
  return <span>{seats > 0 ? `${seats} seats left` : 'Full'}</span>;
}
function EventCard({ title, initialSeats }) {
  const [seats, setSeats] = useState(initialSeats);
  return (
    <div>
      <h3>{title}</h3>
      <SeatBadge seats={seats} />
      <button disabled={seats === 0} onClick={() => setSeats(s => s - 1)}>Register</button>
    </div>
  );
}
render(<EventCard title="Robotics workshop" initialSeats={2} />);

<div><h3>Robotics workshop</h3><span>2 seats left</span><button>Register</button></div>

• EventCard owns seats as state; clicking Register calls setSeats and React renders again.
• SeatBadge only receives seats as a prop. It has no idea where the number came from, which makes it easy to reuse and test.
• setSeats(s => s - 1) uses the previous value, which is the safe way when the new state depends on the old one.

Lifting state up

If two sibling components need the same changing data, for example a seat count shown in a header and in a card, move the state to their closest common parent and pass it down as props, along with a function to change it.

Questions to ask yourself

• Can this be computed from props or other state? Then compute it while rendering instead of storing it.
• Does a parent need to know about it? Then it belongs in the parent.
• Practise more in UniCircle interview prep: web development.