Comment gérer au mieux votre state applicatif sans sortir l’artillerie lourde ? C’est la question que s’est posé Maxime Sraïki, développeur chez BAM. Lors du Matters Meetup du 13 avril 2017, il nous partage son retour sur expérience.


Dans un écosystème React (JS ou Native) la communication entre les différents composants est souvent complexe. Alors, quand l’architecture de ces composants s’enrichit, le partage de données ou d’actions via l’application devient un enjeu considérable à l’échelle du développeur.


Pour adresser cette problématique, Maxime vous présente MobX, une librairie pour gérer les informations du state applicatif de votre application React. Son principal avantage réside dans ces 4 fonctionnalités clés qui vont vous permettre de mieux saisir son incidence sur la gestion de vos composants :


  1. Observable : vous permet de signaler qu’une donnée est à surveiller
  2. Observers / Autorun : déclenche un re-render à la modification
  3. Computed : calcule une valeur dérivée d’un observable
  4. Actions : indique que le state est sur le point de changer


Utiliser des décorateurs pour annoter différentes variables permet que les re-renders des composants de l’application soient optimisés afin de ne jamais nuire aux performances de celle-ci. En bref, l’utilisation conjointe d’observable et d'observer, conjuguée aux fonctions de manipulation de la donnée, dites actions, permet de mettre à jour uniquement ce qui doit l’être, au bon moment et de manière simplifiée.


En comparaison avec l’outil Redux, plus connu, MobX semble mieux adapté à certaines situations. Par exemple, lors du développement de petites applications où la permissivité et la souplesse de MobX permettent un développement rapide et efficace, sous réserve de définir de bonnes pratiques communes de développement au sein de l’équipe. Pour une plus grosse application, MobX peut aussi se révéler avantageux, à condition de porter une attention encore plus particulière au point précédent !