How does React handle data flow between components?

React is a JavaScript library that programmers at Meta developed for designing web applications' user interfaces by breaking down web pages into several components.

Data flow in React

React uses a unidirectional data flow approach when sending data between components.

This means that data can flow in only one direction when it is being transferred to different components in the React application.

Note: Altering the shared data in any component reflects the changes in all components that have access to the shared data.

Data flow approaches

Now that we have understood React's data flow, we will look at the different ways to send data between the components mentioned below.

• Send data from the parentComponents that render other components inside them are called parent components. component to the childA component that is being rendered by a parent component is called the child to that component. component.

• Send data from the child component to the parent component.

• Send data between siblingComponents called/rendered by the same parent component. components.

Let's discuss these approaches in detail.

Send data from parent to child

To send data from a parent component to a child component, we use props.

The parent component will call the child component and send the variable/data to the child component. The child component can access the data sent by accessing the prop through which it was sent.

Send data from child to parent

Now that we have looked at how to pass data from the parent to the child component, we will try to reverse the process.

We must use callback functions to pass data from a child to a parent component as the child component can not directly modify the data sent due to Reacts unidirectional dataflow model. The callback function would be sent to the child component via props.

Send data between siblings

We can also share data between sibling components. As seen previously, we can use props to send data to the sibling component. If we want to update the data, we can send a callback function using props.

When an update is performed on the data via the callback function, the changes are reflected in all other sibling components that share the data.

React application

Below we can see a React application that shows all the different data flow approaches mentioned above.

The file App.js shows the parent component, Child.js shows the child component, and Sibling.js shows the Child component's sibling component.

When we run the application, we see all three components rendered on the web page. We also see that the child and sibling components share the same data.

When we click the button in the child component to update the variable, we see the changes reflected in all components with access to the variable.

Code explanation

Now, let's look at the explanation for the code in the individual files and what each file represents.

The App.js file

In the App.js file, we can see how we can pass data to the child components from the parent component with the help of props. Below is the code explanation for the App.js file.

• Line 2: We import the Child component.

• Line 3: We import the Sibling component.

• Line 6: We define a useState hook with its initial value as Initial data.

• Line 11: We display the data variable in the parent component.

• Line 12: We pass the state variable data and its update function setData to the Child component and render it.

• Line 13: We pass the state variable data to the Sibling component and render it.

The Child.js file

In the Child.js file, we see that we can update the data that the child received by using the callback function sent to it via props. Below, we can see the code explanation for the Child.js file.

• Line 7: We display the data variable the child component received from the parent component.

• Line 8: We create a button and bind it to the setData function it received from the component to update the received data.

The Sibling.js file

In the Sibling.js file, we print the data shared between the child and its sibling, and the child can update the data in the sibling component via a callback function provided to the child. Below, we can see a brief explanation of the code in the Sibling.js file.

• Line 7: Display the shared variable called data that the component received via props.

Conclusion

React uses unidirectional data flow to manage data between nested components. We can send data to the child component from the parent component using props, but the child component can not directly modify the data. To make the data modifiable in the child component, we must pass an additional callback function that updates the shared data.