Gotta Go Fast: React at 60 FPS

Hola, hola a todos. Hola, React Summit. Soy Rachel Kaufman. Hoy voy a hablar sobre cómo animar en React sin usar ninguna biblioteca y obtener un rendimiento realmente bueno de 60 fotogramas por segundo. También podrían estar involucrados espías. Esto es algo que cuando me lo pidieron por primera vez, no pensé que fuera posible, porque React está diseñado para renderizar bastante rápido, pero no necesariamente tan rápido. Y luego le conté a otras personas sobre lo que iba a hacer, y también dijeron que no se podía hacer. Y luego seguimos adelante y lo hicimos.

Primero lo primero. Obtén el código fuente. Escanea este código QR. Esto te llevará a un repositorio donde puedes obtener una copia de estas diapositivas. Una versión más larga, de hecho, y también algo de código de demostración en Playground para que puedas experimentar con algunos de estos conceptos, así como enlaces a otros recursos que podrían ser útiles. Mostraré este código QR nuevamente si te lo perdiste. Muy bien. Así que aquí está nuestra misión. Vamos a obtener animaciones rápidas. Vamos a usar React. Hay razones por las que queremos hacer esto. Y vamos a hacer que se vea bastante bien. Y no vamos a usar animaciones CSS.

Me encantan las animaciones CSS. Son increíbles. Este es el ejemplo más mínimo de lo que puedes hacer en CSS. Obviamente puedes hacer cosas increíblemente complejas, pero las animaciones CSS dependen de que sepas qué va a suceder, ¿verdad? El botón es pequeño y luego se hace grande. El botón es transparente y luego se vuelve opaco. Como puedes ver en este GIF a la izquierda, estamos usando datos de cámara en tiempo real que son completamente impredecibles, por lo que no podemos usar CSS. Así que un poco de contexto. Soy ingeniera de software en una empresa de martech durante el día. Por la noche, soy agente secreta o simplemente freelancer.

Y ocasionalmente experimento con malas ideas. Así que he tenido un cliente. Este cliente estaba trabajando para un museo en DC, en Washington, DC, llamado el International Spy Museum. Es un museo increíble. Está dirigido por verdaderos ex espías. Y el museo quería que este cliente construyera un interactivo que enseñara a los visitantes del museo y a los niños sobre el reconocimiento facial. Y ese cliente vino a mí y me pidió que construyera el front end en React. Y dije, claro, eso suena absolutamente genial. Quiero hacer eso. También debo mencionar que este cliente era mi esposo, así que no podía decir que no, pero realmente quería ser parte de este trabajo.

Así que creo que un video realmente explicará lo que estábamos tratando de hacer aquí. Así que nota que esto es un poco antes de que la exhibición del museo se abriera. Todavía se está instalando. Está muy oscuro en el museo. Así es como siempre es el museo. Así que verás cómo funciona esto y lo que estábamos tratando de hacer. Así que esta es la animación, y estamos poniendo líneas tipo CSI en la cara de alguien. Este es un video pre-renderizado. Estaba tan emocionada de ser emparejada con el Almirante Hopper. Eso nunca había sucedido realmente en las pruebas.

Así que no voy a pasar demasiado tiempo en la arquitectura, pero como puedes ver, es una aplicación bastante compleja. Básicamente, me gustaría señalar que el front end está manejando video en vivo de tres cámaras separadas y algo así como 20 estados generales diferentes, de los cuales solo algunos de estos se muestran aquí. Ahora, nada de esto es ciencia espacial, pero cuando me pidieron que ayudara a trabajar en este proyecto, pensé que preferiría hacer esta gestión de estado compleja en React en lugar de Vanilla.js. Reconozco que hay un movimiento general para alejarse de los frameworks cuando sea posible, pero React está un poco construido para manejar estados de UI complejos, así que realmente quería usarlo para eso. Aún así, la gente decía que no debería hacerse en React, y eso es justo.

