Ejecute useEffect sólo una vez | Programar Plus

React tiene un gancho incorporado llamado useEffect. Los ganchos se utilizan en componentes de funciones. El Class comparación de componentes con useEffect son los metodos componentDidMount, componentDidUpdate, y componentWillUnmount.

useEffect se ejecutará cuando el componente se procese, lo que podría ser más veces de las que cree. Siento que me ha surgido esto una docena de veces en las últimas semanas, por lo que parece digno de una publicación rápida en el blog.

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Run! Like go get some data from an API.
  });

  return (
    <div>
      {/* Do something with data. */}
    </div>
  );
}

En un ejemplo totalmente aislado como ese, es probable que useEffect se ejecutará solo una vez. Pero en una aplicación más compleja con accesorios volando y demás, ciertamente no está garantizado. El problema con eso es que si está haciendo algo como obtener datos de una API, puede terminar obteniendo una doble búsqueda, lo cual es ineficiente e innecesario.

El truco es que useEffect toma un segundo parámetro.

El segundo parámetro es una matriz de variables que el componente comprobará para asegurarse de que haya cambiado antes de volver a renderizar. Puede poner cualquier parte de los accesorios y el estado que desee aquí para verificar.

O, no pongas nada:

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Run! Like go get some data from an API.
  }, []);

  return (
    <div>
      {/* Do something with data. */}
    </div>
  );
}

Eso asegurará el useEffect solo se ejecuta una vez.

Nota de los documentos:

Si usa esta optimización, asegúrese de que la matriz incluya todos los valores del alcance del componente (como los accesorios y el estado) que cambian con el tiempo y que son usados ​​por el efecto. De lo contrario, su código hará referencia a valores obsoletos de representaciones anteriores.