Dans cet article, nous verrons comment se débarrasser de React.Context dans vos applications et trouverons une motivation pour le faire.

Vous connaissez probablement React et avez peut-être déjà eu de l'expérience avec React.Context si vous êtes tombé sur cet article, mais sinon, n'hésitez pas à le lire quand même et à le partager avec les personnes qui pourraient être intéressées.

1. Pourquoi éviter React.Context ?

Le contexte dégrade la lisibilité, enchevêtre et restreint l'application.

Jetez simplement un œil à cet exemple de base :

Cela n'a pas l'air trop compréhensible et fiable, n'est-ce pas ?

Voici quelques problèmes potentiels lors de l'utilisation de contextes :

1. Plus vous utilisez de contextes, moins votre application devient lisible et contrôlable ;
2. Parfois, les contextes imbriqués nécessitent un ordre correct pour fonctionner, ce qui rend votre application difficile à maintenir ;
3. Certains contextes doivent être réutilisés lors de la configuration d'un environnement de test pour continuer à fonctionner correctement ;
4. Vous devez vous assurer que le composant est un enfant dans l'arborescence d'un fournisseur de contexte nécessaire.

Anecdote : la fameuse "promesse-enfer" se ressemble ?‍♂️

loadClients()
  .then((client) => {
    return populate(client)
      .then((clientPopulated) => {
        return commit(clientPopulated);
      });
  });

2. Comment remplacer React.Context ?

Créez plutôt des hooks.

Remplacons ThemeContext de l'exemple ci-dessus par un hook useTheme personnalisé :

import { useAppEvents } from 'use-app-events';

const useTheme = () => {
  const [theme, setTheme] = useState('dark');

  /** Set up communication between the instances of the hook. */
  const { notifyEventListeners, listenForEvents } = useAppEvents();

  listenForEvents('theme-update', (themeNext: string) => {
    setTheme(themeNext);
  });

  const updateTheme = (themeNext: string) => {
    setTheme(themeNext);

    notifyEventListeners('theme-update', themeNext);
  };

  return {
    theme,
    updateTheme,
  };
};

Nous avons utilisé un package npm appelé use-app-events pour permettre à toutes les instances du hook useTheme de communiquer afin de synchroniser l'état de leur thème. Cela garantit que la valeur du thème sera la même lorsque useTheme est appelé plusieurs fois dans l'application.

De plus, grâce au package use-app-events, le thème sera synchronisé même entre les onglets du navigateur.

À ce stade, ThemeContext n'est plus nécessaire car le hook useTheme peut être utilisé n'importe où dans l'application pour obtenir le thème actuel et le mettre à jour :

const App = () => {
  const { theme, updateTheme } = useTheme();

  updateTheme('light');

  // Output: 
Current theme: light
  return 
Current theme: {theme}
;
}

Quels sont les avantages de l'approche :

1. Pas besoin d'installer un crochet quelque part dans l'arbre avant que les enfants puissent l'utiliser (y compris les environnements de test) ;
2. La structure de rendu est plus propre, ce qui signifie qu'il n'y a plus de structure en forme de flèche déroutante construite à partir de vos contextes ;
3. L'état est synchronisé entre les onglets.

Conclusion

React.Context était certainement un outil puissant il y a quelque temps, mais les hooks offrent un moyen plus contrôlé et plus fiable de gérer l'état global de votre application s'ils sont correctement implémentés en conjonction avec le package use-app-events.