In this article we will learn about unidirectional data flow and also learn about how to use this unidirectional data flow to move data in React
What is Unidirectional Data Flow?
Unidirectional data flow is a technique that is mainly found in functional reactive programming. It is 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
Data flow in React
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.
Benefits of One-way data binding/Unidirectional Data Flow
- 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.
Effects of state change in React
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.