Understanding the useEffect Hook in React

The useEffect hook is one of the most commonly used hooks in React. It allows us to perform side effects in functional components, such as manipulating the DOM, subscribing to events, or making API requests. In this post, we’ll explore how it works and how we can use it effectively.

What is useEffect?

useEffect is a hook that runs after the component has rendered. You can think of it as a combination of the lifecycle methods componentDidMount, componentDidUpdate, and componentWillUnmount in class components.

Basic Syntax

The basic syntax of useEffect is as follows:

import React, { useEffect } from 'react';

function MiComponente() {
  useEffect(() => {
    // Código a ejecutar
  }, []);

  return (
    <div>
      <h1>Hola, mundo!</h1>
    </div>
  );
}

The first argument of useEffect is a function that contains the code we want to execute. The second argument is an array of dependencies. If this array is empty, the effect will only run once, after the initial render.

Practical Example

Let’s say we want to make an API request when the component mounts. We can do it as follows:

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      <h1>Datos de la API:</h1>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Cargando...</p>}
    </div>
  );
}

In this example, useEffect is used to make an API request when the component mounts. The dependency array is empty, so the effect only runs once.

Cleaning Up Effects

Sometimes, it’s necessary to clean up effects to avoid memory leaks or unexpected behaviors. We can do this by returning a function from the first argument of useEffect:

import React, { useEffect } from 'react';

function MiComponente() {
  useEffect(() => {
    const handleResize = () => {
      console.log('Window resized');
    };

    window.addEventListener('resize', handleResize);

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

  return (
    <div>
      <h1>Escuchando el evento de redimensionamiento</h1>
    </div>
  );
}
;

In this example, we add an event listener for the window resize event when the component mounts, and remove it when the component unmounts.

Conclusion

The useEffect hook is a powerful tool that allows us to handle side effects in React functional components. By understanding how and when to use it, we can create more efficient and maintainable applications.