Reutilizando el estado de la aplicación en React Native con Recoil

Rate this content
Bookmark

Un grupo de voluntarios de todo el mundo está trabajando en aplicaciones de React y React Native para el programa ADHD America (organización sin fines de lucro). En nuestro trabajo, utilizamos Recoil, una herramienta de gestión de estado de React bastante nueva que parece muy prometedora. Mostraré cómo la utilizamos en ambas aplicaciones, tanto para web como para móvil, y explicaré por qué decidimos probarla.

24 min
25 Oct, 2021

Video Summary and Transcription

Recoil es una biblioteca de gestión de estado mínima y fácil de aprender para React y React Native. Admite la definición de estado distribuido e incremental, suspense de React y proporciona hooks como useRecoilValue y useRecoilState. Recoil se puede utilizar en aplicaciones tanto de React como de React Native, lo que permite reutilizar fácilmente las configuraciones de estado. La prueba de Recoil es sencilla, con la capacidad de observar cambios de estado y comparar instantáneas. En general, Recoil es una alternativa experimental pero prometedora a Redux.

Available in English

1. Introducción a Recoil y la gestión de estado

Short description:

¡Hola! Bienvenidos a React Advanced. Hoy hablaré sobre cómo usar Recoil en React y React Native. Discutiré el problema de la gestión de estado en React, los tipos de estado y las soluciones populares para la gestión de estado. Luego explicaré los conceptos básicos de Recoil, su uso en el programa ADHD y cómo probar los átomos y selectores de Recoil. También tocaremos el tema del almacenamiento en caché con Redux y GraphQL.

Bienvenidos a React Advanced. Mi nombre es Sergiy y hoy me gustaría hablar sobre cómo usar Recoil en React y React Native. Un poco sobre mí. He estado trabajando como desarrollador web durante más de 10 años, trabajo con diferentes tecnologías en diferentes industrias, trabajo con tecnologías de backend y frontend, pero en los últimos años he trabajado principalmente con React y realmente me gusta. Soy realmente un fanático de Javascript y de diferentes frameworks de Javascript, pero como dije, me gusta React en particular.

Y ¿cuál es el plan para la charla de hoy? Me gustaría comenzar compartiendo algunos aspectos sobre el problema de la gestión de estado en React y las soluciones populares para la gestión de estado. Luego compartiré los conceptos básicos de Recoil y cómo funciona, luego hablaré un poco sobre el programa ADHD y por qué necesitamos Recoil allí, y también hablaré un poco sobre cómo probar los átomos y selectores de Recoil.

Entonces, sobre el problema de la gestión de estado en React. En todas nuestras aplicaciones tenemos estado y todos sabemos que generalmente tenemos algunos problemas para gestionarlo. ¿Por qué tenemos esos problemas? Creo que tenemos problemas porque tenemos diferentes tipos de estado, tenemos muchas bibliotecas y enfoques para la gestión de estado, y también tenemos diferentes plataformas como React y React Native. Esto hace que el problema sea un poco complejo. En primer lugar, me gustaría hablar sobre los tipos de estado. Para estar en la misma página. ¿Por qué me gustaría hablar de esto? Porque dependiendo del tipo de estado con el que estemos tratando en este momento, podemos seleccionar la mejor herramienta que necesitamos para este tipo de estado. El estado más simple es el estado local de un componente. Y creo que todos sabemos cómo gestionar esto. Hoy en día, podemos gestionar el estado local tanto en componentes basados en clases como en componentes funcionales, gracias a los Hooks. El siguiente tipo de estado es el estado compartido de un componente. Cuando tenemos algunos datos que necesitamos usar en diferentes componentes, generalmente seleccionamos un componente padre y movemos o elevamos el estado compartido a este componente y luego pasamos los datos a través de props. También podemos tener un estado global de la aplicación. El estado global es algún dato que tenemos a nivel global para nuestra aplicación y que usamos en diferentes componentes en diferentes niveles de nuestra aplicación. Parte de este estado puede ser un estado de interfaz de usuario (UI). El estado de la interfaz de usuario es un estado que usamos para almacenar datos que describen qué y cómo nos gustaría mostrar. Por ejemplo, tal vez qué tema usamos, qué colores, qué fuentes y qué tamaños de estas fuentes. Bien, y otra parte es la caché. La caché es bastante importante, pero cuando necesitamos la caché, la mayoría de nuestras aplicaciones hacen llamadas a API. Y cuando recuperamos algunos datos, generalmente queremos almacenarlos en caché para mejorar la experiencia del usuario. Cuando navegamos entre pestañas o entre diferentes páginas de nuestras aplicaciones, muy a menudo podemos capturar los datos y no volver a obtenerlos una y otra vez. Y por cierto, menciono Redux y GraphQL aquí como posibles soluciones, porque Redux y GraphQL son realmente buenos para la caché. Y por cierto, según lo que sé aquí en React Advanced, también habrá una charla sobre la caché de GraphQL, y estoy seguro de que será increíble.