Como dije, a un alto nivel, tienes el DOM virtual de React. Está ejecutando diferencias cada vez que algo cambia para decidir qué necesita cambiar. Y eso no es lo suficientemente rápido para hacer una animación fluida. Además, si hubiera una biblioteca que pudiera manejar todo esto por mí, habría sido una decisión obvia. Simplemente arrastraría y soltaría y estaría listo. Hasta donde yo sé, esa biblioteca no existe. Pero aún queríamos usar React. Así que número uno, de nuevo, gestión de estado complejo. Bien. Decisión obvia. En segundo lugar, esto ni siquiera es un sitio web. ¿Por qué construimos esto en un navegador en absoluto? Podríamos haber usado Pygame o TouchDesigner o cualquier tipo de cosa que esté construida solo para una interacción de museo. Pero con los navegadores modernos, obtienes aceleración de GPU gratuita sin tener que hacer nada, y creo que obtuvimos un impulso de rendimiento de eso. Y finalmente, sí, soy diseñador web. Conozco React. Es como mi especialidad. Y así quería usar las herramientas que me eran familiares. ¿Recomendaría aprender React desde cero solo para convertirlo en un motor de animación? Probablemente no. Pero si ya conoces React, bien podrías ser capaz de hacer que haga algo genial como esto.

Así que en conclusión, si tienes una UI compleja, y tal vez solo una pequeña parte de ella es la animación, y los datos que estás tratando de animar son algo como datos de cámara, datos meteorológicos, datos del mercado de valores, cualquier cosa que sea impredecible y se transmita desde el backend, y no puedes usar CSS, podrías querer probar estas técnicas. Así que aprendí mucho durante este proyecto, y trataré de destilar mis pensamientos en alrededor de tres puntos principales. En primer lugar, vamos a hacer bucles rápida y educadamente. Vamos a usar el request animation frame. En segundo lugar, vamos a dibujar usando un canvas HTML, y hay algunos trucos para hacer que eso funcione con React. Y vamos a prevenir re-renderizados usando Memo. Finalmente, hablaré sobre algunos consejos de depuración, porque inevitablemente no funciona en el primer intento. Bien, un rápido punto de orden. Ya he dicho renderizar mucho hoy, y voy a seguir diciéndolo. Pero debes saber que renderizar significa dos cosas diferentes hoy. Renderizar en el sentido de animación significa poner algo en una pantalla para mostrar una animación.

Render en el sentido de React significa poner un componente en el DOM por primera vez o volver a renderizarlo. Voy a decir montar y volver a renderizar. La forma en que obtienes el mejor rendimiento de animación en React es renderizar en el sentido de animación, 60 fotogramas por segundo, y renderizar en el sentido de React lo menos posible.

Muy bien, hablemos de request animation frame. Si fueras a ejecutar algo en JavaScript o React a intervalos regulares, podrías pensar que lo que quieres hacer es usar set interval, está justo en el nombre. Sin embargo, esto no es ideal para la animación. La razón es que cuando llegas a milisegundos, set interval es más una sugerencia que un comando exacto. Así que si dices que quieres que algo suceda cada 16 milisegundos, podría ser ligeramente más rápido, podría ser ligeramente más lento. Esto ni siquiera tiene en cuenta el hecho de que si tu animación tiene demasiadas cosas en ella y se acumula, entonces tienes fotogramas saltados o jank.

Además, en navegadores más antiguos, si abandonas la pestaña, el intervalo seguirá ejecutándose, continuando usando CPU y memoria. Sin embargo, ahora tenemos request animation frame. Esta es una API de navegador antigua, debería usarse mucho más. Básicamente está sincronizada mágicamente con la tasa de refresco de la pantalla del cliente, por lo que sabe exactamente cuándo el navegador está a punto de hacer un repintado y ejecuta su lógica entonces. Eso significa que si de alguna manera logras llamar a request animation frame dos veces en 16 milisegundos, aún así solo se ejecutará una vez. Si se salta un fotograma, en realidad se adelantará para ponerse al día, por lo que la animación se ve más suave. Y a diferencia de set interval, se pausará automáticamente si el usuario abandona la pestaña, por lo que estás ahorrando memoria y CPU para tus usuarios. La sintaxis es un poco más complicada si nunca la has usado antes, pero esencialmente en la línea cinco, simplemente configuramos el bucle llamando a request animation frame con una función como callback.

Y luego nuestra función draw solo tiene lógica de animación aquí, y luego llamamos a request animation frame una segunda vez con ella misma como parámetro. Eso es todo. Es muy fácil.

Ahora, con React, especialmente si quieres que una animación siga funcionando para siempre, necesitas tomar algunos pasos adicionales. He envuelto todo en un hook use effect con un array de dependencias vacío. Eso significa que se ejecutará una vez cuando el componente se monte.

Luego nuevamente, tenemos nuestra función draw con algo de lógica de animación, y almacenamos el valor de retorno de request animation frame en una variable, y luego podemos aprovechar la función de limpieza de React cuando el componente se desmonte para cancelar todo. De lo contrario, podríamos tener una fuga de memoria.

En la última página, tenía un comentario que solo decía lógica de animación aquí. Entonces, ¿qué significa eso realmente? ¿Qué va en ese bucle? Así que, vamos a usar un canvas. Ahora, canvas es la columna vertebral del dibujo en la web. Puedes usarlo para dibujar líneas, formas, renderizar bitmaps. Está en todo tipo de bibliotecas populares. PhaserJS lo usa para videojuegos. P5 lo usa para codificación creativa. Incluso está en Figma bajo el capó con algunas optimizaciones realmente geniales para hacerlo súper rápido. Básicamente, está en todas partes.

Y lo vamos a usar para nuestra animación también. Ahora, tenemos que usar un ref para acceder a él. Y aquí es donde los puristas podrían decir que estoy haciendo trampa. Ya no estoy animando en React. Estoy animando fuera de React. Creo que la mayoría de las personas aquí han usado refs antes, pero muy rápidamente, son salidas de escape para React para obtener acceso directo al DOM a los nodos que gestiona. A menudo los usamos para cosas como establecer el foco, desplazarse a un nodo específico, ese tipo de cosas. Y también es perfecto para dibujar en un elemento canvas.

Si hiciéramos esto, podríamos crear un componente canvas en React que simplemente envuelve un elemento canvas HTML estándar con un ref en él. Luego podemos usar el hook ref para obtener acceso a ese nodo y usar un efecto para obtener el contexto del canvas, que son solo las propiedades que usamos para dibujar y almacenarlo en el estado. Una vez que lo tenemos en el estado, podemos hacer otras cosas. Entonces, ¿cómo dibujamos realmente? Entonces, digamos que tenemos una lista de puntos, por ejemplo, así. Y luego podemos hacer cosas al contexto. Entonces, en este caso, estamos configurando el estilo de trazo del contexto a azul claro. Estamos comenzando un camino, y luego simplemente le decimos a nuestro lápiz que se mueva a un punto específico.

Y luego, esencialmente, para cada punto en la lista, simplemente iteramos a través de él y dibujamos una línea, y luego aplicamos un trazo. Básicamente es conectar los puntos. Y si hiciéramos esto, obtendríamos un triángulo. Bastante impresionante.

Ahora, digamos que queremos hacer algo más complicado. Queremos animarlo, y queremos que esté en React. Este es el último ejemplo de código, y también es el más largo. Aquí tenemos nuestro hook useEffect, igual que lo que viste antes en la sección de request animation frame. Y dentro de él, tenemos nuestra lógica de animación.

Ahora tenemos una función de dibujo. La diferencia aquí es que almacenamos nuestros datos de puntos en un ref llamado faces ref. No estaba familiarizado con el uso de refs para mantener variables en lugar de referencias a nodos. Hay un enlace a más información donde puedes obtener información sobre esto en el código QR que escaneaste anteriormente. Así que simplemente verificamos que hay datos en este ref, que los hay, y luego vamos a limpiar todo el canvas para que podamos hacer un nuevo cuadro. Porque si estamos animando, queremos que comience de nuevo cada vez. Y luego es como viste en la diapositiva anterior. Comenzamos el camino, iteramos a través de los puntos y los dibujamos, y luego aplicamos un trazo.

