useContext

Why use useContext()?

This Hook only expects one parameter: a context type, which we create by calling React.createContext(). It will then return the value of the next highest context provider in the component hierarchy. We can call this Hook in the following way:

const myContextValue = useContext(MyContext);

The useContext() Hook acts as a context consumer component and causes a re-render of the function component as soon as the value of the context in the provider element changes.

Using this Hook is optional, and it is still possible to create context consumers in JSX using function components. However, the Hook is much more convenient and easier to read because no new hierarchical layer is created in the component tree.

Let’s look at an example: