No sabemos cómo funcionan los React State Hooks

¡Hola! Esto es No Sabemos Cómo Funcionan las Herramientas de React Staytools. Mi nombre es Adam Klein y estoy transmitiendo desde Tel Aviv, Israel.

Tomemos este código, que utiliza un estado inicializado en 0, que es un contador. Y tenemos un botón que tiene un controlador de eventos onClick. El controlador de eventos onClick llama a setCounter, que es la función setState, y pasa una función de actualización que incrementa el valor en 1.

Veamos qué sucede cuando llamamos a setCounter. Ahora, probablemente sabes que React gestiona el estado de los hooks por nosotros fuera del componente. Y lo que solía pensar que sucede es que llamamos a setCounter. React toma el estado actual del hook, que en nuestro caso es 0, llama a nuestra función de actualización que devuelve 1, y actualiza el estado del hook al nuevo valor, que es 1. Y luego vuelve a renderizar nuestro componente. Y la función de renderizado llama a useState que obtiene el nuevo valor, que es 1, y el componente se vuelve a renderizar. Esto es bastante sencillo, excepto que está equivocado.

Entonces veamos qué hace realmente React, y esta es una versión simplificada. De hecho, cada hook tiene su propia cola de actualización donde React guarda todas las acciones pendientes para este hook. Entonces, cuando llamamos a setCounter, React simplemente agrega la actualización a la cola. Agrega una acción. ¿Qué es la acción? Lo que sea que hayamos pasado dentro de setState, que puede ser una función o un valor, o en el caso de los reducers, es la acción que hemos despachado. Y luego programa un nuevo renderizado, lo que significa que cambia una bandera que indica que este componente necesita ser renderizado nuevamente. Y puede haber más actualizaciones para este hook, u otros hooks, o hooks en otros componentes. Y finalmente, React decide volver a renderizar. Y luego vuelve a renderizar todos los componentes según su orden dentro del árbol. Entonces, ¿cuándo decide React volver a renderizar? Hablaremos de eso en la última parte de esta charla.

Entonces, eventualmente volvemos a renderizar. Llamamos a useState durante el renderizado. Y solo entonces, durante el renderizado, React realizará las actualizaciones dentro de la cola de este hook. Toma la primera acción, le da el valor anterior, obtiene el nuevo valor, que es 1. Y si hay más acciones, continúa con la siguiente acción y las realiza una por una. Y luego pasa a la siguiente instrucción en nuestra función de renderizado. Esto se llama una actualización perezosa. Lo que significa que React solo realiza el trabajo cuando se necesita el resultado del trabajo. Y todo lo que digo sobre useState se aplica también a useReducer porque, de hecho, useState utiliza useReducer. Por lo tanto, es el mismo mecanismo detrás de escena.

Ahora te preguntarás, ¿qué pasa con la cancelación del renderizado? Entonces, si React solo calcula el nuevo estado durante el renderizado, ¿cómo puede cancelar el renderizado si el nuevo estado es diferente al estado anterior? En este caso, tenemos un estado que comienza desde cero. Y si lo actualizamos a cero, esperaríamos que React no vuelva a renderizar nuestro componente. Resulta que en realidad hay otro paso que a veces React decide tomar para esta optimización, que es calcular ansiosamente el nuevo estado inmediatamente cuando llamamos a la función setState. Y luego, si el nuevo estado es igual al estado anterior, no programa un nuevo renderizado. Y si son diferentes, entonces continúa normalmente, pero almacena en caché el resultado del cálculo dentro de la cola de actualización para que podamos usarlo más tarde cuando rendericemos el componente. Entonces el ciclo continúa, llegamos a la función de nuevo estado, React realiza las actualizaciones dentro de la cola, y si la acción ya tiene un resultado en caché, lo utiliza y actualiza el estado del hook. Así que tenemos estos dos modos, perezoso o ansioso. Con el modo perezoso, React solo realiza las acciones cuando se necesitan, y con el modo ansioso, se realizan inmediatamente. El modo perezoso se utiliza para ahorrar cálculos redundantes y posponerlos, y el modo ansioso se utiliza para cancelar y ahorrar re-renderizados redundantes.

Y la parte final es ¿cuándo decide React volver a renderizar? Cuando tienes controladores de eventos, por ejemplo, en clic, React los ejecuta dentro de algo que llaman un lote. Y dentro del lote, todas las actualizaciones se encolan. En este caso, tenemos dos llamadas a setCounter, ambas se encolan. Y cuando la función se completa, el lote termina y React vuelve a renderizar. Entonces, en este caso, tenemos dos actualizaciones en la cola y un re-renderizado. ¿Y qué pasa con los controladores de eventos asíncronos? Con este ejemplo, la función se completa antes de que se complete la operación asíncrona. Entonces, en este caso, cuando llegamos a setCounter, ya estamos fuera del lote, lo que significa que desencadenará un nuevo re-renderizado inmediatamente después de llamar a setCounter. Entonces, en este caso, tendremos dos llamadas a setCounter y dos re-renderizados del componente. Y ahora, hay formas de invocar manualmente el lote, pero no hablaremos de ellas durante esta charla. Entonces, de hecho, hemos terminado. Espero que hayas disfrutado. Espero que hayas aprendido algo nuevo y recuerda que siempre puedes abrir el código fuente de los Hooks de React. Si te resulta difícil, puedes contactarme y te ayudaré. Y si tienes alguna otra pregunta, estaré encantado de responder en el canal de Discord. Espero que tengas una buena conferencia y te mantengas seguro y espero verte a todos cara a cara pronto. Adiós. Adiós.