Open In App

ReactJS Unidirectional Data Flow

Improve
Improve
Like Article
Like
Save
Share
Report

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.


Last Updated : 08 Sep, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads