useEffect: sincronizar con sistemas externos

useEffect permite sincronizar un componente con algo externo a su cálculo de JSX: un temporizador, una suscripción, el título del documento o una petición. El efecto se ejecuta después de que React haya confirmado los cambios de la interfaz.

1import { useEffect, useState } from 'react';
2
3export default function Ejem_13() {
4  const [count1, setCount1] = useState(0);
5  const [count2, setCount2] = useState(0);
6
7  useEffect(() => {
8    console.log('Preparación del efecto de montaje');
9  }, []);
10
11  useEffect(() => {
12    console.log('Valor de count2:', count2);
13  }, [count2]);
14
15  useEffect(() => {
16    console.log('Se ha confirmado un render');
17  });
18
19  return (
20    <>
21      <button onClick={() => setCount1((prev) => prev + 1)}>{count1}</button>
22      <button onClick={() => setCount2((prev) => prev + 1)}>{count2}</button>
23    </>
24  );
25}

Las tres variantes #

Un render también puede producirse porque el padre se renderiza o cambian las props. Por eso la variante sin dependencias no significa simplemente «cuando cambie cualquier estado».

React compara cada dependencia con su valor anterior mediante Object.is. Debes incluir los valores reactivos que utiliza el efecto: props, estado y valores o funciones declarados en el componente. No elimines dependencias para esconder un problema; revisa qué necesita hacer el efecto.

StrictMode y limpieza #

Con StrictMode, en desarrollo React ejecuta un ciclo extra de preparación y limpieza antes del ciclo normal. Por eso [] no debe enseñarse como una garantía absoluta de «exactamente una llamada». Si el componente se desmonta y vuelve a montarse, también se prepara de nuevo.

Un efecto puede devolver una función de limpieza. Se ejecuta antes de preparar otra vez el efecto cuando cambian sus dependencias y al desmontar. Veremos un temporizador en el próximo tema.

Cuándo no hace falta un efecto #

Para mostrar el doble de un contador, calcula count * 2 durante el render. Para responder a un clic, utiliza su manejador. Los efectos se reservan para sincronización, no para cualquier cálculo.

Prueba tú #

Pulsa cada botón y observa qué mensajes aparecen. El efecto con [count2] no vuelve a prepararse por cambiar únicamente count1.

Consulta la referencia oficial de useEffect para revisar dependencias y limpieza.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.