> For the complete documentation index, see [llms.txt](https://tkssharma.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tkssharma.gitbook.io/react-training/day-01/react-js-3-principles/one-way-data-flow.md).

# 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.

![](/files/-LhU10tKkR46FfidEKsL)

**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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.