Context Provider


Définition

Le contexte provider est une solution permettant le partage de données global sans en explicité le partage à travers les props des différents composants.

Pourquoi appliquer ce concept ?

  1. Le context provider permet une gestion des données centralisée à l’instar d’un module de gestion d’état sans en avoir la lourdeur applicative.
  2. Un argument majeur de l’application d’un context provider est d’éviter le props drilling. Plus besoin de passer les propriétés à travers toutes l’arborescence de votre application.
  3. Il en découle une simplicité et une clarification de l’utilisation des données ayant une source de vérité unique.

Le content provider à travers les langages

  • Pour React, le context provider au sein de la context API remplit ce rôle
  • VueJs met à disposition le système Provide/Inject. Ce fonctionnement permet à un composant de mettre à disposition de l’ensemble de son arborescence d’enfant d’injecter des données ou méthodes sans affecter les props. Attention, ce système n’est pas réactif par défaut !
  • Chez Angular, c’est la dependency injection ou DI qui permet une injection de service ou de donnée à travers la hiérarchie des composants.
  • De son côté, Svelte dispose de l’API de contexte qui fonctionne sur le même principe que la context API de React.

Les risques liés à son application

  • le risque principal des cette pratique est, pour l’ensemble des ces variantes, la complexité potentiel qu’elle peut apporté. Dans le cas d’une mauvaise mise en pratique ou abusive, cela peut apporter une complexité non désirée et non mesurée.
  • On notera la différence entre vue et react:
    • La content provider de rehaut est par défaut réactif. En conséquence, lors de modification de données dans le context, l’ensemble des composant seront re-rendu ce qui peut provoquer des problème de performance.
    • Côté vue, le système provide/inject n’est pas réactif par défaut comme nous le mentionnions plus haut. Il faut donc gérer la réactivité de ses données précisément ce qui peut être plus contraignant mais permet une gestion plus fine des performances de votre application.

Conclusion

En conclusion le context provider est un outil disponible dans l’ensemble des framework Front. Il est puissant et permet de trouver de solutionner vos architectures qui ne nécessite pas une structure aussi importante qu’une store tout en ayant une hiérarchie de composants relativement conséquente.