One Way Data Flow

They are multiple programming patterns of structuring your react application when managing state. One-way-data-flow ←- redux, and unidirectional way ← parent to child.

One way Data flow - Parent Child

There are two different pattern of data flow in react application first one is Parent child and another is using Redux or some stage management library

In React JS, data flows in one direction, from Parent to Child. This helps components to be simple and predictable.

“Simplicity is the ultimate sophistication.” -Leonardo da Vinci

Consider React components as simple functions that receive props and state and return HTML. When child components receive props from their parents, they either apply modifications (render) or pass it to another child that may use it.

Props are properties passed to a child component that can hold many data types (e.g. array, object, number, function, others). Considering React components looks like HTML tags, props are the attributes of the HTML element. On the following example,Square is the component, size, className and onClick are the props.

Problems with this pattern? (You can skip this section for later)

This can be very complicated for simple applications. Can be something very hard to follow when trying DRY(don’t repeat yourself) coding principles or separation of concerns. State can go through multiple components without ever being in use. Can be very hard to be track of.

Purpose of this being learned in the first place?

Learning how props can be passed down from parent components to child components is important to understand because when running into issues to redux. To understand what your are doing. How state is managed in unidirectional way is important when learning how to manipulate it.(typing into a text-field for example.)

Redux solves these problem.

Unlike managing state in a unidirectional way, you can handle the state all in one place if wanted(not recommended.). The way redux is works, is that it manages state in the store, and manipulate state via the reducer which is nothing but a simple function. That takes the state of app, and action. And manipulates it.

This Page is just talking about Parent child data flow in one direction, Redux part can be seen in further sessions.