Data Flow In React

As our project grows, the main thing we need to achieve is to pass data from one component to another for communication between components. React uses unidirectional data flow for passing the data between the components.
As the project grows, we need to pass data between the components, which can either be from parent to children, children to parents, or between siblings. To pass data from parent to children we need to use read-only props, to pass data from children to parent we need to use call back, and to pass data between siblings we need a combination of both.

What is unidirectional data flow?

When deciding the architecture of the React project, we decide to nest the child components in the Higher-Order parent component which will have an immutable state for our application. The parent component will pass down the required state in the form of read-only props and the children will use the call-back functions to update the state in the parent. Yeah, this feels like overhead, but this seems simple after understanding the concept of state and props in react.

The link below demonstrates the communication between the components using a simple example which has a form in one component and a list of data in other components, both the components have the relationship of siblings. Submitting the form updates the state of the sibling component too as all of these are maintained in the parent component.

Demo using plain react

Setting up communication between components

For creating a simple project without using any state management tool, we need to maintain the parent and child relationship between the components. We need to pass the components in a parent component, for this demo, we have the parent component as the Post component which consists of child components that are “PostForm” and “PostList”.

Parent component (Post)

import React, { Component } from 'react';
  export interface IState {
   ...
  }
export default class Posts extends Component <{}, IState> {
  ...
  render() {
  return (
  <>
   <div>
    <PostForm .../>
    <hr />
    <PostList.../>
   </div>
  </>
  )
 }
}

We will use props to pass data from the parent (Post) to any of the child components. And to pass data from the child component to the parent component we use callback(s) and states.

Passing data between components

Passing data in React uses the concept of props. Props are used to pass the data to the child component, which may consist of the state in the form of data or callback functions.

As shown below, our child component “PostForm” has 4 props which consist of snapshots of the state of the parent component and the callback functions for updating the state which simultaneously updates the data in related components.

We maintain the state in the parent component as we need our child components to know that the state is updated. If we would have maintained the states in each child component, then it wouldn’t be possible to update the UI of one component on the update of the sibling component’s state.
Take the example of our demo. We need to show the submitted details from the “PostForm” component to the “PostList” component as soon as the submit button is clicked. This won’t be possible if we wouldn’t have maintained the relationship between the components I.e. parent and child relationship.

...
export default class Posts extends Component<{}, IState> {
  constructor(props: any, state: IState) {
  super(props);
  this.state = {
    allPosts: [] as any[],
    editPost: {},
    isFormEditing: false
   }
  }
  createPost = (postData: any) => {
   ...
  }
  …
  render() {
   return (
    <>
    <div>
    <PostForm
     onCreatePost={this.createPost}
     formValues={this.state.editPost}
     isFormEditing={this.state.isFormEditing}
     updatePost={this.updatePost}
    />
    <hr />
    <PostList
     allPosts={this.state.allPosts}
     getPost={this.getPost}
    />
   </div>
   </>
  )
 }
}

Here the props that are passed to the child component are the snapshots of the “PostList” component’s state as well as callback functions. These callback functions will be called from the child component which will, in turn, call the method in the parent component.

Accessing the data

The data passed to child components will be received by them in the form of props. In the child component, we can call the method of the parent component. As shown, we call the onCreatePost() method of the parent component with the parameters to be passed. We can access the state of the parent component as we have used this.props.formValues in our child component which has the data from the parent component.

this.props.onCreatePost(post);
…
this.props.formValues;

Summary

I would suggest not to use the state management tool until and unless the state and callbacks in your lowest child component don’t confuse you that how the data is being passed and how the state is being managed.

On using the concept of state and props in react there would be no overhead to set up the state management tool(s) in the project. But what if the project grows complex? Then we need to think about state management tools for passing the data between components.