React useContext Hook

UseContext is a React hook that enables components to consume data from React contexts. Through context, data can be passed down the component tree without the need to pass props manually. UseContext simplifies the process of accessing shared data, allowing components to share state more easily.

Example

import React, { useContext } from 'react';

// Create a Context
const MyContext = React.createContext();

// Create a parent component that provides the Context value
const ParentComponent = () => {
  const data = 'Hello, useContext!';

  return (
    <MyContext.Provider value={data}>
      <MyComponent />
    </MyContext.Provider>
  );
};

// Create a component that consumes the Context
const MyComponent = () => {
  // Use the useContext hook to consume the Context
  const contextData = useContext(MyContext);

  return (
    <div>
      <h1>{contextData}</h1>
    </div>
  );
};

// Render the ParentComponent
ReactDOM.render(<ParentComponent />, document.getElementById('root')); 

The following example creates a context called MyContext using React.createContext(). As a next step, we create a parent component called ParentComponent that contains the value for the Context. As the value prop, we pass the data value to MyComponent inside the MyContext.Provider component.

Our next step is to use the useContext hook to create a component called MyComponent that consumes the Context. The value is retrieved from the Context and rendered in MyComponent.

In the last step, we render the ParentComponent component and propagate the value from the Context component to the MyComponent component.

Example 2

import React, { useContext } from 'react';

// Create a Context
const UserContext = React.createContext();

// Create a component that provides the context value
const UserProvider = ({ children }) => {
  const user = { name: 'John', email: 'john@example.com' };

  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
};

// A child component that consumes the context value
const UserInfo = () => {
  const user = useContext(UserContext);

  return (
    <div>
      <h2>User Information</h2>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
};

// App component that uses the UserProvider and UserInfo
const App = () => {
  return (
    <UserProvider>
      <div>
        <h1>My App</h1>
        <UserInfo />
      </div>
    </UserProvider>
  );
};

export default App; 

The first thing we need to do is create a UserContext using React.createContext(). As a next step, we create a UserProvider component that wraps the user data component in the component tree.

The context value is set to an object representing the user inside the UserProvider. Using this example, we have a simple user object with a name and an email address.

After creating the child component, we create UserInfo. From the UserContext, we can access the user data using the useContext hook.

Our final step is to render the UserProvider component as the top-level component in the App component, wrapping the UserInfo component. In this way, the UserInfo component is able to consume the user data provided by the UserProvider component.

Using the useContext hook, the UserInfo component accesses user data when the App component renders and displays the users name and email address.