Comprender el efecto de uso en React: de cero a héroe

React se ha convertido en una de las bibliotecas de JavaScript más populares para crear interfaces de usuario dinámicas. Uno de los ganchos más importantes de React es useEffect, que permite a los desarrolladores gestionar los efectos secundarios en componentes funcionales. Los efectos secundarios incluyen operaciones como recuperar datos, configurar suscripciones o manipular manualmente el DOM. En este blog, profundizaremos en qué es useEffect, cómo funciona y brindaremos ejemplos paso a paso para una mejor comprensión.

¿Qué es el efecto de uso?

En React, useEffect es un gancho incorporado que le permite realizar efectos secundarios en componentes de funciones. Los efectos secundarios, como sugiere el nombre, son operaciones que afectan algo fuera de la función, como llamadas API, temporizadores, registros o actualización del DOM.

Antes de la introducción de ganchos en React 16.8, tenías que usar componentes de clase y métodos de ciclo de vida como componenteDidMount, componenteDidUpdate y componenteWillUnmount para manejar los efectos secundarios. Ahora, con useEffect, estos eventos del ciclo de vida se combinan en una única función para componentes funcionales.

¿Por qué elegir useEffect?

useEffect es un poderoso gancho para gestionar los efectos secundarios en React por varias razones:

1. Simplificación del código: Elimina la necesidad de componentes basados ​​en clases y métodos de ciclo de vida, lo que le permite escribir código más limpio y basado en funciones.
2. Efectos secundarios centralizados: Puede administrar todos los efectos secundarios, como obtener datos o actualizar el DOM, en un solo lugar.
3. Lectura mejorada: Agiliza la forma en que se administran los eventos del ciclo de vida, haciendo que el código sea más legible y menos complejo.
4. Flexibilidad: Con useEffect, tienes más control sobre cuándo y con qué frecuencia se ejecutan los efectos secundarios, ya que puedes definir dependencias que determinan cuándo se debe ejecutar el efecto.

¿Cómo funciona?

El gancho useEffect acepta dos argumentos:

1. Función de efecto: Esta función contiene la lógica de efectos secundarios, como recuperar datos o configurar una suscripción.
2. Matriz de dependencia (opcional): Una matriz de valores que determina cuándo se debe volver a ejecutar el efecto. Si algún valor en la matriz de dependencia cambia, el efecto se ejecuta nuevamente. Si omites esta matriz, el efecto se ejecutará después de cada renderizado.

Aquí hay una estructura básica:

useEffect(() => {
  // Side effect logic goes here

  return () => {
    // Optional cleanup function
  };
}, [/* Dependencies go here */]);

Ejemplo:

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

function ExampleComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetching data when the component mounts
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => response.json())
      .then((json) => setData(json));

    // Optional cleanup (in this case, not needed)
    return () => {
      // Cleanup logic if necessary
    };
  }, []); // Empty array means this effect will only run once when the component mounts

  return 
{data ? data.title : 'Loading...'}
;
}

En este ejemplo, los datos se obtienen de una API cuando el componente se representa por primera vez y el resultado se muestra en la interfaz de usuario. Dado que pasamos una matriz de dependencia vacía, este efecto se ejecuta solo una vez después del primer renderizado.

Controlar los efectos secundarios en usoEfecto

Al controlar cuándo se ejecuta useEffect, podemos optimizar el rendimiento y garantizar que los efectos secundarios ocurran en el momento correcto.

Efectos sin limpieza

No todos los efectos requieren limpieza. La limpieza solo es necesaria cuando necesitas eliminar o restablecer algo después de ejecutar el efecto, como borrar temporizadores o cancelar la suscripción a flujos de datos.

Por ejemplo, este es un escenario en el que no se necesita limpieza:

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

function NoCleanupEffect() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect without cleanup runs every time the count changes');
  }, [count]); // Runs every time `count` changes

  return (
    

      
{count}
       setCount(count   1)}>Increment
    
  );
}

En este caso, el efecto se ejecuta cada vez que cambia el estado del recuento. Como no configuramos suscripciones ni administramos recursos externos, no es necesaria ninguna limpieza.

Efectos con la limpieza

Si tu efecto implica configurar suscripciones o temporizadores, es probable que tengas que limpiar después del efecto. Por ejemplo, imagine un escenario en el que queremos configurar un temporizador:

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

function TimerComponent() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((prevTime) => prevTime   1);
    }, 1000);

    // Cleanup function to clear the timer
    return () => {
      clearInterval(interval);
    };
  }, []); // Empty dependency array: effect runs once, and cleanup occurs when the component unmounts

  return 
{time} seconds have passed
;
}

Esto es lo que está pasando:

1. La función setInterval configura un temporizador que incrementa el tiempo cada segundo.
2. La función de limpieza (devuelta por useEffect) borra el intervalo cuando el componente se desmonta. Esto garantiza que el temporizador no siga funcionando después de eliminar el componente.

Ejemplos de usoEscenarios de efectos

Exploremos algunos escenarios comunes donde useEffect es particularmente útil.

Obteniendo datos en el montaje de componentes

Obtener datos cuando el componente se monta es uno de los casos de uso más comunes de useEffect.

useEffect(() => {
  fetchData();

  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  }
}, []); // Empty dependency array means it runs once when the component mounts

Actualizando el DOM

Puedes usar useEffect para manipular manualmente el DOM después del renderizado, aunque esto debe hacerse con moderación ya que React administra el DOM de manera eficiente.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Updates the document title whenever `count` changes

Limpieza al desmontar componentes

Si tiene recursos como suscripciones o detectores de eventos que deben limpiarse, puede usar la función de retorno en useEffect para manejar esto.

useEffect(() => {
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Cleanup listener when the component unmounts

Preguntas frecuentes

1. ¿Qué sucede si omito la matriz de dependencia en useEffect?

Si omites la matriz de dependencia, useEffect se ejecutará después de cada renderizado, lo que puede causar problemas de rendimiento y efectos secundarios costosos como llamadas API.

2. ¿Puedo ejecutar useEffect solo una vez?

Sí, pasar una matriz de dependencia vacía [] garantiza que el efecto se ejecute solo una vez después de que se monte el componente.

3. ¿Cuál es la función de limpieza en useEffect?

La función de limpieza es una forma de deshacer el efecto cuando el componente se desmonta o antes de que el efecto se ejecute nuevamente. Es útil para limpiar temporizadores, detectores de eventos o suscripciones.

En conclusión, useEffect es un gancho poderoso y flexible que simplifica la gestión de efectos secundarios en React. Al controlar cuándo se ejecutan los efectos secundarios y limpiar cuando sea necesario, puede optimizar sus componentes y evitar repeticiones innecesarias o pérdidas de memoria. ¡Experimente con los ejemplos anteriores para dominar el arte de la gestión de efectos secundarios!