Atoms: la unidad de estado en Jotai

En Jotai, el estado se divide en átomos: pequeñas unidades independientes de estado reactivo. Cada átomo contiene un único valor y se crea fuera de los componentes mediante atom(initialValue).

Esto refleja el modelo mental de dividir el estado en las unidades significativas más pequeñas, en lugar de un único objeto de store grande.

Cuando cambia el valor de un átomo, solo se vuelven a renderizar los componentes suscritos a ese átomo específico. Los componentes que leen otros átomos no se ven afectados.

Esta reactividad granular es la principal ventaja de Jotai frente a React Context, que vuelve a renderizar a todos los consumidores ante cualquier cambio.

Defina los átomos en el ámbito del módulo: const countAtom = atom(0). Esto garantiza que la identidad del átomo sea estable entre renderizados y que el átomo no se vuelva a crear cada vez que se monta el componente.

Los átomos son referencias ligeras; no contienen su propio valor. El valor reside en el store de Jotai.

De forma predeterminada, Jotai utiliza un store global implícito. No necesita envolver la aplicación en un Provider para empezar a usar átomos, lo que simplifica su adopción en proyectos existentes.

Los átomos están disponibles globalmente desde cualquier componente del árbol, sin prop drilling ni encadenamiento del contexto.

Cuando necesite varias instancias independientes del mismo árbol de componentes (por ejemplo, dos formularios separados, cada uno con sus propios átomos de estado del formulario), envuelva cada una en un Provider de Jotai. Cada Provider crea un store aislado.

Esto resulta útil para arquitecturas de microfrontends o diseños de página complejos con islas de estado independientes.

El store global conserva los átomos durante toda la vida de la aplicación. El store de un Provider con ámbito se restablece cuando el Provider se desmonta, lo que resulta perfecto para cuadros de diálogo modales o estados de página que no deben persistir globalmente.

Incluso puede pasar una instancia de store personalizada a Provider para aislar el renderizado del lado del servidor.

Zustand utiliza un único objeto de store con selectores para evitar renderizados innecesarios. Jotai divide el estado en átomos y cada componente se suscribe únicamente a los átomos que lee.

Jotai resulta más natural para el estado granular de la interfaz (valores individuales de input e indicadores de alternancia). Zustand encaja bien con estados de aplicación más grandes e interconectados.

React Context vuelve a renderizar cada componente consumidor siempre que cambia el valor del contexto, incluso si el componente consumidor solo necesita un campo del objeto de contexto.

Jotai resuelve esto: un componente que utiliza useAtom(nameAtom) solo se vuelve a renderizar cuando cambia nameAtom, no cuando cambia cualquier otro átomo.

Jotai utiliza la comparación Object.is de forma predeterminada para determinar si ha cambiado el valor de un átomo. Si asigna a un átomo el mismo valor que ya contiene, no se provoca un nuevo renderizado.

Para objetos complejos, utilice la utilidad selectAtom para derivar un valor primitivo estable de un átomo grande y evitar nuevos renderizados cuando cambien campos no relacionados.

useState es local a un único componente. Los átomos se comparten en todo el árbol de componentes sin pasarlos explícitamente. Cuando dos componentes hermanos leen el mismo átomo, se mantienen sincronizados automáticamente.

Esto elimina la necesidad de elevar el estado para compartirlo entre componentes, a la vez que mantiene al mínimo los nuevos renderizados.

Átomos habituales: const themeAtom = atom('light'), const cartItemsAtom = atom([]), const selectedUserIdAtom = atom(null). Se definen una vez y se importan desde cualquier lugar de la aplicación.

Cada átomo es independiente: actualizar cartItemsAtom no provoca nuevos renderizados en los componentes que solo leen themeAtom.

¿En qué se diferencia Jotai de React Context en cuanto al re-renderizado?

Los átomos son la unidad fundamental del estado en Jotai. Se crean con atom(initialValue) fuera de los componentes y se comparten en todo el árbol sin Provider de forma predeterminada. Cuando un átomo cambia, solo se vuelven a renderizar sus suscriptores.

Esta reactividad de grano fino es la principal ventaja de Jotai frente a React Context, y su modelo de suscripción por átomo se diferencia del enfoque de almacén único de Zustand.