Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

react logo

¿Cómo usar useEffect correctamente en React?

useEffect” es un Hook que nos permite realizar efectos secundarios en componentes funcionales de React. Pero, ¿cómo podemos utilizar “useEffect” de manera correcta en nuestros proyectos de React? En este artículo, te proporcionaremos ejemplos y explicaciones detalladas sobre cómo utilizar “useEffect” de manera efectiva.

¿Qué son los efectos secundarios y por qué son importantes?

Los efectos secundarios son acciones que ocurren como resultado de una actualización del componente, como hacer una solicitud de red o actualizar el DOM. Es importante tener en cuenta estos efectos secundarios porque pueden afectar el comportamiento de tu componente de maneras inesperadas si no se manejan de manera adecuada.

¿Cómo utilizar useEffect en tus componentes?

A continuación, te proporcionamos un ejemplo de cómo utilizar “useEffect” para hacer una solicitud de red y actualizar el estado del componente con los datos obtenidos

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const data = await response.json();
      setData(data);
    }
    fetchData();
  }, []); // <- Esté array vacío es el arreglo de dependencias.

  return (
    <div>
      {data ? 
        data.map(post => (
        <div>{post.title}</div>
        ))
       : (
        <div>Loading...</div>
      )}
    </div>
  );
}

En este ejemplo, estamos utilizando “useEffect” para realizar una solicitud de red y actualizar el estado del componente con los datos obtenidos. La función “useEffect” toma dos argumentos: una función que contiene el código del efecto secundario y un arreglo de dependencias. La función del efecto secundario se ejecutará cada vez que el componente se actualiza, excepto si las dependencias en el arreglo han cambiado.

En este caso, estamos pasando un arreglo vacío como dependencias, lo que significa que la función del efecto secundario solo se ejecutará una vez, cuando el componente se monta. Si quisiéramos que la función del efecto secundario se ejecutara cada vez que el componente se actualiza, podríamos pasar una dependencia como, por ejemplo, el estado “data”.

Conclusión

En resumen, “useEffect” es un Hook muy útil para realizar efectos secundarios en componentes funcionales de React. Con la función “useEffect” y un poco de cuidado, puedes asegurarte de que tus componentes se comporten de manera predecible y consistente. ¡Esperamos que este artículo te haya ayudado a entender cómo utilizar “useEffect” correctamente en tus proyectos de React!