Gancho React useEffect(): uso, cómo y cuándo usarlo

Introducción al Hook useEffect()

Useeffect enganchar un componente clave.Maneja tareas como la obtención de datos, la configuración de detectores de eventos o la modificación del DOM y permite a los usuarios realizar efectos secundarios utilizando componentes funcionales. También controla el ciclo de vida de los componentes.

Elgancho useeffect aprovecha dos argumentos, una función y una matriz de dependencia opcional.La función pasada como el primer argumento se ejecuta después de la representación inicial del componente y luego nuevamente después de cada actualización. Puede indicar las variables de las que depende un efecto utilizando la matriz de dependencia. Se realiza una nueva ejecución del efecto si cambia alguna de las variables de la matriz de dependencia.

Intrínsecamente, elenlace useeffect se creó para abordar los desafíos que se enfrentan en el ciclo de vida de los componentes de la clase ES6.Sin embargo, ahora se ha convertido en uno de los conceptos básicos de reacción.

Con este resumen sobrequé es useeffect en react , veamos ahora su sintaxis.

Sintaxis básica del Hook useEffect()

useEffect admite dos argumentos ; el segundo argumento es opcional. La sintaxis es la siguiente:

useEffect(<función>, <dependencia>)

La función incluye la lógica de efectos secundarios. Provoca la ejecución de una devolución de llamada directamente después de la actualización del DOM.

La dependencia contiene una matriz opcional de dependencias de sus efectos secundarios, es decir, valores de estado y accesorios. Tenga en cuenta que elgancho de efecto de uso ejecuta la devolución de llamada solo si las dependencias han cambiado durante las representaciones.

La sintaxis sirve al único propósito de useEffect(). Le permite colocar su lógica de efectos secundarios dentro de la función de devolución de llamada y luego usar el argumento de dependencias para controlar cuándo necesita que se ejecute el efecto secundario.

Puede considerar la siguiente sintaxis al implementar useEffect() Hook:

// importar useEffect

importar { useEffect } de 'reaccionar';

function MiComponente() {

// lo llama por encima del JSX devuelto

// le pasa dos argumentos, es decir, una matriz y una función

usarEfecto(() => {

// función de efecto

retorno () => {

// función de limpieza

};

}, [/* matriz de dependencias */]);

// lógica de representación de componentes

}

}

Consulte nuestroscursos de tecnología gratuitospara obtener una ventaja sobre la competencia.

Montaje y desmontaje de componentes con useEffect() Hook

Montaje

La etapa inicial del ciclo de vida de un componente React implica crear e insertar componentes en el DOM. Esta etapa del ciclo de vida del efecto de uso de reacción incluye el método de ciclo de vida de componenteDidMount, que se ejecuta cuando se monta el componente.

Aquí hay un ejemplo de componentes de montaje usando el gancho useEffect().

componenteHizoMontar() {

console.log(“El componente se montó con éxito”);

este.setState({

cargado: cierto

})

}

En el ejemplo anterior, componentDidMount le permite usar setState. Por lo tanto, puede configurar y cambiar fácilmente el estado en el método del ciclo de vida. El método correspondiente emplea llamadas API, llama a puntos finales remotos y obtiene datos.

Desmontar

Este método de ciclo de vida de useeffect reacciona maneja la limpieza en un DOM.Es como unafunción de limpieza de efectos de uso que elimina un componente del DOM.Se llama desmontar en React. El desmontaje utiliza solo un método de ciclo de vida, es decir, componentWillUnmount. Se llama cuando desea eliminar un componente del DOM.

componenteSeDesmontará() {

console.log(“El componente se desmontó con éxito”);

}

Usando use effect() Hook para manejar cambios de estado

El efecto de uso se ejecuta después de cada renderizado.También se usa para ejecutar ciertos códigos en reconocimiento de un cambio de estado. Puedes controlar el tiempo de ejecución del efecto pasando el segundo argumento en useEffect() Hook. El segundo argumento funciona como una matriz de dependencias, es decir, si se cambian las variables correspondientes, el efecto debe volver a ejecutarse. Tenga en cuenta que el estado es uno de los tipos de variables.

La siguiente sección ilustra un ejemplo para explicar cómo elgancho de efecto de uso maneja los cambios de estado.

Por ejemplo, es posible que desee ejecutar un efecto secundario basado en un valor de "día". Suponga que tiene un efecto secundario para mostrar un mensaje de saludo según el valor del día. El valor del día se guarda en una variable de estado.

Cada vez que elige un día, el estado se actualiza. El cambio en el valor de estado le permite actualizar el mensaje de saludo. Debe pasar la variable de estado a useEffect hook como un subconjunto de la matriz de dependencia.

usarEfecto(() =>

{

// Efecto secundario

}, [estado]);

En el ejemplo anterior de useeffect react native , el efecto secundario se ejecutaría si el valor de la variable de estado se actualiza.

Explore nuestros cursos populares de ingeniería de software

Usar gancho useEffect() con API y solicitudes de red

Puede usar el gancho 'useEffect()' con API y solicitudes de red para obtener datos de un servidor y manejar errores. Aquí hay un ejemplo de cómo usar 'useEffect()' con una API y manejar errores de red:

import React, { useState, useEffect } from 'react';

