Unity of Direction: Why Data Flows Like a Waterfall?

In React, there is an ironclad architectural rule: data always moves only from top to bottom (from parent to child). This is called Unidirectional Data Flow.

1. Analogy: The Waterfall

Imagine data flow as a waterfall.

• You (the Parent) stand at the top and throw information (Props) into the water.
• Whoever stands below (the Child) catches this information and uses it.
• The water cannot naturally flow back up.

2. Props: Gifts from Parents

Props (Properties) are data that a parent passes to a child.

• Main Rule: A child has no right to change its props. They are " sacred " to the child, " Read-only. "
• If a parent needs to change data, they change it themselves, and the " fresh water " (updated props) automatically flows down to the children, updating their interface.

3. Why is This Better Than " Two-Way Binding " ?

In older technologies, data could flow any which way. If a child changed something on their end, it could secretly change data at the parent's end.

• Problem: When a site became large, it was impossible to understand which of the 100 components messed up the data. A " domino effect " and chaos would begin.
• In React: If there is an error on the screen, you simply go upstream. You know for sure that the data came from above.

4. What if a Child Needs to Tell the Parent Something?

Sometimes a child does need to pass information up (e.g., to report a button click). But how to do that if the flow is only one-way?

Solution: The Radio (Callback Functions)

1. The parent passes not just data to the child through props, but also a " radio " (a handler function).
2. The child " presses the button on the radio " (calls the function) and passes the message.
3. The parent catches the message and decides for themselves whether to change their data.

This approach makes your application as stable as a Swiss watch. You always control every drop of data in your system.