MobX, Recoil, Jotai (Aperçu des alternatives et de leurs philosophies)

L'écosystème riche de la gestion d'état react

Si Redux (avec Redux Toolkit) et Zustand représentent deux pôles populaires de la gestion d'état globale dans React – l'un structuré et prévisible, l'autre minimaliste et flexible – l'écosystème offre encore d'autres alternatives notables, chacune bâtie sur des philosophies et des mécanismes distincts. Comprendre ces alternatives peut vous aider à choisir l'outil le mieux adapté à un contexte spécifique ou à des préférences d'équipe différentes. Ce chapitre donne un aperçu rapide de trois autres acteurs importants : MobX, Recoil et Jotai.

MobX : La puissance de la programmation réactive transparente

• `observable` : Marque les structures de données (objets, tableaux, classes) comme observables. MobX traque les accès à leurs propriétés.
• `action` : Marque les fonctions qui modifient l'état observable. MobX peut optimiser les mises à jour groupées au sein d'une action.
• `computed` : Permet de définir des valeurs dérivées de l'état observable. Elles sont mises en cache et recalculées automatiquement uniquement lorsque les observables dont elles dépendent changent.
• `observer` (via `mobx-react` ou `mobx-react-lite`) : Un Higher-Order Component (HOC) ou un wrapper qui rend un composant React réactif aux changements des observables qu'il utilise. Le composant se re-rend automatiquement et de manière optimisée.

// Exemple très simplifié (syntaxe avec décorateurs ou makeObservable)
import { makeObservable, observable, computed, action } from 'mobx';
import { observer } from 'mobx-react-lite';

class CounterStore {
  count = 0;
  
  constructor() {
    makeObservable(this, {
      count: observable,
      double: computed,
      increment: action,
    });
  }

  get double() {
    return this.count * 2;
  }

  increment() {
    this.count++;
  }
}

const myCounter = new CounterStore();

const CounterView = observer(() => { // Le composant devient un observateur
  return (
    

      Count: {myCounter.count}, Double: {myCounter.double}
       myCounter.increment()}>+
    
  );
});

Recoil : La gestion d'état atomique par facebook

• `atom` : Une unité d'état individuelle, possédant une clé unique et une valeur par défaut. Les composants peuvent lire et écrire dans les atomes.
• `selector` : Une fonction pure qui accepte des atomes ou d'autres sélecteurs en entrée et retourne une valeur dérivée. Recoil gère automatiquement les dépendances et la mise en cache.
• Hooks (`useRecoilState`, `useRecoilValue`, `useSetRecoilState`) : Permettent aux composants d'interagir avec les atomes et les sélecteurs d'une manière qui rappelle `useState`.
• `` : Un composant Provider nécessaire pour envelopper l'application, similaire au `` de Redux.

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

// Définition d'un atome
const counterState = atom({ key: 'counterState', default: 0 });

// Définition d'un sélecteur
const counterDoubleState = selector({
  key: 'counterDoubleState',
  get: ({ get }) => {
    const count = get(counterState);
    return count * 2;
  },
});

function Counter() {
  const [count, setCount] = useRecoilState(counterState);
  const doubleCount = useRecoilValue(counterDoubleState);

  return (
    

      Count: {count}, Double: {doubleCount}
       setCount(count + 1)}>+
    
  );
}

function App() {
  return (
    
      
    
  );
}

Jotai : L'approche atomique minimaliste et flexible

• `atom` : Comme pour Recoil, définit une unité d'état avec une valeur initiale. Les atomes de Jotai peuvent aussi être dérivés d'autres atomes de manière très flexible (lecture, écriture, ou lecture/écriture).
• `useAtom` : Le hook principal, similaire à `useState`, qui retourne la valeur de l'atome et une fonction pour la mettre à jour. Il gère l'abonnement et les re-rendus.
• Pas besoin de `` par défaut (il utilise le contexte de React sous le capot, mais de manière optimisée).

import React from 'react';
import { atom, useAtom } from 'jotai';

// Atome simple
const counterAtom = atom(0);

// Atome dérivé (lecture seule)
const doubleAtom = atom((get) => get(counterAtom) * 2);

// Atome dérivé (lecture/écriture)
const decrementAtom = atom(
  (get) => get(counterAtom), // Lecture
  (get, set) => { set(counterAtom, get(counterAtom) - 1); } // Ecriture
);

function Counter() {
  const [count, setCount] = useAtom(counterAtom);
  const doubleCount = useAtom(doubleAtom)[0]; // Lecture seule d'un atome dérivé
  const [, decrement] = useAtom(decrementAtom); // Utilisation de l'action d'écriture

  return (
    

      Count: {count}, Double: {doubleCount}
       setCount(c => c + 1)}>+
      -
    
  );
}

// Pas besoin de Provider ici pour l'usage de base
function App() {
  return ;
}

Choisir parmi les alternatives

Le choix entre MobX, Recoil, Jotai (et Redux, Zustand) dépend fortement des besoins spécifiques du projet et des préférences de l'équipe.

• Choisissez MobX si vous appréciez la programmation réactive et souhaitez des mises à jour automatiques avec moins de code explicite pour la propagation des changements.
• Choisissez Recoil si vous voulez une approche atomique structurée, soutenue par Facebook, et bien intégrée avec les fonctionnalités concurrentes de React.
• Choisissez Jotai si vous recherchez une approche atomique extrêmement minimaliste, flexible et facile à intégrer, avec une API très réduite.

Explorer ces différentes philosophies vous permet d'avoir une vision plus complète du paysage de la gestion d'état en React et de sélectionner l'outil qui correspond le mieux à votre style de développement et aux contraintes de votre application.