Reaccionar: una introducción rápida a useEffect

¿Qué es un efecto / efecto secundario ?

Los términos efecto secundario y efecto se usan indistintamente y significan lo mismo en React: se refieren a operaciones que no afectan la interfaz de usuario o el valor de salida. Si la operación que está realizando está gestionando cualquier cambio de estado que no sea el valor de retorno final, ¡entonces es un efecto secundario!

La función de un componente de React es manejar el renderizado y manipular la interfaz de usuario. Debido a que los efectos secundarios no afectan la fase de procesamiento, no pertenecen al cuerpo principal de un componente.

¿Qué es useEffect?

useEffect es un React Hook que le permite ejecutar efectos secundarios independientemente del renderizado.

Si tiene partes de su código que no están directamente relacionadas con la interfaz de usuario o tareas que son asincrónicas y se ejecutan fuera del flujo de control normal, debe colocarlas dentro del useEffectenlace. Esto les permite operar fuera del ciclo de renderizado y funcionar detrás de escena sin interferir con la interfaz de usuario.

useEffect acepta dos argumentos:

• una devolución de llamada (requerida), el efecto , que se ejecutará después de la evaluación del componente si cambian las dependencias especificadas;
• las dependencias (opcionales) que está comprobando esa función.

Ejemplos de cálculos que son independientes del render y deberían vivir dentro de un useEffectgancho:

• usando temporizadores;
• solicitudes de red (como fetch);
• lectura del almacenamiento local;
• registrar y cancelar el registro de oyentes de eventos;
• actualizando manualmente el DOM.

• import { useEffect } from 'react'
• La lógica de efectos secundarios va dentro de la función de devolución de llamada.
• Las dependencias controlan cuándo desea que se ejecute el efecto secundario. Se pasan como una matriz.

useEffect(() => { logic }, [dependencies]);

Veamos cómo useEffectfunciona. En este ejemplo, obtenemos información del usuario de una base de datos después de que se loggedInactualiza un estado truey luego imprimimos esa información en la página:

import { useState, useEffect } from 'react';
function App() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [userName, setUserName] = useState("");
  useEffect( () => {
    if (loggedIn === true) {
      // [ retrieving user info from an imaginary database ]
      // [ we set the returned user info in state ]
      setUserName("Lisa Simpson");
    } else {
      setUserName("");
    }
  }, [loggedIn]);
  return (
    <div>
      <h1>Hello</h1>
      <button onClick={ () => setLoggedIn(!loggedIn) } >Log in / out</button>
      {
        loggedIn === true
          ? <p>Hello, {userName}</p>
          : <p>Please log in</p>
      }
    </div>
  )
};
export default App;

• Tenemos una ifdeclaración que verifica una base de datos imaginaria para ver si el usuario lo es loggedIn. Si es así, actualizamos el estado de userName. (En la devolución tenemos lógica para mostrar su nombre en la pantalla si loggedIn === true).
• Cuando se hace clic en el botón (en el retorno), loggedInse actualiza en estado usando la setLoggedInfunción.
• useEffectse ejecuta cada vez que loggedIncambia el estado, porque hemos pasado loggedIncomo una dependencia.
• useEffectno se ejecuta cuando se ejecuta la setUserNamefunción, porque no la hemos puesto en la matriz de dependencias.

Las dependencias son la forma en que controlamos cuándo se useEffectejecuta.

• Si desea useEffectejecutar en cada renderizado, omita las dependencias.
• Si desea que se ejecute solo una vez después del renderizado inicial, proporcione una matriz vacía.
• Si desea que se ejecute después de que cambie un valor específico, páselo como una dependencia.

• Si usa valores propso state, debe declararlos como dependencias; cuando estos valores cambien, useEffectse ejecutará. (En el ejemplo anterior, está bien omitir la setUserNamefunción de las dependencias porque no es un valor de estado, es una función que actualiza el valor de estado, por lo que nunca estará fuera de sincronización con el estado).

• funciones de actualización de estado;
• API o funciones integradas;
• variables o funciones que se definen fuera de una función de componente (como una función auxiliar que está en un archivo separado).

Algunos efectos secundarios, como temporizadores o suscripciones (conexiones a una fuente de datos persistente), requieren limpieza, porque no queremos que estén flotando después de que el componente se elimine del DOM.

Para limpiar, simplemente devolvemos una función dentro useEffecty se limpiará; estas funciones se denominan apropiadamente cleanup functions. Estas funciones de limpieza se ejecutan después del siguiente renderizado, pero antes del siguiente useEffect.