USO AVANZADO DEL HOOK USEEFFECT EN REACT

Ya hemos hablado anteriormente en el blog del hook useEffect de React, que nos permite ejecutar código en momentos específicos del ciclo de vida del componente, como después de que se haya montado o actualizado. Sin embargo, aunque es fácil de usar, su uso puede resultar un poco más complicado cuando se necesitan manejar escenarios más avanzados.

En este artículo, exploraremos algunas técnicas avanzadas para utilizar el hook useEffect de manera efectiva y evitar errores comunes.

Usando useEffect para suscribirse a eventos globales

En algunas ocasiones, puede ser necesario escuchar eventos globales, como el evento "resize" del objeto window o los eventos del teclado. Para hacer esto, podemos usar el hook useEffect para suscribirnos a estos eventos cuando el componente se monta, y cancelar la suscripción cuando se desmonta.

Aquí hay un ejemplo de cómo hacer esto:

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    window.addEventListener('resize', handleResize);
    document.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('resize', handleResize);
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  const handleResize = () => {
    // hacer algo cuando el usuario cambia el tamaño de la ventana
  };

  const handleKeyDown = (event) => {
    // hacer algo cuando el usuario presiona una tecla
  };

  return (
    // el resto del componente
  );
}

En este ejemplo, estamos usando useEffect para suscribirnos a los eventos "resize" y "keydown" del objeto window y del documento respectivamente. El segundo argumento del useEffect es una matriz vacía [], lo que significa que solo queremos que el efecto se ejecute una vez, cuando el componente se monta. También estamos proporcionando una función de limpieza que se ejecutará cuando el componente se desmonte, lo que cancelará la suscripción a los eventos.

Usando useEffect para realizar solicitudes HTTP

Otro caso de uso común para el hook useEffect es realizar solicitudes HTTP. Esto es especialmente útil cuando necesitamos actualizar el estado del componente en función de los datos que recibimos del servidor. Sin embargo, es importante recordar que las solicitudes HTTP pueden tardar en completarse, lo que significa que debemos manejar el caso en que el componente se desmonte antes de que se complete la solicitud.

Para hacer esto, podemos usar el segundo argumento del useEffect para especificar las dependencias que la función de efecto debe observar. En este caso, queremos que la función de efecto se ejecute cada vez que cambie la variable de estado "userId". Además, queremos cancelar la solicitud si el componente se desmonta antes de que se complete.

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

const User = (props) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let isMounted = true;

    const fetchData = async () => {
      const result = await axios(
        `https://jsonplaceholder.typicode.com/users/${props.userId}`
      );

      if (isMounted) {
        setUser(result.data);
      }
    };

    fetchData();

    return () => {
      isMounted = false;
    };
  }, [props.userId]);

  if (!user) {
    return <div>Cargando...</div>;
  }

  return (
    <div>
      <h1>{ user }</h1>
      <h1>{ name }</h1>
      <p>Correo electrónico: { user.email }</p>
      <p>Teléfono: { user.phone }</p>
    </div>
  );
}

En este ejemplo, estamos usando useEffect para realizar una solicitud HTTP utilizando la biblioteca Axios. Estamos proporcionando una función de limpieza que establece la variable "isMounted" en false cuando el componente se desmonta. Esto garantiza que no se realice una actualización del estado si el componente ya no está montado.

Además, estamos especificando que la función de efecto debe observar la variable de estado "userId" como su dependencia. Esto significa que la solicitud HTTP se realizará cada vez que cambie la variable "userId".

Finalmente, estamos utilizando el estado "user" para renderizar los datos del usuario en el componente.

Usando useEffect con múltiples efectos

En algunos casos, es posible que necesitemos usar múltiples efectos en un solo componente. Por ejemplo, podemos tener un efecto que se ejecute cuando se monte el componente y otro que se ejecute cuando cambie una variable de estado específica.

Para lograr esto, podemos simplemente utilizar useEffect varias veces en el mismo componente. Aquí hay un ejemplo:

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

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [data, setData] = useState(null);

  useEffect(() => {
    // se ejecuta cuando se monta el componente
    console.log('Componente montado');
  }, []);

  useEffect(() => {
    // se ejecuta cuando cambia la variable count
    console.log(`Count ha cambiado a ${count}`);
  }, [count]);

  useEffect(() => {
    // se ejecuta cuando cambia la variable data
    console.log('Data ha cambiado');
  }, [data]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={ handleClick }>Haz clic aquí</button>
    </div>
  );
}

En este ejemplo, estamos utilizando useEffect tres veces en el mismo componente. El primer efecto se ejecuta cuando se monta el componente y no tiene dependencias. Los otros dos efectos se ejecutan cuando cambian las variables de estado "count" y "data", respectivamente.

Es importante tener en cuenta que el uso incorrecto de useEffect puede resultar en errores y problemas de rendimiento. Asegúrate de entender bien los conceptos antes de implementar el hook en tus proyectos. Con un buen manejo, el hook useEffect puede ayudarte a crear componentes más eficientes y escalables.