Átomos: a unidade de estado no Jotai

No Jotai, o estado é dividido em átomos: pequenas partes independentes de estado reativo. Cada átomo contém um único valor e é criado fora dos componentes com atom(initialValue).

Isso corresponde ao modelo mental de dividir o estado nas menores unidades significativas, em vez de usar um único objeto de armazenamento grande.

Quando o valor de um átomo muda, somente os componentes inscritos nesse átomo específico são renderizados novamente. Os componentes que leem outros átomos não são afetados.

Essa reatividade refinada é a principal vantagem do Jotai em relação ao Contexto do React, que renderiza novamente todos os consumidores a cada alteração.

Defina os átomos no nível do módulo: const countAtom = atom(0). Isso garante que a identidade do átomo permaneça estável entre as renderizações e que ele não seja recriado a cada montagem do componente.

Os átomos são referências leves; eles não mantêm seu próprio valor. O valor fica armazenado no armazenamento do Jotai.

Por padrão, o Jotai usa um armazenamento global implícito. Você não precisa envolver seu aplicativo em um Provider para começar a usar átomos, o que simplifica a adoção em projetos existentes.

Os átomos podem ser acessados globalmente por qualquer componente da árvore, sem passar propriedades por vários níveis ou encadear o contexto.

Quando você precisa de várias instâncias independentes da mesma árvore de componentes (por exemplo, dois formulários separados, cada um com seus próprios átomos de estado), envolva cada instância em um Provider do Jotai. Cada Provider cria um armazenamento isolado.

Isso é útil para arquiteturas de microfrontends ou layouts de página complexos com áreas de estado independentes.

O armazenamento global mantém os átomos durante todo o tempo de vida do aplicativo. Um armazenamento de Provider com escopo é redefinido quando o Provider é desmontado, sendo ideal para caixas de diálogo modais ou estados no nível da página que não devem persistir globalmente.

Você pode até passar uma instância de armazenamento personalizada para o Provider, obtendo isolamento na renderização no servidor.

O Zustand usa um único objeto de armazenamento com seletores para evitar renderizações desnecessárias. O Jotai divide o estado em átomos, e cada componente se inscreve apenas nos átomos que lê.

O Jotai é mais natural para estados refinados da interface (valores de entrada individuais, sinalizadores de alternância). O Zustand se adapta bem a estados maiores e interconectados do aplicativo.

O Contexto do React renderiza novamente todos os componentes consumidores sempre que o valor do contexto muda, mesmo que o componente consumidor se preocupe apenas com um campo do objeto de contexto.

O Jotai resolve isso: um componente que usa useAtom(nameAtom) só é renderizado novamente quando nameAtom muda, e não quando qualquer outro átomo muda.

O Jotai usa a comparação Object.is por padrão para determinar se o valor de um átomo mudou. Se você definir um átomo com o mesmo valor que ele já contém, nenhuma renderização adicional será acionada.

Para objetos complexos, use o utilitário selectAtom para derivar um valor primitivo estável de um átomo grande, evitando renderizações adicionais quando campos não relacionados mudarem.

useState é local a um único componente. Os átomos são compartilhados por toda a árvore de componentes sem a necessidade de passá-los explicitamente. Quando dois componentes irmãos leem o mesmo átomo, eles permanecem sincronizados automaticamente.

Isso elimina a necessidade de elevar o estado para compartilhá-lo entre componentes, mantendo as renderizações adicionais no mínimo.

Átomos comuns: const themeAtom = atom('light'), const cartItemsAtom = atom([]), const selectedUserIdAtom = atom(null). Eles são definidos uma vez e importados em qualquer lugar do aplicativo.

Cada átomo é independente: atualizar cartItemsAtom não aciona renderizações adicionais nos componentes que leem apenas themeAtom.

Em que Jotai difere do Contexto do React em relação à nova renderização?

Os átomos são a unidade fundamental de estado no Jotai, criados com atom(initialValue) fora dos componentes e compartilhados por toda a árvore sem Provider por padrão. Quando um átomo muda, somente seus assinantes são renderizados novamente.

Essa reatividade refinada é a principal vantagem do Jotai sobre o Contexto do React, e seu modelo de assinatura por átomo difere da abordagem de armazenamento único do Zustand.