UseEffect, useLayoutEffect y useEffectEvent: una comparación de ganchos de recuperación de datos en React

Los ganchos de React son una forma poderosa de gestionar los efectos secundarios en los componentes de React. Tres de los ganchos más comunes para manejar los efectos secundarios son useEffect, useLayoutEffect y useEffectEvent. Cada gancho tiene su caso de uso único, por lo que es esencial elegir el adecuado para el trabajo.

El gancho useEffect

El usoEfecto gancho es un gancho fundamental en React que le permite realizar efectos secundarios como manipulación DOM, operaciones asincrónicas y obtención de datos en componentes funcionales. Este gancho es una función que toma dos argumentos, la función de efecto y la matriz de dependencia.

La función de efecto contiene el código que realiza el efecto secundario y la matriz de dependencia determina cuándo se ejecuta la función de efecto. Si la matriz de dependencia está vacía, la función de efecto se ejecuta solo una vez en la representación inicial del componente. De lo contrario, la función de efecto se ejecuta cada vez que cambia cualquiera de los valores en la matriz de dependencia.

A continuación se muestra un ejemplo de cómo utilizar el gancho useEffect para recuperar datos:

import React from"react";
functionApp() {
const [data, setData] = React.useState([]);
 React.useEffect(() => {
 fetch("")
 .then((response) => response.json())
 .then((data) => setData(data));
 }, []);
return (

"app">
 {data.map((item) => (
{item.title}</div>
 ))}
 </div>
 );
}
exportdefault App;

Este código demuestra una Aplicación Componente que recupera datos de una API externa mediante el gancho useEffect. La función de efecto de useEffect obtiene datos de muestra de la API JSONPlaceholder. Luego analiza la respuesta JSON y establece los datos recuperados en el datos estado.

Con el estado de los datos, el componente de la aplicación representa el título propiedad de cada artículo en el estado.

Características del usoEffect Hook

• amigable asincrónico: Admite operaciones asincrónicas de forma nativa, lo que lo hace conveniente para la recuperación de datos.
• Se ejecuta después del renderizado: El gancho useEffect ejecuta sus efectos después de que la aplicación procesa el componente, asegurando que el gancho no bloquee la interfaz de usuario.
• Limpiar: Proporciona una forma integrada de realizar la limpieza devolviendo una función. Esto puede resultar especialmente útil cuando se trabaja con oyentes o suscripciones.

El gancho useLayoutEffect

El utilizarLayoutEffect El gancho es similar al usoEfecto gancho pero se ejecuta sincrónicamente después de todas las mutaciones DOM. Esto significa que se ejecuta antes de que el navegador pueda pintar la pantalla, lo que lo hace adecuado para tareas que requieren precisión. control sobre el diseño y los estilos del DOM, como medir el tamaño de un elemento, cambiar el tamaño de un elemento o animar su posición.

A continuación se muestra un ejemplo de cómo utilizar el gancho useLayoutEffect para cambiar el ancho de un botón elemento:

import React from"react";
functionApp() {
const button = React.useRef();
 React.useLayoutEffect(() => {
const { width } = button.current.getBoundingClientRect();
 button.current.style.width = `${width + 12}px`;
 }, []);
return (

"app">
Click Me</button>
 </div>
 );
}
exportdefault App;

El bloque de código anterior aumenta el ancho del elemento del botón en 12 píxeles usando el gancho useLayoutEffect. Esto garantiza que el ancho del botón aumente antes de que aparezca en la pantalla.

Características del gancho useLayoutEffect

• Sincrónico: Se ejecuta de forma sincrónica, lo que potencialmente bloquea la interfaz de usuario si la operación dentro de ella es intensa.
• lectura/escritura DOM: Es más adecuado para leer y escribir directamente en el DOM, especialmente si necesita los cambios antes de que el navegador se vuelva a pintar.

El gancho useEffectEvent

El useEffectEvent hook es un gancho de React que resuelve los problemas de dependencias del usoEfecto gancho. Si está familiarizado con useEffect, sabrá que su matriz de dependencias puede ser complicada. A veces, debes poner más valores en la matriz de dependencia que son estrictamente necesarios.

