¿Por qué React 18 llama dos veces a useEffect?🙄
leobar37
Posted on June 18, 2022
React planea agregar una característica que permite agregar o remover secciones de la interfaz, preservando el estado.
En la documentación hay ejemplo de tabs, cuando usuario se mueve a una determinada tab y vuelve a la anterior. React debe mostrar inmediatamente el anterior Tab, para que esto sea posible React admite volver a montar el árbol del componente, reutilizando el mismo estado usado antes de que se desmonte de la interfaz
Con esta característica React tendrá un mejor rendimiento, todo esto sería manejado internamente por React, pero para hacer esto posible, necesita que los componentes sean resistentes a los efectos que se montan y se desmontan varias veces. Los desarrolladores tendrían que tener consideración esto al escribir código, asegurarnos de cualquier código que este dentro del efecto no cause fugas de memoria o comportamientos no deseados cuando el componente se vuelva montar reutilizando el estado, por ejemplo, tener una suscripción doble a una misma fuente o timers que no se han limpiado.
Esto puede ser un poco confuso para las personas que recién empiezan a utilizar React, porque normalmente se dice que el array de dependencias vacío, solo sucederá una vez, ahora esto no es del todo cierto, ya que en ciertos casos el componente se va a montar dos o más veces utilizando el mismo estado como el caso de los tabs por ejemplo.
Para ayudar a afrontar estos problemas, React Strict Mode ahora tiene una nueva validación que monta y
desmonta el componente automáticamente después de montarse por primera vez, restaurando el primer
estado en la segunda vez ayudando a detectar efectos secundarios inesperados.
Una pregunta que se me vino a la mente cuando me encontré con esto, fue, ¿las peticiones a la Red, se harán múltiples veces?. Y la la respuesta es que en desarrollo esto siempre sucederá (con el modo estricto) y en producción sucederá en casos como el mencionado anteriormente, de todas maneras deberíamos evitar de usar el patrón de hacer peticiones durante el ciclo de eventos de React (fetch-on-render) o similares y utilizar los nuevos métodos empleados en librerías como react-query que proveen una mejor manera de hacer peticiones a la red y además se integran con Suspense.
Si quieres saber más acerca de esto, puedes visitar los siguientes enlaces.
Posted on June 18, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.