What are Provider and Consumer in the Context API ?

Context API is a term that is created to pass as a global variable and can be accessed anywhere in the code. It is another way to pass props from child to parent i.e. known as “prop drilling“. It has two main components “The Context Provider ” and “The Context Consumer“.

The Context Provider:

The Provider is a component provided by React that allows its child components to subscribe to a certain context. It accepts a value prop which is the data that will be shared with all components that are consumers of that context.

Typically, you wrap the top-level component of your application with a Provider component, thus making the context available to all its descendants.

Javascript

// Context creation
const MyContext = React.createContext();

// Top-level Provider
const App = () => {
    return (
        <MyContext.Provider value={"Hello"}>
            <ChildComponent />
        </MyContext.Provider>
    );
};

The Context Consumer:

The Consumer is a component that allows components to subscribe to a context. It lets you access the context value and use it within your component’s render function.

Consumers can be nested within each other to access multiple contexts if needed.

Javascript

// Consuming context
const ChildComponent = () => {
    return (
        <MyContext.Consumer>
            {value => <div>{value}</div>}
        </MyContext.Consumer>
    );
};

How to create context API ?

Step 1: First, you need to create a context object using the createContext function from the ‘react’ library. This context object will hold the data that you want to share across your application.

Javascript

import { createContext } from 'react';

export const MyContext = createContext("");

Step 2: Once you’ve created a context object, you need to wrap the components that need access to the shared data with a Provider component. The Provider component accepts a “value” prop that holds the shared data, and any component that is a child of the Provider component can access that shared data.

Javascript

// Create a parent component that wraps child components with a Provider

import { useState, React } from "react";
import { MyContext } from "./MyContext";
import MyComponent from "./MyComponent";

function App() {
    const [text, setText] = useState("");

    return (
        <div>
            <MyContext.Provider value={{ text, setText }}>
                <MyComponent />
            </MyContext.Provider>
        </div>
    );
}

export default App;

Step 3: Now that we’ve created the provider component, we need to consume the context in other components. To do this, we use the “useContext” hook from React.

Javascript

import { useContext } from 'react';
import { MyContext } from './MyContext';

function MyComponent() {
    const { text, setText } = useContext(MyContext);

    return (
        <div>
            <h1>{text}</h1>
            <button onClick={() =>
                setText('Hello, world!')}>
                Click me
            </button>
        </div>
    );
}

export default MyComponent;

Conclusion:

Providers and Consumers are fundamental elements of the Context API in React. Providers wrap the portion of the component tree where the context is available, passing down the data through the value prop. Consumers, on the other hand, subscribe to this context, accessing the provided data and reacting to changes within it. Together, Providers and Consumers facilitate the management of global state and make it easier to share data between components in a React application, ultimately improving code maintainability and reducing prop drilling.