What is context API? why we should use it? How to use it in react?

Context API: The Context API is a React structure that allows passing data from one component to another component without prop drilling.

Why we should use it?

Well, before we know why context should be used, we need to know what is a component and what is props drilling.

Component: When our application becomes too large, it becomes very difficult to manage that application. To make the application easier to manage, we break it down into smaller sections, that is called components. Reusability is one of the biggest features of creating components.

Prop drilling: Reacts data flow system is unidirectional. When we need to pass data from one component to another component of a tree need to use the prop drilling process. In this process, props are passed from one component to another component that does not need the data but only helps in passing it through the tree. It’s called prop drilling.

Why we should avoid prop drilling?

React is a very popular JavaScript library. The reason is that it is easy to implement and its great performance in a single-page application. But one of the biggest obstacles developers face when working with the library is components re-rendering excessively, which slows down the application performance. And component re-rendering is especially damaging when developers need components to communicate with each other in a process known as prop drilling.
That is why we should avoid prop drilling, And the context API will help us to get rid of this problem.

How to use it in react?

First of all, in our application, we need to import a createContext() function from react, and create a context. Then export it, So that it can be used by other components. And through a provider, we will pass in all the data as value.

Then we will use all other components as childrenof this context so that every component can use the data.

import React, { createContext } from "react";
import useFirebase from "../../hooks/useFirebase";
export const AuthContext = createContext();
const AuthProvider = ({ children }) => {
  const allContexts = useFirebase();
  return (
    <AuthContext.Provider value={allContexts}>
      {children}
    </AuthContext.Provider>
  );
};
export default AuthProvider;

Now we will create another file and use the import useContext() function from react, and pass into the context data and returnit, so we can be used it by other components.

import { useContext } from "react";
import { AuthContext } from "../contexts/AuthProvider/AuthProvider";
const useAuth = () => {
  const auth = useContext(AuthContext);
  return auth;
};
export default useAuth;

And finally Wrapping all children by the AuthProvider.

function App() {
  return (
    <AuthProvider>
      <Booking />
      <Dashboard />
    </AuthProvider>
  );
}
export default App;

Now we can use all the data from any component without prop drilling.