function MiComponente() {

const [datos, setData] = useState(null);

const [error, setError] = useState(null);

usarEfecto(() => {

función asíncrona fetchData() {

intentar {

const respuesta = await fetch('https://api.example.com/data');

si (!respuesta.ok) {

throw new Error('La respuesta de la red no fue correcta');

}

const json = esperar respuesta.json();

setData(json);

} atrapar (error) {

establecerError(error);

}

}

obtener datos();

}, []);

si (error) {

return <div>Error: {error.mensaje}</div>;

}

si (!datos) {

volver <div>Cargando…</div>;

}

devolver (

<div>

<p>{datos.mensaje}</p>

</div>

);

}

Puede modificar este ejemplo para incluir cualquier funcionalidad adicional que necesite para manejar solicitudes de red y respuestas de API.

Técnicas avanzadas de gancho useEffect()

Una de las técnicas nativas avanzadas de uso, efecto y reacción es la memorización.Es una técnica de optimización en la que se almacena en caché la salida de una llamada de función. Posteriormente, lafunción de retorno useeffect lo devuelve cuando se vuelve a alimentar la misma entrada.

Otra técnica bien conocida de useEffect() Hook es useMemo Hook. Te permite calcular un valor y memorizarlo. Su sintaxis es:

importar { useMemo } desde 'reaccionar'

const memoizedValue = useMemo(() => computeExpensiveValue(x, y), [x, y])

UseEffect() Dependencias de enlace

Las dependencias de gancho useEffect() contienen una lista de dependencias de su efecto secundario y también comprenden valores de estado o prop. El argumento de dependencias le permite capturar algunos eventos del ciclo de vida del componente, como que se monta un componente o se actualiza un valor particular de estado/propiedad.

El argumento de dependencias le permite controlar el momento en que se invoca el efecto secundario, independientemente del ciclo de representación del componente.

Representación condicional con gancho useEffect()

UseEffect Hook le permite poner las condiciones dentro del gancho. Aquí hay un ejemplo.

usarEfecto(() => {

si (debe ejecutar) {

// (lista de condiciones)

}

}, [debería ejecutar])

Debe mencionar las condiciones obligatorias que desea ejecutar bajo la función shouldExecute.

use effect() Hook vs ComponentDidMount() y ComponentDidUpdate()

useEffect() Gancho vs componenteDidUpdate():

useEffect() Gancho vs componenteDidMount():

Errores comunes y mejores prácticas con useEffect() Hook.

Errores comunes

1. No definir dependencias

useEffect se ejecuta cada vez que se representa un componente. Por lo tanto, debe definir los valores que deben desencadenar una nueva representación. De lo contrario, su función useEffect puede crear problemas de rendimiento.

2. No limpiar después de ejecutar el gancho useEffect

useEffect puede devolver una función de limpieza que se ejecuta cuando se desmonta el componente. No limpiar después de useEffect puede crear pérdidas de memoria y otras preocupaciones. Por lo tanto, es importante utilizar la función de limpieza useeffect .

3. Usar setState en la función useEffect sin una dependencia

Si actualiza el estado en useEffect, activa otro procesamiento. Esto puede conducir a un bucle infinito. Para evitar esto, siempre debe definir la variable de estado que está actualizando como una dependencia en un gancho useEffect.

Explore nuestros cursos gratuitos de desarrollo de software

Mejores prácticas:

• Si desea usar el gancho useEffect, asegúrese de usar solo uno por componente. En el caso de múltiples ganchos useEffect, todos ellos se ejecutarían cada vez que se renderice un componente. Por lo tanto, puede crear problemas de rendimiento y un comportamiento inesperado.
• Asegúrese de no usar el gancho useEffect dentro de condiciones, bucles o funciones anidadas. Si usa State inside for loop, entonces React creará una nueva variable de estado cada vez que se ejecute el bucle. Por lo tanto, conduce a un comportamiento inesperado.
• Asegúrate de no abusar del gancho useEffect. Pueden hacer que su código sea difícil de leer y pueden influir en el rendimiento si se usan en exceso.
• Solo debe llamar al gancho useEffect desde las funciones de React. Si lo llama desde un componente de clase, verá un error.

Conclusión

Es mejor usar useeffect en reaccionar si desea acceder fácilmente a los accesorios y al estado de los componentes sin escribir ningún código adicional.Simplifica significativamente los efectos secundarios en los componentes, ya que facilita la ejecución de efectos secundarios cuando cambia el estado o la propiedad. Puede considerar los aspectos y las mejores prácticas discutidos anteriormente para asegurarse de que sus componentes React funcionen de manera óptima.

Aprender habilidades exigentes de desarrollo de software es crucial en la era actual. Puede equiparse con estas habilidades de vanguardia al obtener la Maestría en Ciencias en Ciencias de la Computación de upGrad de LJMU . El curso lo convierte en un desarrollador de software experto al impartir habilidades como Java, Python y especialización en campos relacionados. Aprender a fondo los aspectos cubiertos en este curso lo ayuda a explorar oportunidades laborales como desarrollador de JavaScript, ingeniero de software e ingeniero de back-end.

Además de dominar las habilidades de desarrollo de software, upGrad también lo ayuda a mejorar su carrera como desarrollador de pila completa a través de cursos como el Programa PG ejecutivo en Desarrollo de pila completa de IIITB y Bootcamp de desarrollo de software de pila completa . ¡Estos programas brindan plataformas de aprendizaje inmersivo que permiten a los candidatos adquirir habilidades de desarrollo completas y exigentes y allanar el camino hacia una carrera exitosa!