Jotai - global react state management

Contexte

Vous voulez avoir des états globaux, éventuellement partagés entre composants react ou react-native, voire même utilisés par des fonctions sans lien (direct) avec la mécanique react, et sans avoir à les passer en paramètres des composants.

Vous trouvez que useContext c'est trop lourd.

Solution

Le package Jotai permet de gérer un état react global. Pour ce faire, deux étapes :

La première étape est la création d'un atome (donnée de type arbitraire) avec son initialisation, par exemple dans le fichier globals.ts :

import { atom } from 'jotai'
export const compteAtom = atom<number>(0) 

La seconde étape est l'utilisation par un composant…

import { useAtom } from 'jotai'
import { compteAtom } from './globals'

export function Acme()
{
  // équivalent à useState mais l'état est global
  const [compte, setCompte] = useAtom(compteAtom)

  // …
}

ou bien hors d'un composant :

import { getDefaultStore } from 'jotai'
import { compteAtom } from './globals'

function incremente()
{
  const store = getDefaultStore()
  store.set(compteAtom, store.get(compteAtom) + 1)
}