Trampas de UseEffect para los programadores de React

Oh, recuerdo lo emocionada que estaba la comunidad de React cuando aparecieron en la versión 16.8. Los desarrolladores estaban obsesionados con ellos: estaban experimentando con ganchos personalizados y dispuestos a reescribir todos los Classcomponentes y comenzar desde una nueva página.

Hay muchos ejemplos en Internet donde las personas muestran lo increíbles que son los ganchos y cómo simplifican nuestras vidas al permitir extraer una lógica común. Aún así, debemos recordar que los ganchos pueden hacer que nuestro código sea extremadamente ilegible e impredecible si los usamos mal.

No me malinterpreten, me encantan los ganchos y tengo muchos personalizados que uso mucho. Pero desafortunadamente, en el trabajo, a menudo veo cómo los nuevos programadores de React luchan por comprender por qué useEffectestá causando bucles infinitos o cómo lidiar correctamente con su matriz de dependencia.

Estas son las dificultades más comunes que puede enfrentar al usar useEffect.

Deja que ESLint te ayude

Una de las cosas esenciales useEffectes la matriz de dependencia. Define cómo useEffectse comportará: se activará en el montaje del componente, cambiará algún valor en el estado o incluso en cada renderizado.

A veces useEffectse comporta de manera impredecible debido a dependencias incorrectas. Para evitar estas situaciones, use eslint-plugin-react-hooks porque no queremos mentir sobre las dependencias.

Por ejemplo, tengo un componente elemental, que obtiene un texto de los accesorios e intenta buscar artículos por el texto dado. Quiero obtener datos cuando el componente se monta por primera vez. Para eso, necesito useEffectuna matriz de dependencia vacía.

Llamar getArticlesdesde useEffectcrea una advertencia porque getArticlesusa el valor de props.

Demasiado.

Bien, entonces no mentimos sobre las dependencias y acordamos agregar todas las variables y funciones necesarias a la lista. ¿Y qué obtenemos?

¡Otra advertencia!

Entonces, debido a nuestro mensaje, nuestra función se vuelve a crear en cada renderización que pueda activar el useEffectgancho; eso no es lo que necesitamos, así que la pregunta es: ¿cómo solucionarlo?

Aquí tenemos las siguientes opciones:

1. Para definir una función dentro de useEffect.
2. Para envolver la función en un useCallbackgancho.

Bucle infinito

Desafortunadamente, esta situación ocurre muy a menudo. Por ejemplo, dentro useEffectde , intentamos cambiar algún valor en el estado en función de su valor anterior y debemos agregar este valor a la matriz de dependencia.

Y luego, obtenemos un bucle infinito porque useEffectse activa después de cada renderizado y detecta que el valor del estado cambia, por lo que intenta cambiarlo repetidamente. Suena simple y lógico, pero es un escollo para muchos programadores.

¿Qué podemos hacer?

1. Actualice el estado a través de una función desde el useStateenlace useEffectsin dependencias.
2. Utilice el envío desde el useReducergancho para actualizar el estado.

La forma más sencilla de controlar el estado del componente es usar el useStategancho, pero si su estado se vuelve más complicado, debe intentarlo useReducer. La sintaxis es muy similar a useState, pero tiene una función en la que puede definir cómo cambiará el estado del componente en diferentes casos.

En primer lugar, es más fácil definir cómo cambia el estado dependiendo de las acciones. En segundo lugar, use la dispatchfunción, que no se cambia durante las renderizaciones. Esto es beneficioso cuando usa matrices de dependencia.

Importante recordar

1. useRefy dispatchno cambie durante las renderizaciones. Es por eso que puede usarlos de manera segura useEffecty useCallbacksin estresarse por provocar renderizaciones innecesarias.
2. Puedes tener tantos useEffectganchos como necesites; es mejor no complicar las cosas y no intentar poner toda la lógica posible en un turno. Es difícil de leer y probar.
3. Una secuencia de useEffectganchos es import. Se activarán uno tras otro.
4. Las funciones y variables definidas fuera del componente (no de accesorios) nunca activarán el useEffectgancho y no es necesario agregarlas a la matriz de dependencia.
5. Si su useEffectenlace necesita una función en la matriz de dependencias y no puede definirla en el useEffectcuerpo, envuélvala con useCallback. Si proviene de props, ese envoltorio debe hacerse donde se define la función.

Además, consulte la documentación de React . Esta versión es fantástica. Puedes encontrar mucha información útil.

Eso es todo acerca de la gestión de useEffectdependencias. Espero que estos consejos sean útiles.