The useContext hook in React is used to access the current value of a React context. It allows a component to consume a value provided by a Context.Provider located higher up in the component tree, without passing props down manually.
Here are the general steps to use useContext:
1- Create a context: First, you need to create a context using the createContext() function.
// Create a contextimport React, { createContext } from 'react';
const MonContexte = createContext();
export default MonContexte;
2- Consume the value with useContext: In the child components of Context.Provider, use the useContext hook to access the context's value.
import React, { useContext } from 'react';import MonContexte from './MonContexte';
const ComposantConsommateur = () => { const valeurContexte = useContext(MonContexte);
return ( <div> <p>Valeur du contexte : {valeurContexte}</p> </div> );};
export default ComposantConsommateur;
3-Provide a value with Context.Provider: Use Context.Provider to wrap the part of your application where you want the context to be available. Provide a value to this context.
import React from 'react';import MonContexte from './MonContexte';import ComposantConsommateur from './ComposantConsommateur';
const MonComposantPrincipal = () => { const valeurFournie = 'Valeur fournie depuis le composant principal';
return ( <MonContexte.Provider value={valeurFournie}> <div> <h1>Composant Principal</h1> <ComposantConsommateur /> </div> </MonContexte.Provider> );};
export default MonComposantPrincipal;