useContext

useContext is a React Hook that allows components to consume values from a Context without having to pass props down through every level of the component tree. It provides a way to share data between components without the need to use prop drilling or the higher-order component pattern.

To use useContext, you first need to create a Context object using the createContext method. This object can then be passed down to child components as a prop or used in conjunction with the useContext hook to access the Context's value.

Here's an example of how to use useContext:

import React, { useContext } from 'react';

const MyContext = React.createContext({});

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

  return (
    <div>
      <h1>Hello, {contextValue.name}!</h1>
    </div>
  );
}

function App() {
  const contextValue = { name: 'World' };

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

export default App;

In this example, we first create a Context object called MyContext using the createContext method. We then define a component called MyComponent that uses the useContext hook to consume the value from MyContext. Finally, we create an App component that wraps MyComponent in a MyContext.Provider component and passes in a value object with a name property of 'World'.

When MyComponent is rendered, it will display the text "Hello, World!" because it has access to the value of MyContext through the useContext hook.

Overall, useContext is a powerful tool that simplifies the process of sharing data between components in a React application.