UI Development

Unidirectional Data flow in React

 

What is Unidirectional Data Flow?

React is a library that allows developers to build reusable components and insist on one-way data flow. In general, this concept means that data has one, and only one, way to be transferred to other parts of the application. One way data flow is sometimes called Unidirectional Data flow or one-way binding. Unidirectional flow data can only be transferred by one way to the other parts of the application generally top to bottom components ( parent component to its nested child components) so a child should never update the data which is coming from its parent and it should be read-only. In React, the data stored in the parent component is called a state and the snapshot of such data which is passed to its children components via read-only is called a prop.

So if in our application the parent component has the state, then it passes down the information of the state to its child component using read-only props and then the child component communicates to the parent to update the state using callbacks which are bound in the child component in the form of actions or events.

Let us understand this with an example: 

In this React application, our data is stored in two major places (both parent components orange and green) here in these two components is where our state lives and component such as Component-A and Component-B are children components of parent here is where our snapshot or portion of the original state is passed, known as props.

So when the state is updated in the parent component by its own action or the action triggered in child component that is bounded to parent’s function for updating its state in both the cases whenever such a change occurs the whole state is updated and React gets aware the component state has been updated so it needs to pass newly updated props.

But this doesn’t affect any of the sibling components.

In simple terms whenever the state of parent (green) is updated the child also receives the updated props but it doesn’t affect parent (blue) even though both have the same parent React because data can flow in one direction parent => child => child.

Any change in parent: the green state will not re-render any component in orange and vice-versa as the state only flows in one way.

React is built using virtualDOM so whenever such changes in state occur all the child components are notified of the change. And virtualDOM is updated with new data which triggers changes and re-rendering of components painted on the page.

Here is a key thing to remember: In our react application data can never move up even though the state can live in different levels of application. And Child components can have their own state, for example, Component-A in our diagram might have its own state as well along with props received from the parent and if the state of Component-A gets updated it cannot trigger any changes in the parent component because of Unidirectional data flow and it can only be passed down to Nested Component. And it will not cause any re-rendering in parent only the component and it gets rendered with the updated data.

One of the major advantages of this feature of React is that it gives us a single source of truth and an immutable state (mostly) which makes debugging and fixing bugs easier for developers. Also doesn’t bring any new bugs by mistake while adding new features or scaling the application.

Till now we have understood how state work and how the state is shared with components i.e. passing state down as props to child components.

Now let’s see with another diagram how all this is interlinked in a unidirectional flow.

Here we have something called View, Actions and one familiar term State

  • View: Page/View where your react components and react application is painted (generally browser window)

  • Actions: View triggers actions, Actions contains relative information required for updating state to a newer state.
  • State: State holds the data for application, Updated state is passed to view and it’s child components as well.

Note: State is generally kept at a higher level component because of this reason only that updating state triggers changes to view and it’s child

Here are some reason why using Unidirectional data flow is really helpful while developing an application:

  1. Since the state is maintained at a single location it can be easily traced what actions are updating the data as the flow is one way only.
  2. You can control which components to re-render on a common state change. You put all those components under one common state containing the parent component.
  3. Easy to trace and fix bugs and errors caused by any bad code.

About The Author