React Compiler
¿Adios a React.memo useCallback y useMemo?
En estos videos exploramos React Compiler y probamos sus optimizaciones comparandolo con métodos tradicionales como React.memo, useCallback y useMemo. A través de varios ejemplos, analizamos si el compilador nos ayuda a eliminar optimizaciones manuales o si en algunos casos aún las requieren.
El repositorio asociado a estos tutoriales
Temario
1 Creando el proyecto
Cuando trabajas con React y te hace falta meter optimizaciones de renderizado o incluso evitar que en algunos casos se te quede el código pillado, tienes que tirar de hooks como useMemo o useCallback y esto es un dolor, sobre todo si has tenido opción de probar nuevos frameworks como Svelte o Solid, ahí te habrás dado cuenta que esos hooks son ñapas manuales, ¿No hay forma mejor de gestionar esto? Pues sí, ... a la vez que React 19, el equipo de React, ha sacado una nueva herramienta que se llama React Compiler que se encarga de optimizar el código por ti y poder así olvidarte de esos hooks.
En este serie de ejemplos, vamos a probar varios ejemplos de optimizacíon que usamos en nuestra formaciones y ver que tal se comporta el React Compiler con ellos.
Cómo primer ejemplo, creamos un proyecto en blanco y le metemos soporte a React Compiler.
2 React Compiler vs React.memo
En el ejemplo anterior creamos un proyecto en blanco y le metimos soporte a React Compiler.
Ahora vamos a ver como podemos optimizar a la antigua un componente con React.memo y ver que pasa si metemos el complicador en el proyecto.
3 Adios useCallback, React Compiler lo hace por ti
En ejemplo anteriores vimos como instalar el compilador de React y como optimizar un componente con React.memo.
Vamos ahora a ver si también podemos quitarnos de enmedio useCallback.
4 React Compiler elimina useMemo ¿De verdad lo necesitamos?
Seguimos con esta serie de ejemplos probando el compilador de React, y ahora le toca el turno al primo hermano de React.memo, useMemo , ese hook que nos permite memorizar el resultado de una función y evitar que se recalcule en cada renderizado.
5 React compiler NO puede optimizar esto
Vamos con un ejemplo en el que el compilador ya no nos puede ayudar... claro que tampoco es adivino y son los useMemo con una condición compleja en el predicado.