Aquí tenemos nuestro bucle de request animation frame. Tenemos una función llamada render y request new frame que llama a nuestra lógica de dibujo. Enviamos un mensaje al back end para solicitar el siguiente frame. Y luego simplemente llamamos a request animation frame con esta función como parámetro, y eso es todo. De manera similar, tenemos un cancel animation frame en la función de limpieza para que todo se mantenga ordenado.

Ahora, lo último que tienes que hacer, dije que queremos prevenir re-renders. Vamos a usar memo. Ahora, esto es ligeramente diferente del hook use memo. Es un contenedor que evita que los componentes se re-rendericen innecesariamente. Así que por defecto, si un componente padre en React se re-renderiza, sus hijos se re-renderizan todos. Con memo, los hijos solo se re-renderizan cuando sus props cambian. Así que esto suena increíble.

Por cierto, si has estado usando React durante mucho tiempo, esta es la nueva versión de componentes que debería actualizar desde los componentes de clase. Ahora, esto suena genial. Parece que deberíamos hacer esto en todas partes, pero por supuesto, si React tiene que calcular si o no re-renderizar el componente, eso puede ser más costoso que simplemente realizar un re-render. Sin embargo, en nuestro caso, nuestro componente padre podría estar re-renderizándose mucho, y no queremos realmente cambiar lo que está sucediendo con nuestro canvas. Así que queremos memoizar eso. Solo lo re-renderizamos si realmente lo necesitamos.

Además, solo voy a señalar que, si estás usando React 19 o superior, hay un plugin llamado React Compiler que podría manejar todo esto por ti. No sabía sobre esto en el momento de este proyecto, así que no pude usarlo. Siento que vale la pena mencionarlo, porque se supone que maneja automáticamente todas estas decisiones. No me sorprendería si esta sección fuera completamente obsoleta en unos años.

La sintaxis para memo es súper fácil. Básicamente, solo tienes tu componente, y cuando lo exportas, simplemente lo envuelves en memo. Puedes envolverlo como quieras, pero esta es la forma más fácil para mí de hacerlo. Nuevamente, es tan fácil que te sentirías tentado a hacerlo en todas partes, pero ten cuidado.

Hablemos de algunas herramientas útiles de depuración, porque nunca va a funcionar a la primera intento. El primer lugar al que vas a mirar, por supuesto, es DevTools de Chrome. La pestaña de memoria, hay muchas cosas aquí. Ciertamente no soy un experto en ello. Si recién estás comenzando en el mundo del perfilado, como yo, iría a la sección de asignaciones en la línea de tiempo, presionaría grabar por unos segundos, dejaría que corriera, y luego obtendrías algo que se ve así.

Nuevamente, a un nivel muy básico, estaba buscando dos cosas. Estaba buscando fiber aquí, fiber siendo el motor de reconciliación interno de React. Si vemos eso, significa que React está haciendo demasiado trabajo, porque, nuevamente, no queremos estar re-renderizando mucho, queremos dejar que el canvas haga el trabajo por nosotros, y estaría buscando fugas de memoria. Así que si esta parte gris sigue subiendo, en lugar de mantenerse relativamente estable, sabemos que podríamos tener un problema. Chrome tiene una paleta de FPS. Si abres DevTools y presionas Control-Shift-P, el mismo comando que en VS Code para abrir la paleta de comandos, puedes simplemente escribir FPS, y aparecerá esta pequeña caja, y es maravillosa. Te dice en cualquier momento que tu animación se está ralentizando. Esto también nos muestra que estamos obteniendo nuestra aceleración de GPU, y que tenemos suficiente memoria restante. Hermoso. Finalmente, si todo lo demás falla, tienes console.time y time.

end. A la gente le gusta burlarse de los desarrolladores front-end por usar en exceso los registros de consola, pero funcionan, y console.time y time.end son como el primo raro de console.log. Así que si llamaras a console.time con algún tipo de cadena en él, y luego realizaras una operación costosa, y luego llamaras a console.time.end con la misma cadena, obtendrás un tiempo exacto de cuánto tiempo tomó esa operación.