Gestion de contextes

Problématique

L'un des principaux enjeux dans le développement d'une application React, est la synchronisation des états des composants / sous-composants individuels, partout où c'est nécessaire.

On choisit en général de remonter l'état de référence au niveau du composant "root". Dès lors, chaque composant en appelant un autre doit lui passer toutes les propriétés dont lui ou ses descendants auront besoin, ce qui peut devenir assez lourd. Ce phénomène est surnommé "property drilling" en anglais.

Plusieurs outils de gestion des états ont été proposés, notamment Flux et Redux. Ces outils introduisent une certaine lourdeur dans le code source, avec une part importante de redondance, c'est pourquoi aujourd'hui on ne les utilise plus que que pour des applications de très grande taille.

La notion de contextes React est une façon plus légère d'aborder le problème.

Utilisation des contextes React

On a besoin de mettre en place 3 éléments :

• Créer un objet contexte
• Définir un provider (source des données)
• Accéder à la valeur du contexte (consumer) depuis un composant arbitraire

Note : il est parfaitement possible de définir plusieurs contextes au sein d'une même application.

Création d'un objet contexte

Modifier le fichier du composant racine, ou créer un fichier appcontext.js :

import { createContext } from 'react';

const AppContext = createContext();
export default AppContext;

Définition d'un provider

"Emballer" l'application React dans un bloc provider. Typiquement, on le fait dans le composant racine de l'application.

import { useState } from 'react';
import AppContext from './appcontext';


export default function MyApp () {

  // Variables d'état à partager via le contexte
  const [user, setUser] = useState();      // données de l'utilisateur authentifié
  const [token, setToken] = useState('');  // token d'authentification
  const [locale, setLocale] = useState('fr');  // langue de l'application

  return (
    <AppContext.Provider value={{ user, setUser, token, setToken, locale, setLocale }}>
      // Application
    </AppContext.Provider>
  )
}

Accès au contexte depuis un composant quelconque

Un composant peut accéder au contexte à l'aide du hook useContext :

import { useContext } from 'react';
import AppContext from './appcontext';


function MyComponent () {

  const { user, locale } = useContext(AppContext);  // Chargement des données pertinentes depuis le contexte

  return <>
    <h1>{`Hello ${user}!`}</h1>
    <h2>Langue : {locale}</h2>
  </>;
}