Como chamar a função de carregamento com React useEffect apenas uma vez

O gancho useEffect React executará a função passada em todas as alterações. Isso pode ser otimizado para permitir a chamada somente quando as propriedades desejadas forem alteradas.

E se eu quiser chamar uma função de inicialização componentDidMounte não chamá-la novamente nas alterações? Digamos que eu queira carregar uma entidade, mas a função de carregamento não precisa de nenhum dado do componente. Como podemos fazer isso usando o useEffectgancho?

class MyComponent extends React.PureComponent {
    componentDidMount() {
        loadDataOnlyOnce();
    }
    render() { ... }
}

Com ganchos, pode ser assim:

function MyComponent() {
    useEffect(() => {
        loadDataOnlyOnce(); // this will fire on every change :(
    }, [...???]);
    return (...);
}

Se você quiser executar apenas a função atribuída useEffectapós a renderização inicial, poderá fornecer uma matriz vazia como segundo argumento.

function MyComponent() {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);

  return <div> {/* ... */} </div>;
}

TL; DR

useEffect(yourCallback, []) - acionará o retorno de chamada somente após a primeira renderização.

Explicação detalhada

useEffecté executado por padrão após cada renderização do componente (causando um efeito).

Ao colocar useEffectseu componente, você diz ao React que deseja executar o retorno de chamada como um efeito. O React executará o efeito após a renderização e após executar as atualizações do DOM.

Se você passar apenas um retorno de chamada - o retorno será executado após cada renderização.

Se passar um segundo argumento (matriz), o React executará o retorno de chamada após a primeira renderização e toda vez que um dos elementos da matriz for alterado. por exemplo, ao colocar useEffect(() => console.log('hello'), [someVar, someOtherVar])- o retorno de chamada será executado após a primeira renderização e após qualquer renderização que uma das someVarou someOtherVarseja alterada.

Ao passar o segundo argumento para uma matriz vazia, o React irá comparar após cada renderização da matriz e verá que nada foi alterado, chamando o retorno de chamada somente após a primeira renderização.

gancho useMountEffect

A execução de uma função apenas uma vez após a montagem do componente é um padrão tão comum que justifica um gancho próprio que oculta os detalhes da implementação.

const useMountEffect = (fun) => useEffect(fun, [])

Use-o em qualquer componente funcional.

function MyComponent() {
    useMountEffect(function) // function will run only once after it has mounted. 
    return <div>...</div>;
}

Sobre o gancho useMountEffect

Ao usar useEffectcom um segundo argumento da matriz, o React executará o retorno de chamada após a montagem (renderização inicial) e após a alteração dos valores na matriz. Como passamos uma matriz vazia, ela será executada somente após a montagem.

Passe uma matriz vazia como o segundo argumento para useEffect. Isso informa efetivamente o React, citando os documentos :

Isso informa ao React que seu efeito não depende de nenhum valor de adereços ou estado, portanto, ele nunca precisa ser executado novamente.

Aqui está um trecho que você pode executar para mostrar que funciona:

function App() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUser(data.results[0]);
      });
  }, []); // Pass empty array to only run once on mount.
  
  return <div>
    {user ? user.name.first : 'Loading...'}
  </div>;
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

Eu gosto de definir uma mountfunção, ele engana o EsLint da mesma maneira useMounte acho mais auto-explicativo.

const mount = () => {
  console.log('mounted')
  // ...

  const unmount = () => {
    console.log('unmounted')
    // ...
  }
  return unmount
}
useEffect(mount, [])

O truque é que useEffect usa um segundo parâmetro.

O segundo parâmetro é uma matriz de variáveis ​​que o componente verificará para ter certeza de que foi alterado antes da nova renderização. Você pode colocar quaisquer pedaços de adereços e o estado que quiser aqui para verificar.

Ou, não coloque nada:

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {

    // Run! Like go get some data from an API.

  }, []); //Empty array as second argument

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

Isso garantirá que o useEffect seja executado apenas uma vez.

Nota dos documentos:

Se você usar essa otimização, verifique se a matriz inclui todos os valores do escopo do componente (como adereços e estado) que mudam com o tempo e são usados ​​pelo efeito. Caso contrário, seu código fará referência a valores obsoletos de renderizações anteriores.