Use the useContext hook to share data between components. In React, it is common to have components that need to access the same data. One way to achieve this is by passing data down through props, but this can become cumbersome and lead to prop drilling. The useContext hook provides a cleaner way to share data between components without the need for prop drilling.

To use the useContext hook, first create a context object using the createContext function. This context object can then be passed to the useContext hook in any component that needs to access the shared data. The useContext hook returns the current value of the context object, which can be used in the component.

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

// Provide the context value at the top level of the component tree
function App() {
  const sharedData = "This data is shared";
  return (
    <MyContext.Provider value={sharedData}>
      <Component1 />
      <Component2 />
    </MyContext.Provider>
  );
}

// Use the shared data in a component
function Component1() {
  const sharedData = React.useContext(MyContext);
  return (
    <div>
      <p>{sharedData}</p>
    </div>
  );
}

In the example above, the MyContext object is created using the createContext function. The sharedData variable is then provided as the value of the MyContext.Provider component, which wraps the Component1 and Component2 components. In Component1, the useContext hook is used to access the sharedData variable from the MyContext object.