React State Management Solutions for Prop Drilling

While building React application developers are often required to pass the data/state from the top-level component to the deeply nested components and it is done using props. However, if we have multiple numbers of intermediate components then every child must accept the data and pass it to its child component which ultimately leads to the terrible issue called prop drilling. 

To solve this issue, React provides multiple state management solutions that allow you to pass the data through the component tree without having to manually pass props down, every time you need to update the state. 

In this post, we will explore more about the prop drilling issue in React, and the different state management solutions for handling it in the React applications. 

So let's get started!

‍

What is prop drilling and is there any state management solution?

Let's take a simple scenario in the eCommerce web application. A top-level component in the app wants to access the state of the shopping cart on the button click event. Here we want to update the state by changing the button color from pink to gray when the user clicks the “Add to Cart”  button.

‍

Code implementation for the above scenario:

1     import React from "react";
2     
3    export default class App extends React.Component{
4     constructor() {
5       super()
6       this.state = {
7         buttonColor: "#FF69B4"
8       }
9       this.changeColor = this.changeColor.bind(this)
10     }
11     
12     changeColor() {
13       this.setState({ buttonColor: "grey" })
14     }
15     
16     render() {
17       return (
18        

‍

Code Explanation: 

In the code above you can see that the state of the shopping cart is set  and the method changeColor is defined to change the state.  Next in the code, we passed the props buttonColor and changeColor to the ProductCard component. 

ProductCard component passes the props to the Button component which then passes it to the onClick event in the next level down the tree. 

Finally, the event is triggered when the button is clicked, it sets the state of the button from pink to gray color by changing the background color attribute as shown below.

‍

Output:

‍

So what have you observed in the above example? 

To change the state of the component down in the tree you need to pass the state/data manually through all the intermediate levels that actually don't require it. This makes the code lengthy and difficult to maintain. 

Additionally, there are more chances of errors such as

1.  Accidentally renaming the props halfway. 
2. Refactor the shape of some data.
3. Over-forwarding of props than necessary.
4. Under forwarding of props and/or abusing default props.

And there are various other situations where prop drilling can bring real frustration in the maintenance and refactoring process; it may grow much more complex in large-scale projects. 

‍

React State management solution for prop drilling?

To solve the problem of prop drilling there are three solutions:

1. React Context API: An API that enables sharing of global data /state with the components in the app on different levels. 
2. Redux: The library offers state management for React applications.
3. Component Composition: A simple technique that helps you to avoid passing props through many levels. 

In the next section, we will find out when to use the React Context API, Redux, and Component composition. 

‍

React Context API and when to use it?

React Context API provides a way to share data/states between the components without explicitly passing the prop through every layer down the tree. Context is designed to share data or state that is considered global for the tree of react components. Context lets you “broadcast” such data and updates it to all the components in the tree. 

However, using context makes component reuse more difficult. Therefore Context should only be used when some data needs to be accessed by multiple components at different nesting levels. 

In the above example, there is no deep nesting of components and the data needs to be accessed by only one component. So, let's check the other alternatives for state management.

‍

Redux Library

Redux is the lightweight, predictable state container for JavaScript that lets developers write apps that behave consistently and support different environments i.e client, server, and native. Apps built using Redux are easy to write, understand, and test.

The library works best for both static and dynamic data in the React application and is easily extensible. However, as an external library using Redux in the app requires additional installation which may increase the final bundle size. Also, it requires extensive setup to integrate it into the app. 

Overall, using Redux for small applications isn’t a good idea. It should be used when you want to handle lots of dynamic data in a large application. 

‍

Component Composition: 

In React, components can be made more generic by accepting props. The techniques let you pass components as props to other components and thus create components with other components. It is also helpful in reducing the number of re-renders in the application. 

According to the React docs the “Component Composition” is the simplest solution for prop drilling in small applications. It does not affect component reuse and is more efficient compared to the other two solutions for prop drilling in simple React applications.

‍

‍Wrapping Up:

In the article, we have learned what is prop drilling issue in React applications and which are the different ways ( i.e using Context API, Redux, and Component Composition) we can avoid passing props through the different levels in the tree on the state change. We have also learned when to use those solutions in the React.js app.

Well, if you are a web app developer and want to simplify React.js web application development then try using DhiWise. The platform accelerates development 5x faster by eliminating repetitive tasks with its unique features.

‍

Some of the key features of DhiWise web app builder are:

1. Figma to code conversion
2. UI customization support 
3.  Integration with multiple developer tools like GitHub, GitLab, Storybook, and Vercel.
4. Complete code ownership  
5. Ready to use app templates 
6. Support for team development, sharing, and collaboration
7. And so on

Know more about the amazing platform and the supported technologies. Sign up now to quickly start your development.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.