Props
Props are the inputs a parent component passes to a child. A child reads them to decide what to render, but does not directly mutate them.
▶Architecture Diagram
📊 Data FlowDashed line animations indicate the flow direction of data or requests
Breaking UI into components is not enough unless those pieces can receive the values they need. But if children freely mutate parent data, it becomes difficult to trace where values changed and why the screen updated.
React strongly favored one-way data flow because systems with many places mutating the same value are hard to debug. The default model became simple: parents pass current values down, and children render from those inputs.
When a parent renders a child in JSX and provides attributes, React bundles those attributes into a props object and gives it to the child component. If the parent value changes later, the child receives new props and renders again from the new input.
A parent passes values down and a child renders from that input
function ProfileCard({ name, role }: { name: string; role: string }) {
return (
<section>
<h2>{name}</h2>
<p>{role}</p>
</section>
);
}
export function TeamPage() {
return <ProfileCard name="June" role="Frontend Engineer" />;
}Props are parent-owned inputs. The child reads them and renders accordingly.
You can pass callbacks through props as well as plain values
function SaveButton({ onSave }: { onSave: () => void }) {
return <button onClick={onSave}>Save</button>;
}
export function Editor() {
function handleSave() {
console.log("Saving");
}
return <SaveButton onSave={handleSave} />;
}Children do not need to own the parent logic. They can invoke behavior passed down through props.
Props and state both influence rendering, but they answer different questions. Props come from outside the component. State belongs to the component. When the same value must travel through many layers manually, the pressure is less about props being wrong and more about needing Context.
Commonly Compared Concepts
State
The current value a component remembers across renders
Props are external inputs owned by a parent, while state is internal data owned by the component itself.
Context
A shared delivery channel for values needed deep in a component tree
Props move values explicitly step by step, while Context lets deep descendants read shared values directly. Transparency versus convenience is the tradeoff.
In practice, props should be treated like a component's public API. If boolean flags and ad hoc shapes start piling up, it is often a signal that the component boundary is doing too much or that data ownership needs to be reconsidered.