Leer y escribir atoms con useAtom

useAtom(someAtom) devuelve [value, setter], de forma similar a la API de useState. value es el estado actual del átomo y setter lo actualiza. Utilice este hook cuando un componente lea y escriba el átomo.

setter acepta un valor nuevo o una función actualizadora: setCount(c => c + 1).

useAtomValue(someAtom) devuelve únicamente el valor actual, sin setter. Utilícelo en componentes de solo visualización que lean el estado, pero nunca lo modifiquen.

Como el componente no conserva una referencia a setter, la intención queda claramente documentada en el código: este componente es un lector puro.

useSetAtom(someAtom) devuelve únicamente la función setter. Lo más importante es que no suscribe el componente al valor del átomo. El componente nunca se vuelve a renderizar cuando cambia el átomo.

Utilícelo en componentes que solo ejecuten acciones, como botones que envían cambios de estado, pero no muestran ninguna interfaz derivada.

Un componente que llama a useSetAtom(countAtom) para incrementar un contador nunca se volverá a renderizar cuando cambie countAtom, porque no tiene una suscripción al valor. Solo se vuelve a renderizar el componente que muestra el contador.

Esta es una optimización sencilla, pero potente: desacople los escritores de los lectores para evitar re-renderizados en cascada.

Importe atomWithStorage desde jotai/utils. Utilícelo exactamente como atom(), pero pase una clave de almacenamiento como primer argumento: atomWithStorage('theme', 'light'). El átomo se sincroniza automáticamente con localStorage.

Al recargar la página, el átomo se hidrata desde localStorage. Todos los componentes que leen el átomo reciben inmediatamente el valor persistido.

El símbolo RESET de jotai/utils se puede pasar al setter de un átomo atomWithStorage: setter(RESET). Esto elimina la entrada de localStorage y restablece el átomo a su valor inicial.

Resulta útil en flujos de cierre de sesión o en botones de configuración para «restablecer los valores predeterminados».

atomFamily de jotai/utils crea una fábrica que devuelve un átomo parametrizado. Por ejemplo, atomFamily(id => atom(null)) crea un átomo independiente para cada id único que se proporcione.

Es ideal para estados por elemento, como selectedAtom(itemId) o expandedAtom(rowId), sin tener que administrar un único átomo con un mapa grande.

Las familias de átomos pueden crecer sin límite si se acumulan los ID. Utilice atomFamily.setShouldRemove((createdAt, param) => ...) para definir un predicado de limpieza que Jotai invoque al decidir qué miembros obsoletos de la familia debe expulsar.

En listas cuyos elementos se agregan y eliminan, limpie siempre las entradas de la familia de átomos cuando se eliminen elementos para evitar fugas de memoria.

El paquete jotai-devtools proporciona un panel visual que muestra todos los átomos activos y sus valores actuales. Instálelo, envuelva la aplicación en DevTools e inspeccione el estado de los átomos en tiempo real.

Cada actualización de un átomo se registra con el valor anterior y el nuevo, lo que facilita la depuración de interacciones complejas entre átomos.

En una lista grande, un componente ListContainer puede utilizar useSetAtom(selectedIdAtom) para actualizar la selección sin suscribirse a selectedIdAtom. Solo se vuelven a renderizar los componentes ListItem individuales que llaman a useAtomValue(selectedIdAtom) cuando cambia la selección.

Este patrón escala bien: agregar miles de elementos a la lista no ralentiza las actualizaciones de selección.

Elija el hook que corresponda a la necesidad del componente: useAtomValue para la visualización pura, useSetAtom para las acciones puras y useAtom cuando necesite ambas cosas. Este diseño intencionado de la API deja clara de un vistazo la responsabilidad del componente.

Normalmente, un componente de campo de formulario utiliza useAtom; un botón de envío utiliza useSetAtom; y una etiqueta que muestra un contador utiliza useAtomValue.

¿Cuál es la principal ventaja de utilizar useSetAtom en lugar de useAtom?

useAtom proporciona tanto el valor como setter; useAtomValue proporciona solo el valor (suscripciones de lectura); useSetAtom proporciona solo setter (no hay re-renderizado cuando cambia el valor). atomWithStorage persiste los datos en localStorage con compatibilidad con RESET, y atomFamily crea átomos por parámetro para listas dinámicas.

Elegir el hook adecuado minimiza los re-renderizados innecesarios y hace explícita la intención del componente.