Context API is a react structure enabling us to exchange information across all levels of a react application, think of it as a centralized state or data store that components can access without having to explicitly pass the data through props.

This helps us solve the problems that arise with Prop Drilling, one might think as to what the problem is with prop drilling, see to understand prop drilling one must know what is a prop. Prop is the fundamental way to pass data items from a parent component in React’s Virtual DOM to its children components.

The issue with this is data gets passed on multiple levels that don’t even require the data and are just acting as vessels for the data to pass through, as a React application grows in size, the problem with prop drilling becomes even larger.

Fundamental problems with prop drilling

1. Prop drilling contributes to the increasing cumbersomeness of maintaining and understanding code.
2. It generates so many references to the original data, contributing to unnecessary re-rendering of components based on state change affecting the overall performance of the application.
3. Passing down state as props across multiple components can lead to issues where changes to the props don’t automatically trigger re-renders in child components if the props themselves are not directly modified. In such cases, components might not reflect the updated state as expected contributing to a terrible user experience.
4. Prop drilling occurs when you pass props down through multiple layers of components, which can make it harder to manage state and update components when changes occur deep within the component tree.

Prop Drilling is inevitable

Press enter or click to view image in full size

Every React Developer while moving from smaller-scale applications to larger-scale applications will encounter problems with prop drilling, it isn’t something avoidable, to tackle the problem we have to understand what the fundamental problems are with prop drilling.

That is why one must study what props are, what state is and what are the problems that arise due to Prop Drilling before jumping on to study State management tools like Context API or libraries like Redux, MobX, Zustand, etc.

Context API

Now that we understand why we need state management tools to mitigate the issues that arise with the practice described above, I would like to share how Context API helps us to achieve the same.

Context API as described above is a state management tool enabling us to exchange data across all levels of a React application’s component tree, it can be considered as a centralized state or data store that can be accessed by components without having to pass down props in the component hierarchy.

Benefits of Context API

1. Context allows you to create a centralized store of data that can be accessed by any component in the component tree without having to pass props down manually through each level of the tree.
2. Context eliminates the need for prop drilling by providing a way to pass data directly to components that need it, regardless of their position in the component tree.
3. Context simplifies component composition by allowing you to separate concerns and create more modular, reusable components. Components can focus on rendering UI elements while context providers handle the data management logic.
4. With Context, you can separate the concerns of data management from the presentation layer of your components. This promotes better code organization and makes it easier to maintain and debug your application.
5. Context can scale to accommodate large and complex applications by providing a flexible and efficient way to manage state. You can create multiple context providers to manage different parts of your application state, and components can subscribe to multiple contexts as needed.
6. Context API provides mechanisms for optimizing performance, such as lazy loading and memoization. This can help improve the performance of your application by reducing unnecessary re-renders and optimizing the rendering process.

Press enter or click to view image in full sizeAn image by TopTal describing Context API in simplest terms

How did I realize the importance of Context API?

I was building a project that had a food delivery system as a side functionality, where I was fetching the item details from objects displayed on an e-commerce card, on a separate tab and wanted to send the details of the item present on that card to be displayed on an order ticket component I built in the cart component. I started passing down the cart state and the setCart method built to change the cart state as props among the various components that didn’t even require it just for it to reach the endpoints I wanted the cart state to be. Till this point, the various issues around prop drilling weren’t bugging me, I also wanted to add a delete-from-cart functionality and I built it using the same logic I had while building the initial functionality. This is where the user experience got terrible as on clicking the delete button, the state was seemingly updating but it wasn’t triggering a component re-render, this is because the initial state I set was an array, and because of the state being passed down the hierarchy across so many needless levels.

I will explain what was happening: When you pass down props to child components, React performs a shallow comparison of the props to determine if the component needs to be re-rendered. If the props haven’t changed in terms of their reference, even if the data they contain has changed, React might not trigger a re-render. In my case, I was passing the state down as a prop to deeply nested components and only mutating the state without changing its reference (by modifying an array directly), React might not detect the change and therefore not re-render the components.

This all happened because of 2 things:-

1. Passing down props to deeply nested components of the application (i.e, prop drilling)
2. React’s shallow compare property

A brief overview of Shallow Comparison in ReactJS

Shallow comparison, also known as shallow equality comparison, is a technique used in React to determine whether two objects or arrays are equal by comparing their references or top-level properties.

In shallow comparison:

1. For objects: If two object references are the same, they are considered equal. React does not perform a deep comparison of the object’s properties.
2. For arrays: If two array references are the same, they are considered equal. React does not compare the individual elements of the arrays.

This means that if you have two objects or arrays with the same content but different references, React will consider them unequal when performing a shallow comparison.

Shallow comparison is often used by React to optimize rendering performance. When passing props to a component, React checks if the props have changed by comparing their references. If the references are the same, React assumes that the props have not changed and avoids unnecessary re-renders of the component. However, this can sometimes lead to issues if the content of the props has changed without changing their references.