Need of Context API or Similar State Management Tools

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 data through props.

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

The issue is that data gets passed through multiple levels that don't even require the data and are just acting as vessels. 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 increasing cumbersomeness in 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 overall performance.
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.
4. Prop drilling makes it harder to manage state and update components when changes occur deep within the component tree.

Prop Drilling is Inevitable

Every React Developer while moving from smaller-scale 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.

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

Context API 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.
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.
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.
6. Context API provides mechanisms for optimizing performance, such as lazy loading and memoization, reducing unnecessary re-renders.

How I Realized the Importance of Context API

I was building a project that had a food delivery system as a side functionality. I was fetching item details from objects displayed on an e-commerce card, and wanted to send those details to an order ticket component in the cart component. I started passing down the cart state and the setCart method as props among various components that didn't even require them.

Till this point, the various issues around prop drilling weren't bugging me. I also wanted to add a delete-from-cart functionality and built it using the same logic. This is where the user experience got terrible -- on clicking the delete button, the state was seemingly updating but it wasn't triggering a component re-render.

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.

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:

• 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.
• 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. However, this can sometimes lead to issues if the content of the props has changed without changing their references.