Use Context :

Context allows passing data through the component tree without passing props down manually at every level.
In React application, we passed data in a top-down approach via props.

Sometimes it is inconvenient for certain types of props that are required by many components in the React application.
Context provides a way to pass values between components without explicitly passing a prop through every level of the component tree.
When to use Context :
State should be held by the highest parent component in the stack that requires access to the state.
we have many nested components. The component at the top and bottom of the stack need access to the state.
To do this without Context, we will need to pass the state as "props" through each nested component.
This is called "prop drilling".
The solution is to create context.

How to use Context >

There are two main steps to use the React context into the React application:
Setup a context provider and define the data which you want to store.
Use a context consumer whenever you need the data from the store

- To create context, you must Import createContext and initialize it:

import { useState, createContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext()

Next we'll use the Context Provider to wrap the tree of components that need the state Context.