Props are inputs passed into a component by its parent (read-only from the child's view). State is data a component owns and manages internally (it can change it). The distinction: props come from outside and don't change within the component; state is internal and mutable.
() {
;
}
< name= />
Props flow down from parent to child. The child reads them but cannot change them — to change a prop's value, the parent must pass a new one.
function Counter() {
const [count, setCount] = useState(0); // `count` is this component's own state
return <button onClick={() => setCount(count + 1)}>{count}</button>;
// the component updates its OWN state via setCount
}
State is created and controlled inside the component; the component changes it (via setCount/setState), and changing it triggers a re-render.
Props State
Source passed from parent created in the component
Mutable? read-only (in child) yes (via setter)
Who controls it the parent the component itself
Triggers render when the parent changes it when the component updates it
Purpose configure/pass data in track changing internal data
function Parent() {
const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent
return <Child name={user.name} />; // passed DOWN as a PROP
}
One component's state is often passed to a child as a prop. Lifting state up and passing it down is exactly this pattern — the parent owns the state, children receive it as props.
The state-vs-props distinction is fundamental to component-based frameworks.
It defines data ownership and flow: props are external, read-only configuration (data down); state is internal, mutable data the component manages.
Confusing them — mutating props, or duplicating props into state — causes classic bugs.
Understanding that data flows down as props while each component owns its own state is the bedrock of React/Vue/Angular component design.