React Context api

What is Context API ?

Context API is used to pass global variables anywhere in the code without the prop drilling. It helps when there is a need for sharing state between a lot of nested components.

We need to createContext ,it has two properties Provider and Consumer.

The Provider acts as a parent it passes the state to its children and Consumer uses the state that has been passed.

Prop drilling

In prop drilling, when we pass props around from the parent component to other components that need it, no matter how deeply nested they are.

Working concept of React Context api

To begin using the Context API, you first need to create a context by calling the createContext() function.
This returns a context object that includes two essential components: the Provider, which supplies the data, and the Consumer, which allows components to access that data.
The Provider component is used to wrap the section of your component tree where you want the context to be accessible.
It requires a value prop, which holds the data you want to share. Anytime this value changes, all components using the context within that tree will automatically re-render to reflect the new data.
The Consumer component lets any nested component access the context value. It works by accepting a function as its child, and this function receives the current context value as an argument.
However, in modern React, the useContext hook is preferred because it makes the code cleaner, more readable, and easier to work with inside functional components.

Practical Examples for React Context api

import { createContext, useState } from 'react';

const CountContext = createContext({
 count: 0,
 setCount: () => {},
});

const CountProvider = ({ children }) => {
 const [count, setCount] = useState(0);

 return (
   <CountContext.Provider value={{ count, setCount }}>
     {children}
   </CountContext.Provider>
 );
};

export { CountContext, CountProvider };

How to Consume React Context in Components

import { CountProvider } from '@/context/countContext';

export default function RootLayout({
 children,
}: Readonly<{ children: React.ReactNode }>) {
 return (
   <html lang="en">
     <body className={inter.className}>
       {/* Wrap the CountProvider around the children */}
       <CountProvider>{children}</CountProvider>
     </body>
   </html>
 );
}

Now, every page and component within the Provider’s scope can access both the count state and the setCount function.

Now use in grand children component or any other component where you want to access setcount and count

'use client';

import { useContext } from 'react';
import { CountContext } from '@/context/CountContext';

const GrandChildComponent = () => {
 const { count, setCount } = useContext(CountContext);

 return (
   <div>
     <div className="text-center mt-3">
       <h2 className="text-3xl">Grandchild Component</h2>
       <small>Using the count state</small>
     </div>
     <div className="text-center">
       <h3 className="text-2xl">Count is: {count}</h3>
       <button
         onClick={() => setCount(count + 1)}
         className="bg-pink-600 p-2 rounded text-white"
       >
         Increase Count
       </button>
     </div>
   </div>
 );
};

export default GrandChildComponent;

Common Use Cases for the React Context API

For medium to large-scale applications, the Context API is great for managing global state—such as tracking cart items in an e-commerce app or handling the currently playing song in a music streaming app.
Authentication management is one of the most common use cases for the Context API.
By storing the current user and auth tokens in context, you can easily share authentication state across your entire app.
This allows any component to check if a user is logged in, handle login/logout actions, or conditionally render content based on the user’s status—all without prop drilling.
Theme Management is another widely used application of the Context API—especially for toggling between dark and light modes.
By storing the current theme state in a context, you can easily access or update it from any component in your app, without the need to pass props down the component tree.

Advantage of using context over React redux ?

In Redux we have to manipulate or update multiple files to add even a single feature but in Context API it can be done in much lesser lines of code.

One way data binding in React is maintained using Context whereas Redux violates it.

Multiple context can be created using Context whereas Redux creates just a single store.