Props Flow
Props pass read-only data from parent components down to child components in a strict unidirectional flow.
Mental Model
"The Waterfall: Water only flows downwards from the top mountain spring to the river valley below."
Interactive Engine Simulation
In React, data flows down like a waterfall. Children cannot change the data directly; they only receive and display what is passed to them.
Executable Code Snippet
1function Parent() {
2 const user = { name: "Subhajit" };
3
4 return (
5 <div className="p-4 border">
6 <h1 className="text-xl">Parent</h1>
7 {/* Passing data DOWN to child */}
8 <Child name={user.name} />
9 </div>
10 );
11}
12
13function Child(props) {
14 return <p>Hello, {props.name}!</p>;
15}- 01.Component re-renders are triggered by state or prop changes.
- 02.Reconciliation algorithm diffs the Virtual DOM to minimize actual DOM updates.
- 03.Automatic batching optimizes multiple state updates into a single render cycle.
01. Unidirectional Data Flow
In React, data travels in one direction: **downwards**. A parent component passes data to its children via 'props' (properties). This constraint makes the application predictable—if data changes, you know exactly which parent triggered the update.
The Props Contract
02. Immutability is Law
Props are **read-only**. A component should never attempt to modify its own props. If a child needs to "change" data, the parent must provide a function (a callback) to trigger a state change in the parent, which then flows back down as a new prop.
Architectural Pattern
"Think of props as **Arguments** to a function. Just as a function shouldn't change its arguments, a component shouldn't change its props. This allows React to use simple reference checks to decide if a re-render is needed."