# 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 

![](https://cdn-images-1.medium.com/max/1600/1*PBgAz9U9SrkINPo-n5glgw.gif)

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.

![](https://1949368877-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgMQu802me2gEI8E8bY%2F-LhTzJ4INg_xnDg8TIsk%2F-LhU10tKkR46FfidEKsL%2Fkk1.jpeg?alt=media\&token=57f68ab7-2b40-4304-b55f-f7ff3b96a0d4)

**Props** are properties passed to a child component that can hold many [data types](https://facebook.github.io/react/docs/reusable-components.html#prop-validation) (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.

![](https://cdn-images-1.medium.com/max/1600/1*T_Q66EkNEhca6TyrvY1xBQ.gif)

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tkssharma.gitbook.io/react-training/day-01/react-js-3-principles/one-way-data-flow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.