Átomos derivados e assíncronos

Crie um átomo derivado passando uma função de leitura: const doubleAtom = atom(get => get(countAtom) * 2). Esse átomo não tem um valor armazenado; ele é recalculado sempre que countAtom muda.

Os átomos derivados estão sempre atualizados sem nenhuma sincronização manual. Eles são o equivalente do Jotai às propriedades calculadas.

O Jotai rastreia quais átomos foram acessados dentro da função de leitura e reavalia automaticamente o átomo derivado quando qualquer um deles muda. Não é necessário declarar as dependências explicitamente.

Se a função de leitura chamar get(atomA) e get(atomB), o átomo derivado será atualizado sempre que atomA ou atomB mudar.

Um átomo derivado gravável tem uma função de leitura e uma função de atualização: atom(get => get(baseAtom).toUpperCase(), (get, set, newValue) => set(baseAtom, newValue.toLowerCase())). A leitura fornece o valor transformado; a escrita transforma o valor e o armazena novamente.

Esse padrão implementa uma transformação de dados bidirecional sem expor diretamente o átomo base.

A função de leitura pode ser assíncrona: const userAtom = atom(async get => { const id = get(userIdAtom); return await fetchUser(id); }). O Jotai aceita nativamente promessas retornadas pelas funções de leitura dos átomos.

Quando userIdAtom muda, o Jotai executa novamente a função de leitura assíncrona automaticamente, e o componente consumidor é suspenso durante a busca.

Os átomos assíncronos se integram perfeitamente ao React Suspense. Envolva o componente consumidor em um limite Suspense com um estado alternativo. O componente é suspenso enquanto a promessa está pendente e é renderizado quando ela é resolvida.

Isso elimina o gerenciamento manual do estado de carregamento no componente: não é necessário um sinalizador isLoading nem useEffect para buscar dados.

Importe loadable de jotai/utils. Envolva um átomo assíncrono: const loadableUserAtom = loadable(userAtom). Os componentes que leem loadableUserAtom recebem {state: 'loading'}, {state: 'hasData', data: user} ou {state: 'hasError', error} sem serem suspensos.

Utilize loadable quando precisar renderizar um estado de carregamento personalizado diretamente na interface, em vez de depender de um limite Suspense.

O utilitário atomWithReset de jotai/utils cria um átomo que pode ser redefinido para seu valor inicial usando o símbolo RESET. Isso é mais limpo do que rastrear e reaplicar manualmente o valor inicial.

Em formulários, redefina todos os átomos de campos ao enviar ou cancelar, chamando cada função de atualização com RESET em um único manipulador.

Um átomo derivado pode ler vários outros átomos: const summaryAtom = atom(get => ({ user: get(userAtom), settings: get(settingsAtom), count: get(countAtom) })). Isso cria uma única referência estável que é atualizada quando qualquer dependência muda.

Os componentes que precisam apenas do resumo assinam summaryAtom, em vez de assinar os três átomos individuais.

Os átomos derivados podem ler átomos diferentes condicionalmente: const activeDataAtom = atom(get => get(modeAtom) === 'A' ? get(dataAAtom) : get(dataBAtom)). Quando modeAtom muda, o átomo derivado troca automaticamente sua fonte de dados.

O Jotai assina novamente o átomo correto a cada avaliação, garantindo que não haja dados desatualizados do ramo inativo.

Se a função de leitura de um átomo assíncrono lançar um erro ou rejeitar, o erro será propagado para o limite de erros do React mais próximo quando usado com Suspense. Com loadable, o erro aparece no campo state.error para tratamento direto na interface.

Sempre associe átomos assíncronos a um ErrorBoundary ou a um componente loadable no código de produção.

Os átomos derivados memorizam seu último resultado. Se todos os átomos de dependência retornarem os mesmos valores da avaliação anterior, o átomo derivado retornará a mesma referência e nenhuma nova renderização ocorrerá nos componentes dependentes.

Para derivações dispendiosas, como grandes transformações de vetores, essa memorização oferece benefícios significativos de desempenho sem nenhuma configuração adicional.

O que acontece com um componente que lê um átomo assíncrono enquanto sua promessa está pendente?

Os átomos derivados calculam valores a partir de outros átomos usando funções de leitura com rastreamento automático de dependências. Os átomos assíncronos usam funções de leitura assíncronas e se integram ao React Suspense por padrão; utilize loadable de jotai/utils para dispensar o Suspense e tratar estados de carregamento e erro diretamente na interface.

Os átomos derivados graváveis permitem transformações bidirecionais, e os átomos condicionais trocam dinamicamente as fontes de dados com base nos valores de outros átomos.