con ejemplos Si estás empezando a aprender React o ya llevas un tiempo usando esta librería, seguramente te has encontrado con algunos errores o advertencias relacionadas con funciones asíncronas, especialmente usando el hook . useEffect Cuando estaba aprendiendo la funcionalidad de este gancho, no podía entender la razón de usar el retorno en esta función, ya que en la mayoría de los casos no es necesario usarlo, y React funciona perfectamente sin él. A medida que me familiaricé con la forma en que funciona React y el ciclo de vida de los componentes, comencé a notar que, en muchos casos, es demasiado importante usar el retorno en el gancho , especialmente en los efectos secundarios. useEffect ¿Cuáles son los efectos secundarios? Un efecto secundario puede ser obtener datos de un servidor remoto, leer o escribir en el almacenamiento local, configurar detectores de eventos o configurar una suscripción. Estos efectos secundarios pueden ocurrir cuando se hace clic en un botón, se envía un formulario o cuando se monta y desmonta un componente. El gancho de React permite que los componentes funcionales hagan cosas cuando se monta un componente o cuando cambian algunas propiedades o estados. Este gancho también permite limpiar cuando el componente está desmontado. useEffect ¿Por qué limpiar los efectos secundarios? Manejar efectos secundarios en React es una tarea de mediana complejidad. Sin embargo, de vez en cuando, puede tener dificultades en la intersección del ciclo de vida del componente (representación inicial, montaje, uso, desmontaje) y el ciclo de vida de los efectos secundarios (iniciado, en curso, completo). Una de esas dificultades es cuando un efecto secundario se completa e intenta actualizar el estado de un componente ya desmontado. Esto provoca una advertencia de reacción como esta: Las fugas de memoria en las aplicaciones React son principalmente el resultado de no cancelar las suscripciones realizadas cuando se montó un componente antes de desmontarlo. Causan muchos problemas, incluyendo: Afecta el rendimiento del proyecto al reducir la cantidad de memoria disponible. Ralentización de la aplicación. El sistema falla. Por lo tanto, es necesario eliminar los problemas de pérdida de memoria. ¿Qué es la función de limpieza useEffect? Es una función del gancho que nos permite detener los efectos secundarios que ya no necesitan ejecutarse antes de desmontar nuestro componente. useEffect está construido de tal manera que podemos devolver una función dentro de él y esta función de retorno es donde ocurre la limpieza. useEffect Por ejemplo, el Componente A solicita a la API que obtenga una lista de productos, pero al realizar esa solicitud asíncrona, el Componente A se elimina del DOM (se desmonta). No es necesario completar esa solicitud asincrónica. Entonces, como método de limpieza para mejorar su aplicación, puede limpiar (cancelar) la solicitud asincrónica para que no se complete. : Función de limpieza de useEffect useEffect(() => { // Your effect return () => { // Cleanup } }, [input]) Limpiar un efecto Cancelación de una solicitud de recuperación Hay diferentes formas de cancelar llamadas de solicitud de búsqueda, podemos usar fetch o Axios AbortController AbortController. Para usar , debemos crear un controlador usando el constructor . Luego, cuando se inicia nuestra solicitud de recuperación, pasamos como una opción dentro del objeto de la solicitud. AbortController AbortController() AbortSignal options Esto asocia el controlador y la señal con la solicitud de búsqueda y nos permite cancelarla en cualquier momento usando : AbortController.abort() useEffect(() => { //create a controller let controller = new AbortController(); (async () => { try { const response = await fetch(API, { // connect the controller with the fetch request signal: controller.signal, }, ); // handle success setList(await response.json()); // remove the controller controller = null; } catch (e) { // Handle the error } })(); //aborts the request when the component umounts return () => controller?.abort(); },[]); useEffect(() => { // create a controller const controller = new AbortController(); axios .get(API, { signal: controller.signal }) .then({data}) => { // handle success setList(data); }) .catch((err) => { // Handle the error }); //aborts the request when the component umounts return () => controller?.abort(); }, []); Limpieza de tiempos de espera Cuando usamos las funciones de temporizador , podemos borrarlas al desmontar usando la función especial . setTimeout(callback, time) clearTimeout(timerId) useEffect(() => { let timerId = setTimeout(() => { // do something timerId = null; }, 3000); // cleanup the timmer when component unmout return () => clearTimeout(timerId); }, []); Intervalos de limpieza Al igual que los tiempos de espera, tiene una función especial para limpiarlos con la función . setIntervals(callback, time) clearInterval(intervalId) useEffect(() => { let intervalId = setInterval(() => { // do something like update the state }, 1000); // cleanup the timer when component unmout return () => clearInterval(interval); }, []); Limpieza de oyentes de eventos La limpieza de los oyentes se realiza a través de . La llamada debe hacer referencia a la función en la llamada para eliminar el oyente correctamente. window.removeEventListener removeEventListener misma removeEventListener useEffect(() => { // function to add to EventListener const handleKeyUp= (event) => { switch (event.key) { case "Escape": setCollapsed(true); break; } } window.addEventListener("keyup", handleKeyUp); // cleanup the listener when component unmout return () => window.removeEventListener("keyup", handleKeyUp); }, []); Limpieza de sockets web Cuando creas un conexión, puede cerrarla en la función de limpieza . WebSocket socket.close() useEffect(() => { const ws = new WebSocket(url, protocols) // do what you want with the socket ws.onmessage = (event) => { setValue(JSON.parse(event.data)); }; // cleanup the web socket when component unmout return () => ws.close() }, []) Conclusión Hemos aprendido que algunos efectos secundarios requieren limpieza para evitar pérdidas de memoria y comportamientos innecesarios y no deseados. Debemos aprender cuándo y cómo usar la función de limpieza del gancho para evitar estos problemas y optimizar las aplicaciones. useEffect Recomiendo limpiar los efectos asincrónicos cuando se desmonta el componente. Además, si el efecto secundario asincrónico depende de los valores prop o state, considere también limpiarlos cuando se actualice el componente. Espero que este artículo le haya resultado útil y que ahora pueda usar la función de limpieza correctamente. Lee mas: https://hackernoon.com/autocomplete-search-component-with-react-and-typescript?embedable=true También publicado . aquí

Assembly

Different

Fetch

Mozilla

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Making security fun one episode at a time

Funciones de limpieza en UseEffect Hook de React — Explicación

Demasiado Largo; Para Leer

Companies Mentioned

L Javier Tovar

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

Funciones de limpieza en UseEffect Hook de React — Explicación

Demasiado Largo; Para Leer

Companies Mentioned

L Javier Tovar

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

HISTORIAS RELACIONADAS