React useContext Hook

useContext is a built-in React hook that allows you to consume values that are provided by a Context object. A Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Here is a basic example of how to use useContext in a React component:

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

export default function App() {

const MyContext = createContext();

function OuterComponent() {
  const [value, setValue] = useState('test');
  return (
    <MyContext.Provider value={value}>
      <h1>{`Hello ${value}!`}</h1>
      <InnerComponent />
    </MyContext.Provider>
  );
}

function InnerComponent() {
  return (
    <>
      <h1>Inner Component</h1>
      <NestedComponent />
    </>
  );
}

function NestedComponent() {
  const contextValue = useContext(MyContext);

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

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

In the example above, we create a Context object . Then, inside the NestedComponent function, we use the useContext hook to consume the value provided by the MyContext context. The contextValue variable now contains the value passed in by the nearest <MyContext.Provider> higher up in the component tree.

You can use the useContext hook to consume values from multiple contexts in the same component. Just call useContext with each context object you want to consume.

Raja Muhammad Asher

Raja Muhammad Asher

React useContext Hook