03/01/2025REACT

Explication du hook useContext de React

📌

useContext est un “Redux simplifié” qui permet de passer des valeurs d’un parent à un enfant sans devoir passer x props.

Démonstration

Provider.js

export const Context = createContext();

const Provider = () => {
	const [color, setColor] = useState('red');

	return <Context.Provider value={{color, setColor}}>
		<Consumer/>
	</Context.Provider>
}

Consumer.js

import { Context } from 'Provider';

const Consumer = () => {
	const { color, setColor } = useContext(Context);
	setColor('blue');

	return <p>{color}</p>;
}

⚠️

Lors du changement de la valeur du context (ex: utiliser setColor mettra à jour color), tous les composants qui sont imbriqués dans le Provider du context seront re render.

Empêcher le re render de tous les enfants

memo (bof)

Pour empêcher le re render de tous les enfants du Provider, on peut utiliser memo sur les composants souhaités qui n’utilisent pas useContext.

⚠️

memo un composant parent ne va pas empêcher ses enfants de re render (uniquement dans cette situation de Context API)

Cependant, ce n’est pas forcément une bonne méthode puisque comme précisé ci-dessus, on va devoir memo chaque composant un par un.

children (oui)

Une autre méthode consiste à créer un composant tier qui va fournir le Provider, dans lequel on appelera children. Aucun enfant ne sera re render à part ceux qui utilisent useContext.

App.js

return <ContextProvider>
	<Child/>
</ContextProvider/>

ContextProvider.js

const ContextProvider = ({ children }) => {
    const [count, setCount] = useState(0);

    return <CountContext.Provider value={[count, setCount]}>
        {children}
	</CountContext.Provider>;
};