Unidirectional data flow is a technique that is mainly found in functional reactive programming. It is also known as one-way data flow, which means the data has one, and only one way to be transferred to other parts of the application. In essence, this means child components are not able to update the data that is coming from the parent component. In React, data coming from a parent is called props. Angular makes use of bi-directional binding in which the data flow takes place in both directions. React doesn’t support bi-directional binding to make sure you are following a clean data flow architecture. The major benefit of this approach is that data flows throughout your app in a single direction, giving you better control over it.
In terms of React it means:
- state is passed to the view and to child components
- actions are triggered by the view
- actions can update the state
- the state change is passed to the view and to child components
Note: The view is a result of the application state. State changes when actions happen. When actions happen, the state is updated.
One-way data binding provides us with some key advantages. Like:
- Easier to debug, as we know what data is coming from where.
- Less prone to errors, as we have more control over our data.
- More efficient, as the library knows what the boundaries are of each part of the system.
In React, a state is always owned by one component. Any changes made by this state can only affect the components below it, i.e its children. Changing state on a component will never affect its parent or its siblings, only the children will be affected. This is the main reason that the state is often moved up in the component tree so that it can be shared between the components that need to access it.
- CSS | flex-flow Property
- CSS | grid-auto-flow Property
- PHP | Data Types
- HTML | <data> Tag
- PHP | Serializing Data
- Encrypting Data in NodeJS
- HTML | data Attribute
- Data types in TypeScript
- What is the difference between ng-if and data-ng-if directives ?
- HTML | data-* Attributes
- D3.JS (Data Driven Documents)
- How to select elements by data attribute using CSS?
- jQuery | event.data Property
- HTML | DOM Object data Property
- HTML | <object> data Attribute
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.