2. Comparación entre Redux y Recoil

Short description:

¿Qué hay de Redux? ¿Puede Recoil reemplazar a Redux? Recoil es una biblioteca de gestión de estado para React. Es minimalista, similar a React y tiene una curva de aprendizaje fácil. Es una API sin plantillas y admite la definición de estado distribuido e incremental. Recoil también admite React suspense.

Y me gustaría mencionar que muchas veces cuando aparece un nuevo enfoque para la gestión de estado, mucha gente dice, bueno, entonces Redux morirá. Lo mismo ocurrió cuando se introdujo la API de contexto. Pero Redux está bastante vivo, y francamente, me gusta mucho Redux y estoy observando cómo evoluciona. Y he estado preparando una charla sobre Redux y cómo evoluciona, los kits de herramientas de Redux y todo eso.

Pero, ¿qué hay de Recoil? ¿Puede ser un reemplazo para Redux? Y el equipo de React dice que sí. Así que piensan que Recoil puede reemplazar completamente a Redux. Y según tengo entendido, incluso el creador de Redux, Danny Bramow, ¿lo conoces, verdad? Él suele decir que no le gusta Redux. Pero a mí sí me gusta. Pero también me gusta Recoil. Entonces, ¿qué hay de Recoil? Recoil es una biblioteca de gestión de estado para React. Es otra biblioteca de gestión de estado. Pero también es un conjunto de utilidades para la gestión de estado. Recoil nos proporciona un montón de hooks útiles y diferentes funciones de utilidad.

Ten en cuenta que Recoil es un conjunto de herramientas experimentales. Aún no se ha lanzado oficialmente, pero según tengo entendido, ya se utiliza en producción, muy a menudo. Sí, ¿cuáles son las ventajas de Recoil? Dicen que es minimalista y similar a React. Funciona muy bien con React y es minimalista. Pero no pienses que la biblioteca es pequeña. La biblioteca, incluso en comparación con Redux, es bastante grande. Pero minimalista significa que solo necesitamos un poco de código para comenzar a trabajar con Recoil. Tiene una curva de aprendizaje fácil. Podemos comenzar solo con átomos y selectores, y eso es todo. Es tan fácil. Además, es una API sin plantillas. Cuando la gente dice que no le gusta Redux, generalmente dicen que necesitas escribir mucho código para mantener el estado de Redux. Y Recoil también admite la definición de estado distribuido e incremental. Otra ventaja de Recoil es que podemos escribir nuestro sistema de gestión de estado como uno distribuido. Los átomos pueden estar distribuidos. Esto generalmente ayuda con la división de código, por ejemplo. Y Recoil también admite React suspense.

3. Introducción a Recoil y la aplicación ADHD MyWay

Short description:

Recoil es una biblioteca de gestión de estado para React. Es minimalista, similar a React y tiene una curva de aprendizaje fácil. Es una API sin plantillas y admite la definición de estado distribuido e incremental. Recoil también admite React suspense. ADHD es una organización y proyecto sin fines de lucro que ayuda a estudiantes con TDAH a obtener educación de manera más adecuada. Empresas como Amazon han apoyado el programa ADHD America. En nuestra aplicación de React, utilizamos Recoil para la gestión de estado. Podemos definir átomos y selectores para gestionar el estado de la aplicación. Recoil proporciona hooks como useRecoilValue y useRecoilState para leer y actualizar el estado. Para usar Recoil, debemos envolver nuestra aplicación en RecoilRoot. Recoil también admite la observación de eventos mediante el componente RecoilObserver.

