React Hooks: Optimizando useEffect (o Effect Hook)

Durante el último tiempo hemos utilizado un montón los Hooks de React en Get on Board (especialmente useEffect y useState) y he aprendido algunos detalles sobre condiciones y optimización que no son tan explícitos en la documentación. Acá explicaré un poco más extendidamente el arreglo que se pasa como segundo argumento (y que es opcional) para evitar ejecutar useEffect en cada re-render. Además explicaré cómo se trabajan las condiciones con este Hook.

Segundo argumento de useEffect (arreglo opcional)

1. Los arreglos pueden tener más de un valor 😱

En la documentación nos dicen que gracias a este argumento podemos ejecutar useEffect sólo cuando el valor del segundo argumento cambie, pero no nos explican qué pasa si a este arreglo está compuesto por más de un valor: ¿Deben cambiar todos o algunos valores para que se ejecute useEffect? La respuesta es “se ejecutará si cambia CUALQUIERA de los valores”, ya que la evaluación de estos cambios se interpreta como un or y no como un and de los items.

useEffect(() => {
   // Do something
 }, [firstValue, secondValue]);


// "Do something" will be executed 
// every time that firstValue OR secondValue change
// because if any value change we are getting a different array

2. Ejecuta useEffect sólo una vez

Este es un truco sencillo, para esto sólo se debe pasar como segundo argumento un arreglo vacío.

useEffect(() => {
   // Do something
 }, []);
 

 // Just the first render every time this component is mounted

3. Precauciones

A veces utilizamos un valor del estado global de la aplicación (por ejemplo el estado de Redux) para agregar como un segundo argumento de useEffect y esperar que este último se ejecute sólo cuando dicho valor cambia. Cuando utilizamos este recurso, hay que tener en mente que un objeto del estado puede cambiar por otro con exactamente el mismo valor, lo que es interpretado como un cambio de todas maneras, generando una ejecución innecesaria de useEffect .

Esto es una consecuencia no tan relevante, pero que puede ser un dolor de cabeza si estás esperando que tu efecto se ejecute cuando cambia el contenido del valor que estás escuchando.

Condicionales

Si necesitas que el código de este hook se ejecute cuando algo dentro de tu programa tiene un determinado valor y necesitas agregar una condicional esto siempre debe ser declarado dentro del Hook.

Esto es muy útil cuando uno quiere ejecutar una función que traerá más datos a nuestro estado general de la aplicación, pero sólo vale la pena ser ejecutado la primera vez que se monta ese componente y este valor aún no existe.

// GOOD! Place the condition inside the Hook
 useEffect(() => {
   if (posts === null) {
     // This will run only if posts are not still fetched.
     // If you mount this component more than once,
     // the request won't beexecuted again
     getPosts();
   }
 }, []); // Besides, with the empty array this Effect just run once
 

 
 // BAD! Wrapping the Effect insithe the condition
 if (posts === null) {
   useEffect(() => {
     getPosts();
   }, []);
 }

Conclusión

Estos Hooks cuentan con buenas técnicas de optimización que no están tan documentadas, pero que igual están ahí esperando a que las descubramos para mejorar el rendimiento de nuestras aplicaciones.

Los Hooks son una poderosa herramienta que nos ayudan a considerar utilizar simples funciones en vez de complejas clases, lo que ayuda un montón a mantener un código más limpio y sencillo.

Si tienes dudas, sugerencias, aclaraciones o correcciones estoy feliz de que me escribas o comentes :)

⭐️ Encuentra los mejores empleos en programación en getonbrd.com