Los Átomos de Jotai Son Simplemente Funciones

Rate this content
Bookmark
Slides

Jotai es una biblioteca de gestión de estado. La hemos estado desarrollando principalmente para React, pero conceptualmente no está vinculada a React. En esta charla, veremos cómo funcionan los átomos de Jotai y aprenderemos sobre el modelo mental que deberíamos tener. Los átomos son una abstracción agnóstica del marco para representar estados, y básicamente son solo funciones. Comprender la abstracción de átomo ayudará a diseñar e implementar estados en sus aplicaciones con Jotai

This talk has been presented at React Day Berlin 2022, check out the latest edition of this React Conference.

FAQ

Algunas de las bibliotecas populares para la gestión del estado en React incluyen Redux, MoveX, XState, Zustand, y Jotai.

Jotai es una biblioteca para la gestión del estado en React basada en el concepto de átomos, que son piezas del estado que forman un gráfico de dependencias y propagan actualizaciones. Ayuda a manejar el estado de una manera más modular y reactiva.

Los átomos en Jotai representan definiciones de estado que pueden depender unos de otros formando un gráfico de dependencias. Un átomo puede ser de solo lectura, escribible o ambos, y se actualiza dinámicamente en respuesta a cambios en átomos de los que depende.

Jotai se diferencia por su enfoque basado en átomos, que simplifica la gestión del estado global y local sin imponer una estructura rígida. Además, los átomos son puras definiciones de estado independientes de React, lo que permite su uso en otros contextos.

Sí, aunque Jotai está diseñada principalmente para React, su arquitectura basada en átomos permite su utilización en otros entornos. Daishi Kato ha experimentado con bibliotecas alternativas como Jotajsx que permiten el uso de Jotai fuera de React.

Un átomo primitivo en Jotai es un átomo que se define con un valor inicial y puede tener funciones de lectura y escritura asociadas. Actúa como la fuente de datos en el gráfico de dependencias y puede ser actualizado directamente.

Jotai ofrece una gestión del estado más flexible y eficiente, minimiza los rerenderizados innecesarios y simplifica la arquitectura del estado al permitir definir átomos que se auto gestionan y actualizan de manera reactiva en base a dependencias.

Daishi Kato
Daishi Kato
22 min
05 Dec, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La gestión de estado en React es un tema muy discutido con muchas bibliotecas y soluciones. Jotai es una nueva biblioteca basada en átomos, que representan piezas de estado. Los átomos en Jotai se utilizan para definir el estado sin retener valores y se pueden utilizar para estados globales, semi-globales o locales. Los átomos de Jotai son definiciones reutilizables que son independientes de React y se pueden utilizar sin React en una biblioteca experimental llamada Jotajsx.
Available in English: Jotai Atoms Are Just Functions

1. Introducción a la biblioteca Jotai

Short description:

La gestión del estado en React es un tema muy discutido con muchas bibliotecas y soluciones. Jotai es una nueva biblioteca basada en átomos, que representan piezas del estado. Forma un gráfico de dependencias para propagar actualizaciones. El concepto es similar a los observables para el flujo de datos asíncronos, pero los átomos tienen algunas diferencias.

Hola a todos. Gracias por la oportunidad de dar esta charla. Espero que la encuentren útil.

Como muchos de ustedes pueden saber, la state management en React es uno de los temas más discutidos en la community. Hay muchas bibliotecas y soluciones. UseStateHook es una de las soluciones primitivas. Algunas de las bibliotecas populares incluyen Redux, MoveX, XState y Zustand. Proporcionan diferentes funcionalidades para diferentes objetivos. Lo bueno es que los desarrolladores tienen muchas opciones para desarrollar sus aplicaciones. Lo malo es que hay demasiadas opciones. Pero creo que tener muchas opciones sigue siendo bueno para el ecosystem. Si solo hubiera una solución, nos perderíamos muchas ideas nuevas.

Jotai es una nueva biblioteca en este campo. Hola, mi nombre es Daishi Kato. Soy el autor de la biblioteca Jotai. Soy medio desarrollador de código abierto y medio freelancer. Mi software de código abierto es con JavaScript y React. Y mi trabajo también está relacionado con JavaScript y React. Hay bastantes proyectos de código abierto en los que estoy trabajando, incluyendo algunos experimentales. Jotai es uno de mis proyectos de código abierto, pero lo desarrollamos como un equipo. Aunque yo soy el principal desarrollador del code, hay muchos contribuyentes, no solo para la codificación, sino también para la documentation y otras cosas.

Esta charla es sobre la biblioteca Jotai, que es una solución para la state management en React. Jotai es una biblioteca basada en átomos, que representan piezas del estado. Los átomos son popularizados por una biblioteca llamada Recoil, pero el concepto no es muy nuevo. El concepto es básicamente formar un gráfico de dependencias de piezas del estado y propagar actualizaciones. Por ejemplo, supongamos que tenemos tres átomos, A, B y C. A depende de B, B depende de C. Si actualizamos C, tanto B como A se actualizan. Este patrón ya se ha hecho, por ejemplo, con observables para el flujo de data asíncrono. Los átomos son un poco diferentes de los observables.