Entonces, ¿qué es Recoil? He creado esta fórmula simple. Recoil es átomos más selectores más hooks más utilidades. ¿Qué son los átomos? Los átomos contienen la fuente de verdad para el estado de nuestra aplicación. Comparando con Redux, es como rebanadas de nuestro estado. ¿Y qué son los selectores? Los selectores representan una parte del estado derivado. Aquellos que solían usar Redux en sus aplicaciones, creo que ya usaron Redux y bibliotecas como reselect. Así que esta es una característica bastante similar.

¿Qué hay de ADHD? ADHD es una organización y proyecto sin fines de lucro. Fue iniciado por estudiantes que tenían TDAH y decidieron que los estudiantes que tienen TDAH necesitan ayuda para obtener educación de manera más adecuada. Así que decidieron hacer algo al respecto. Y empresas como Amazon, en realidad Amazon Web Services, decidieron ayudar a los estudiantes con esto. Entonces, un grupo de voluntarios de todo el mundo, junto con gerentes profesionales y desarrolladores de AWS, todos ayudamos al programa ADHD America a desarrollar la aplicación ADHD MyWay que debería ayudar a los niños a obtener educación de manera más adecuada y resolver problemas que tienen. En ADHD MyWay desarrollamos React y React Native, por lo que es una aplicación móvil, y pedí que se mostraran algunas diapositivas de la propia aplicación, y por cierto, aquí podemos ver un panel de control que los padres o maestros usarán, y también desarrollamos una aplicación móvil, y la aplicación móvil será utilizada principalmente por los niños, perdón, los niños. Y a la generación joven le gustan las aplicaciones móviles, sí, así que decidimos implementar exactamente una aplicación móvil. Y un momento interesante es que nuestro diseño, el diseño inicial, fue creado en Hackathons por estudiantes también. Entonces, en nuestra aplicación de React comenzamos a usar Recoil. Y aquí es cómo podemos usar Recoil en nuestro estado de vista de inicio de sesión, por lo que podemos ver que el estado de vista de inicio de sesión es solo un átomo simple. El átomo Key debe ser único. Y otra propiedad es una propiedad predeterminada, donde tenemos el estado de inicio de sesión inicial. Puede ser cualquier objeto de la porción de estado que crees para tu aplicación. Entonces aquí podemos ver algunos campos como nombre de usuario, contraseña, error de nombre de usuario y todo eso. Luego podemos usar este estado aprovechando el hook de Recoil useRecoilValue. Usamos useRecoilValue cuando solo necesitamos leer el estado y no queremos cambiarlo. Cuando queremos cambiar el estado de recoil, entonces usamos useRecoilState. Es bastante similar al hook useState de React. Por cierto, para usar Recoil, átomos de recoil y hooks, debes envolver tu aplicación en RecoilRoot. RecoilRoot proporcionará todos los contactos requeridos para todos nuestros componentes y así nuestros componentes podrán conectarse y suscribirse a las actualizaciones del almacenamiento. Por cierto, aquí, cuando usamos el hook useRecoilValue, no solo leemos el valor del estado sino que también nos suscribimos a los cambios de estado y cuando este estado se actualiza entonces todos los componentes que estaban suscritos a las actualizaciones también se actualizarán. Es genial ¿Qué hay de la observación de eventos? Aquí puedes ver que agregamos el componente RecoilObserver y en realidad es nuestro experimento sobre el uso de un patrón de observador para notificar

4. Recoil: Gestión de Estado y Pruebas

Short description:

Recoil es una biblioteca simple y potente de gestión de estado para React y React Native. Proporciona selectores para leer y modificar el estado, admite operaciones síncronas y asíncronas, e integra bien con React suspense. Recoil se puede utilizar tanto en aplicaciones de React como de React Native, lo que permite reutilizar fácilmente las configuraciones de estado. Las pruebas de Recoil son sencillas, con la capacidad de observar los cambios de estado y comparar instantáneas. En general, Recoil es una alternativa experimental pero prometedora a Redux.

