React Context

4 min readSep 3, 2022

Dear Guys: The React Context API will be discussed today. One of React’s finest features is the React Context API.
You should continue reading if you’re interested because it’s going to be a terrific one.

React’s Context allows passing data through the component tree without having to pass props down manually at every level.

A React app can create global variables that can be passed around by using the React Context API.

Context is also promoted as a simpler, lighter method of Redux state management.

Context API is a (kind of) new feature that React 16.3 implemented that makes it simple and easy to exchange state throughout the entire project.

First, let me show you what is the problem,

There are numerous nested components. The stack’s top and bottom components both require access to the state. In other words, we have many nested components. The component at the top and bottom of the stack need access to the state.

When we need data for the child component from the parent component then data comes through all parents to the child node.

Before React 16.3 version, we need to pass data Between a parent component and a child component so, this process is called props drilling.

On our app, props are the data that we pass or can access from any number of child components down from the top-level components.

Without Context, we will need to pass the state as “props” through each nested component. This is called “prop drilling”.

In the above Diagram, Data is passed from the root App component to the last child component to access the data and between this approach, the data is passed from every parent to the child components.

Solution -

Context API -

A React app can create global variables that can be passed around by using the React Context API.
React Context is a way to manage a state globally.

React context API: How does it work?

You only require React.createContext(). Both a customer and a provider are returned. The component known as the provider, as its name implies, gives the state to its offspring.

All the components that would require that “store” will have it as their parent and it will hold the “store.” A component that utilizes and consumes the state is known as a consumer.

The Official documentation page for React has more details.

How to use Context API?

we are using functional components. so we have to use the useContext hook to implement context API.

Create Context -

To create context, you must Import createContext and initialize it:

import { useState, createContext } from "react";
import ReactDOM from "react-dom/client";

const UserContext = createContext()

Now next we’ll use the Context Provider to wrap the tree of components that need the state Context.

Context Provider -

Wrap all the child components inside the Context Provider and supply the state value.

function App() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Child1 user={user} />
    </UserContext.Provider>
  );
}

Now, all components in this tree will have access to the user Context.

`useContext -`

We must gain access to the Context using the useContext Hook in order to use it in a child component.

First, remember to add the useContext import statement:

import { useState, useContext } from "react";

Then, you can access the user Context in all components:

function Child8() {
  const user = useContext(UserContext);

  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

Complete Example -

import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";

const UserContext = createContext();

function Child1() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Child2 />
    </UserContext.Provider>
  );
}

function Child2() {
  return (
    <>
      <h1>Child 2</h1>
      <Child3 />
    </>
  );
}

function Child3() {
  return (
    <>
      <h1>Child 3</h1>
      <Child4 />
    </>
  );
}

function Child4() {
  return (
    <>
      <h1>Child 4</h1>
      <Child5 />
    </>
  );
}

function Child5() {
  const user = useContext(UserContext);

  return (
    <>
      <h1>Child 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Child1 />);

We have some alternative and simple tools for managing the data -

Thanks for reading !!
Please follow me for more story !!