React useContext Hook: Sharing Data Between Components

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.