todos los observadores que ha ocurrido alguna acción. Es bastante simple. Creamos un sujeto básico donde adjuntamos todos los observadores y utilizamos el método notify en este sujeto básico y notificamos a cualquier observador que ha ocurrido alguna acción, pero solo si el observador tiene el mismo tema. ¿Qué es el tema? El tema es simplemente una cadena simple, puedes verlo aquí, y es muy similar a los tipos de acción de Redux.

Selectores. Por supuesto, una de las grandes cosas de Recoil son los selectores, por lo que no necesitamos una biblioteca adicional de terceros, podemos usar los selectores tal cual, y como dije antes, los selectores representan el estado derivado. Podemos simplemente leer el estado o podemos leer y modificar algunos datos, por lo que podemos filtrar algo. Además, una gran ventaja aquí es que los selectores pueden ser síncronos y asíncronos, y es algo realmente bueno, y también se integra muy bien con React suspense. ¿Qué hay de la aplicación de React Native? Aquí puedes ver el estado de la vista de inicio de sesión para React Native, y es totalmente igual que el que usamos en la aplicación de React. Esto nos permite reutilizar toda la configuración de estado para las funciones de inicio de sesión, registro, olvido de contraseña y todo eso. Y luego podemos usarlo fácilmente en nuestra navegación, por ejemplo. Puedes ver que también usamos useRequireValue para obtener los datos y suscribirnos a las actualizaciones del estado. Lo mismo que necesitamos usar recoil route aquí también.

Antes de pasar a pruebas de recoil, me gustaría compartir un poco sobre la reutilización de la gestión de estado, en esta situación la gestión de estado con recoil en React Native. Tuve una buena experiencia moviendo características de estado compartido a una biblioteca separada, pero fue con Redux y ahora tenemos la idea de dividir lo mismo, quiero decir, extraer la gestión de estado que tenemos en las aplicaciones de React y React Native en una biblioteca separada y ya comenzamos a trabajar en esto, por lo que creamos una biblioteca que contendrá todos los átomos de recoil y también los selectores, todo lo que necesitamos para la función de inicio de sesión y autorización y todo eso, sí al menos extraemos una parte del estado sobre esas características que mencioné pero también continuamos buscando qué más podemos reutilizar sobre pruebas. Probar recoil es algo bastante sencillo, así que primero, recuerda usar recoil root en tus pruebas porque, por supuesto, necesitas envolver tu componente o aplicación con recoil root porque sin esto tendrás un error y primero, si necesitas probar algún componente de react, es decir, probar el átomo de recoil, me refiero al estado de recoil dentro del contexto del componente de react, entonces puedes usar el patrón de observador de recoil, no es parte de las utilidades de recoil, puedes crear un observador de recoil similar y luego puedes usarlo de esta manera y simplemente cambiar el estado y luego puedes observar qué estado se cambió y qué se cambió y y a veces necesitas probar tus selectores fuera del contexto de los componentes de react, por lo que puedes usar snapshot unstable. No estaba disponible en las primeras versiones de recoil, pero ahora está disponible y puedes generar instantáneas y luego puedes comparar el estado antiguo con el estado nuevo.

Entonces, un pequeño resumen. Recoil es una herramienta realmente buena pero aún experimental. Recoil se puede utilizar en react y react native. Antes, Redux era una herramienta muy famosa para aplicaciones de react native, pero hoy creo que ya tenemos una muy buena alternativa. Recoil es muy fácil de probar dentro de los contextos de react y fuera de ellos. Y en realidad me gusta mucho esta herramienta y es posible que en unos años realmente pueda reemplazar a Redux. ¿Qué opinas de esto? He compartido algunos enlaces aquí para que puedas consultar la documentación de recoil, es realmente buena y los autores de sus bibliotecas también han creado algunos videos de introducción sobre recoil y en los recursos de recoil.js puedes encontrar un enlace a un recurso bastante interesante sobre recoil, así que se creó un curso al respecto y es gratuito también estoy compartiendo un enlace al programa dhd america y un enlace a mi github donde planeo agregar el código simplificado, serán las mismas funcionalidades que usamos en react y react native en dhd pero por supuesto será simplificado y todos los datos relacionados con nuestro proyecto se eliminarán porque no proporcionamos nuestro código al público, al menos aún y gracias

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn