How to use react useContext hook?

React useContext hook is a powerful tool that allows you to easily manage and share state across your application. In this blog post, we’ll take a look at how to use the useContext hook in your React projects.

First, let’s start by understanding what the useContext hook is. The useContext hook allows you to easily share data between different components in your application without having to pass props down through multiple levels of components. This can be especially useful when you have a large application with many nested components, as it allows you to keep your component tree more shallow and easy to understand.

To use the useContext hook, you’ll first need to create a context object using the React.createContext function. This function takes an initial value as an argument, which can be any type of data that you want to share between components. For example, you might create a context object to share a user’s authentication status across your application.

Once you have your context object, you can use the useContext hook to access the data in your context object. The useContext hook takes the context object as its first argument, and returns the current value of the context.

import { useContext } from 'react';
const MyContext = React.createContext('initial value');

function MyComponent() {
  const value = useContext(MyContext);
  return <div>The value is {value}</div>;
}

In addition to reading the value, you can also use the useContext hook to update the value of the context. To do this, you can pass a set function as the second argument to the useContext hook. This function can be used to update the value of the context, which will then be passed down to all of the components that are using the useContext hook.

import { useContext } from 'react';
const MyContext = React.createContext({
  value: 'initial value',
  set: () => {}
});

function MyComponent() {
  const { value, set } = useContext(MyContext);
  return (
    <div>
      The value is {value}.
      <button onClick={() => set('new value')}>Change value</button>
    </div>
  );
}

It’s also worth noting that useContext hook only update the component which are in the component tree, if the context value is updated and not the component which are already unmounted.

In summary, the react useContext hook is a powerful tool that allows you to easily share state across your application. By creating a context object and using the useContext hook, you can keep your component tree more shallow and easy to understand, while still having access to the data that you need in order to build your application.