Props vs State in React — The Difference That Clicks

The first React interview question, and the concept everything else builds on.

The analogy

Props are arguments; state is memory. A component receives props from its parent (read-only, like function parameters) and owns its state (private, changeable).

function Parent() {
  const [theme, setTheme] = useState("dark");   // STATE — Parent owns it
  return <Child theme={theme} />;               // passed down as PROP
}

function Child({ theme }) {
  // theme is a PROP — Child can read it, never change it
  return <div className={theme}>...</div>;
}

The rules

• Props flow down only (unidirectional data flow)
• A component never modifies its own props — React will warn
• When state changes, the component AND its children re-render

Lifting state up

When two siblings need the same data, move the state to their common parent and pass it down to both. When many distant components need it — that is what Context (or Redux/Zustand) solves.

Continue: React interview questions.