Atoms derivados y asíncronos

Cree un átomo derivado pasando una función getter: const doubleAtom = atom(get => get(countAtom) * 2). Este átomo no tiene un valor almacenado; se vuelve a calcular cada vez que cambia countAtom.

Los átomos derivados siempre están actualizados sin necesidad de sincronización manual. Son el equivalente de las propiedades calculadas en Jotai.

Jotai registra qué átomos se han consultado dentro de la función getter y vuelve a evaluar automáticamente el átomo derivado cuando cambia cualquiera de ellos. No es necesario declarar las dependencias explícitamente.

Si getter llama a get(atomA) y get(atomB), el átomo derivado se actualiza cada vez que cambia atomA o atomB.

Un átomo derivado modificable tiene un getter y un setter: atom(get => get(baseAtom).toUpperCase(), (get, set, newValue) => set(baseAtom, newValue.toLowerCase())). Al leerlo se obtiene el valor transformado; al escribirlo, se transforma y se almacena de nuevo.

Este patrón implementa una transformación de datos bidireccional sin exponer directamente el átomo base.

La función getter puede ser asíncrona: const userAtom = atom(async get => { const id = get(userIdAtom); return await fetchUser(id); }). Jotai acepta de forma nativa las Promises devueltas por los getters de los átomos.

Cuando cambia userIdAtom, Jotai vuelve a ejecutar automáticamente el getter asíncrono y el componente consumidor se suspende durante la solicitud.

Los átomos asíncronos se integran perfectamente con React Suspense. Envuelva el componente consumidor en un límite Suspense con un contenido alternativo. El componente se suspende mientras la Promise está pendiente y se renderiza cuando esta se resuelve.

Esto elimina la necesidad de administrar manualmente el estado de carga en el componente: no hace falta una marca isLoading ni useEffect para obtener datos.

Importe loadable desde jotai/utils. Envuelva un átomo asíncrono: const loadableUserAtom = loadable(userAtom). Los componentes que lean loadableUserAtom reciben {state: 'loading'}, {state: 'hasData', data: user} o {state: 'hasError', error} sin suspenderse.

Utilice loadable cuando necesite mostrar un estado de carga personalizado integrado en la interfaz en lugar de depender de un límite Suspense.

La utilidad atomWithReset de jotai/utils crea un átomo que se puede restablecer a su valor inicial mediante el símbolo RESET. Es una solución más limpia que realizar un seguimiento manual del valor inicial y volver a aplicarlo.

En formularios, restablezca todos los átomos de los campos al enviar o cancelar llamando a cada setter con RESET dentro de un único controlador.

Un átomo derivado puede leer varios átomos: const summaryAtom = atom(get => ({ user: get(userAtom), settings: get(settingsAtom), count: get(countAtom) })). Esto crea una única referencia estable que se actualiza cuando cambia cualquiera de las dependencias.

Los componentes que solo necesitan el resumen se suscriben a summaryAtom en lugar de a los tres átomos individuales.

Los átomos derivados pueden leer distintos átomos de forma condicional: const activeDataAtom = atom(get => get(modeAtom) === 'A' ? get(dataAAtom) : get(dataBAtom)). Cuando cambia modeAtom, el átomo derivado cambia automáticamente su origen de datos.

Jotai vuelve a suscribirse al átomo correcto en cada evaluación, lo que garantiza que no haya datos obsoletos de la rama inactiva.

Si el getter de un átomo asíncrono lanza un error o rechaza la Promise, el error se propaga al límite de errores de React más cercano cuando se utiliza con Suspense. Con loadable, el error aparece en el campo state.error para gestionarlo de forma integrada.

En el código de producción, combine siempre los átomos asíncronos con un ErrorBoundary o un contenedor loadable.

Los átomos derivados memorizan su último resultado. Si todos los átomos de los que dependen devuelven los mismos valores que en la evaluación anterior, el átomo derivado devuelve la misma referencia y no se producen re-renderizados posteriores.

En derivaciones costosas, como transformaciones de matrices grandes, esta memorización proporciona importantes beneficios de rendimiento sin configuración adicional.

¿Qué le ocurre a un componente que lee un átomo asíncrono mientras su Promise está pendiente?

Los átomos derivados calculan valores a partir de otros átomos mediante funciones getter con seguimiento automático de dependencias. Los átomos asíncronos utilizan getters asíncronos y se integran con React Suspense de forma predeterminada; utilice loadable de jotai/utils para no usar Suspense y gestionar los estados de carga y error directamente en la interfaz.

Los átomos derivados modificables permiten realizar transformaciones bidireccionales, y los átomos condicionales cambian dinámicamente de origen de datos según los valores de otros átomos.