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.

React useContext Hook

Comments

React

React useMemo Hook

More from this blog

Improve Laravel development experience

Add Calendly to Nextjs 13

DbGate - The Smartest SQL+noSQL Database Client

Add responsive video to Nextjs using Bootstrap5

How to create a middleware in Laravel?

Command Palette

Comments

React

React useMemo Hook

More from this blog