Context API (React)

The Context API is a React structure that enables you to exchange unique details and assists in solving prop-drilling from all levels of your application. It is a React built-in feature, so we don’t have to worry about performance overhead and library installing issues.

The React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to "prop drilling" or moving props from grandparent to child to parent, and so on. When a project grows, data passing through props becomes more complicated, making the code more vulnerable and complex. Context is also regarded as an easier, lighter approach to state management using Redux.

Here are a few benefits of Context API that make it stand out:

1. The Context API helps share data between components which you can’t easily share with props, for example, complex data objects.
2. React Context API provides a way to send data like userid, auth, and theme data through the component tree without sending any props manually at every level.
3. We can also share specific states with multiple components instead through props manually. In some use cases, ideal for theming, localization, authentication etc.

CONTEXT API VS USECONTEXT

Context API
The Context API is the React feature used for solving props drilling problems. In Context API, we give data access to a component tree at the start to end level instead of using props.
useContext
The useContext is the React built-in hook, used in context API to consume the context state or object.

Context provides a way to share data between components without explicitly passing props at each level. By invoking the useContext function and passing the context object as an argument, we can access the context value within the component.

To use the useContext hook, we need to follow two main steps: creating a context and consuming it in the desired components.
We can create a context using the createContext function provided by React. This function returns an object with a Provider and a Consumer.

The createContext function optionally accepts a default value that will be used when no matching Provider is found in the component tree.

1. Provider: The Provider component is responsible for providing the context value to all the components that are descendants of it. It accepts a value prop, which can be any JavaScript value. This value will be made available to all the components that consume the context using the useContext hook.
2. Consumer: The Consumer component is an optional way to consume the context value in class components or functional components where hooks are not available. It provides a render prop pattern, where the consumer component receives a function as a child. This function takes the context value as an argument and returns the JSX to render.

Here's an example of how to create a context and use its Provider and Consumer components:

While the Consumer component is still available for backward compatibility and for use in class components, the useContext hook provides a more concise and direct approach to consuming context values within functional components.
Similarly, by using the useContext hook, we can directly access the context value without the need for a separate Consumer component:

With the useContext hook, we can simplify the code and make it more readable by directly accessing the context value within the functional component.

Overall, the createContext function in React enables us to create a context object that consists of a Provider and a Consumer. The Provider is responsible for providing the context value to its descendants, while the Consumer allows components to consume the context value using a render prop pattern. However, with the useContext hook, we can consume the context value directly within functional components, making the code more concise and easier to understand.