Por ejemplo:

import React from"react";
functionApp() {
const connect = (url) => {
// logic for connecting to the url
 };
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
 };
const onConnected = (url, loginOptions) => {
 logConnection(`Connected to ${url}`, loginOptions);
 };
 React.useEffect(() => {
const device = connect(url);
 device.onConnected(() => {
 onConnected(url);
 });
return() => {
 device.disconnect();
 };
 }, [url, onConnected]);
return<div>div>;
}
exportdefault App;

Este código demuestra la Aplicación Componente que gestiona una conexión a un servicio externo. El conectar La función se conecta a una URL específica, mientras que la conexión de registro La función registra los detalles de la conexión. Por último, el conectado la función llama al conexión de registro función para registrar un mensaje de conexión exitosa cuando el dispositivo se conecta.

El gancho useEffect llama a la función de conexión y luego configura una función de devolución de llamada onConnected para ejecutarse cuando el dispositivo desencadena el evento onConnected. Esta devolución de llamada registra un mensaje de conexión. Devuelve una función de limpieza que se activa cuando el componente se desmonta. Esta función de limpieza se encarga de desconectar el dispositivo.

La matriz de dependencia tiene la URL variable y la conectado función. El componente de la aplicación creará la función onConnected en cada renderizado. Esto hará que la función useEffect se ejecute en un bucle, lo que continuará renderizando el componente de la aplicación.

Hay varias formas de resolver el problema del bucle useEffect. Aún así, la forma más eficiente de hacerlo sin agregar más valores innecesarios a su matriz de dependencia es con el gancho useEffectEvent.

import React from"react";
functionApp() {
const connect = (url) => {
// logic for connecting to the URL
 };
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
 };
const onConnected = React.useEffectEvent((url, loginOptions) => {
 logConnection(`Connected to ${url}`, loginOptions);
 });
 React.useEffect(() => {
const device = connect(url);
 device.onConnected(() => {
 onConnected(url);
 });
return() => {
 device.disconnect();
 };
 }, [url]);
return<div>div>;
}
exportdefault App;

Al envolver la función onConnected con el gancho useEffectEvent, el gancho useEffectEvent siempre puede leer los últimos valores del mensaje y Opciones de inicio de sesión parámetros antes de pasarlo al gancho useEffect. Esto significa que useEffect no necesita depender de la función onConnected ni de los valores que se le pasan.

El gancho useEffectEvent es útil cuando desea que su useEffect dependa de un valor específico, aunque el El efecto desencadena un evento que requiere otros valores que prefiere no usar como dependencias en el usoEfecto.

Características del gancho useEffectEvent

• Es más adecuado para los efectos secundarios provocados por eventos.
• El useEffectEvent El gancho no funciona con controladores de eventos como al hacer clic, en cambio, etc.

El gancho useEffectEvent aún es experimental y no está disponible en Reaccionar versión 18 ganchos.

¿Cuándo utilizar qué gancho?

Cada uno de los ganchos de recuperación de datos anteriores es adecuado para diferentes situaciones:

• Recuperacion de datos: UseEffect es una excelente opción.
• Manipulaciones DOM directas: Si necesita realizar cambios sincrónicos en el DOM antes de volver a pintar, opte por useLayoutEffect.
• Operaciones ligeras: Para operaciones que no corren el riesgo de bloquear la interfaz de usuario, puede utilizar useEffect libremente.
• Efectos secundarios provocados por eventos: Utilice el gancho useEffectEvent para envolver los eventos y el gancho useEffect para ejecutar los efectos secundarios.

Maneje los efectos secundarios de manera eficiente

Los ganchos de React abren un mundo de posibilidades y comprender la diferencia entre useEffect, Los ganchos useLayoutEffect y useEffectEvent pueden afectar significativamente la forma en que maneja los efectos secundarios y DOM manipulación. Es esencial considerar los requisitos e implicaciones específicos de estos ganchos para crear aplicaciones fáciles de usar.