2. Átomos y Gestión del Estado en la Biblioteca Jyotai

Short description:

Por lo general, los átomos en Jyotai se utilizan para definir el estado sin contener valores. Son como funciones que dependen de otros átomos. Cambiar un átomo desencadena actualizaciones en otros átomos dependientes. El hook UseAtom es similar a useState y devuelve un valor y una función de actualización. Los átomos pueden utilizarse para estados globales, semi-globales o locales.

Por lo general, un objeto observable contendría un valor o tal vez esté inicialmente vacío. Los átomos nunca contendrían valores. Son solo definiciones y los valores existen en otro lugar. Profundizaremos en esto en esta masterclass, pero primero veamos cómo se ve el uso de Jyotai.

Este es un ejemplo sencillo utilizando átomos de Jyotai. Tenemos tres átomos, textAtom, textLengthAtom y uppercaseAtom. textAtom tiene el valor inicial HELLO. textLengthAtom tiene una función que devuelve la longitud de textAtom. uppercaseAtom tiene una función que devuelve de manera similar la cadena de texto de textAtom en mayúsculas. stringAtom y uppercaseAtom ambos dependen de textAtom. Así que si cambias textAtom, los otros dos átomos también cambiarán.

Como puedes ver, si introducimos texto, es decir, si ingresamos un texto en el campo de texto, los tres valores se actualizan en consecuencia. Si observas de cerca, utilizamos el hook useAtom que toma un átomo que hemos definido. El hook UseAtom funciona como el hook useState. Devuelve un valor y una función de actualización. Si el valor cambia, desencadenará un nuevo renderizado. Puedes cambiar el valor con la función de actualización.

Hay una nota importante que no se muestra en este ejemplo. Si utilizamos el mismo átomo, useAtom devuelve el mismo valor. Por lo tanto, podemos usar átomos para el estado global. La biblioteca Jyotai a menudo se considera como una solución de estado global. Podemos usarla para el estado global, pero no es verdaderamente global. Y podemos usarla para estados semi-globales o locales. Esto puede sonar poco intuitivo, pero si piensas en los átomos como funciones, debería tener más sentido. Intentemos hacer una analogía. Todos sabemos que los componentes de React son solo funciones. Este es uno de los componentes más simples. Devuelve una cadena de texto. Por lo general, definimos componentes que devuelven elementos JSX, pero devolver cadenas de texto también es válido. No sabemos exactamente cuándo se invoca esta función.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

No resuelvas problemas, elimínalos
React Advanced 2021React Advanced 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
React Query: ¡Es hora de romper con tu "Estado Global"!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: ¡Es hora de romper con tu "Estado Global"!
Top Content
Global state management and the challenges of placing server state in global state are discussed. React Query is introduced as a solution for handling asynchronous server state. The Talk demonstrates the process of extracting logic into custom hooks and fixing issues with state and fetching logic. Optimistic updates with mutation are showcased, along with the benefits of using React Query for data fetching and mutations. The future of global state management is discussed, along with user feedback on React Query. The Talk concludes with an invitation to explore React Query for server state management.

Workshops on related topic

React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced 2021React Advanced 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
Fundamentos de Remix
React Summit 2022React Summit 2022
136 min
Fundamentos de Remix
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas
¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™?
Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida?
Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Repensando el Estado del Servidor con React Query
React Summit 2020React Summit 2020
96 min
Repensando el Estado del Servidor con React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
La distinción entre el estado del servidor y el estado del cliente en nuestras aplicaciones puede ser un concepto nuevo para algunos, pero es muy importante entenderlo cuando se entrega una experiencia de usuario de primera calidad. El estado del servidor viene con problemas únicos que a menudo se cuelan en nuestras aplicaciones sorpresa como:
- Compartir datos entre aplicaciones- Caché y Persistencia- Deduplicación de Solicitudes- Actualizaciones en segundo plano- Gestión de Datos "Obsoletos"- Paginación y Recuperación Incremental- Memoria y Recolección de Basura- Actualizaciones Optimistas
Los gestores tradicionales de "Estado Global" pretenden que estos desafíos no existen y esto finalmente resulta en que los desarrolladores construyan sus propios intentos sobre la marcha para mitigarlos.
En esta masterclass, construiremos una aplicación que expone estos problemas, nos permite entenderlos mejor, y finalmente los convierte de desafíos a características usando una biblioteca diseñada para gestionar el estado del servidor llamada React Query.
Al final de la masterclass, tendrás una mejor comprensión del estado del servidor, el estado del cliente, la sincronización de datos asíncronos (un bocado, lo sé), y React Query.
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
JSNation 2023JSNation 2023
174 min
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.