React State and Props

Props and state are the core data mechanisms in React.

Props

Props are values passed into a component by its parent. They define the component’s public API.

State

State is data owned by a component. When state changes, React re-renders that component so the UI stays in sync.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Design Principle

Keep state as close as possible to the component that owns the behavior, and lift it only when multiple components truly need to coordinate around the same data.