Come chiamare la funzione di caricamento con React useEffect solo una volta

Il hook useEffect React eseguirà la funzione passata su ogni modifica. Questo può essere ottimizzato per lasciarlo chiamare solo quando cambiano le proprietà desiderate.

Cosa succede se desidero chiamare una funzione di inizializzazione componentDidMounte non richiamarla di nuovo sulle modifiche? Diciamo che voglio caricare un'entità, ma la funzione di caricamento non ha bisogno di alcun dato dal componente. Come possiamo farlo usando il useEffectgancio?

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

Con i ganci questo potrebbe apparire così:

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

Se si desidera eseguire solo la funzione assegnata useEffectdopo il rendering iniziale, è possibile assegnargli un array vuoto come secondo argomento.

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

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

TL; DR

useEffect(yourCallback, []) - attiverà la richiamata solo dopo il primo rendering.

Spiegazione dettagliata

useEffectviene eseguito per impostazione predefinita dopo ogni rendering del componente (causando così un effetto).

Al momento del posizionamento useEffect il componente, si dice a React che si desidera eseguire il callback come effetto. React eseguirà l'effetto dopo il rendering e dopo aver eseguito gli aggiornamenti DOM.

Se si passa solo un callback, il callback verrà eseguito dopo ogni rendering.

Se passa un secondo argomento (array), React eseguirà il callback dopo il primo rendering e ogni volta che uno degli elementi dell'array viene modificato. ad esempio durante il posizionamento useEffect(() => console.log('hello'), [someVar, someOtherVar]): il callback verrà eseguito dopo il primo rendering e dopo qualsiasi rendering di quello di someVarosomeOtherVar viene modificato.

Passando il secondo argomento a un array vuoto, React confronterà dopo ogni rendering l'array e non vedrà nulla che sia stato modificato, chiamando così il callback solo dopo il primo rendering.

hook hook UseMountEffect

L'esecuzione di una funzione solo una volta dopo il montaggio dei componenti è un modello così comune che giustifica un suo hook che nasconde i dettagli di implementazione.

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

Usalo in qualsiasi componente funzionale.

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

Informazioni sul hook useMountEffect

Quando si utilizza useEffectcon un secondo argomento di matrice, React eseguirà il callback dopo il montaggio (rendering iniziale) e dopo che i valori nella matrice saranno cambiati. Poiché passiamo un array vuoto, verrà eseguito solo dopo il montaggio.

Passa un array vuoto come secondo argomento a useEffect. Questo effettivamente dice a React, citando i documenti :

Questo dice a React che il tuo effetto non dipende da alcun valore proveniente da oggetti di scena o stato, quindi non deve mai essere eseguito nuovamente.

Ecco uno snippet che puoi eseguire per mostrare che funziona:

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/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

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

Mi piace definire una mountfunzione, inganna EsLint allo stesso modo useMounte la trovo più autoesplicativa.

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

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

Il trucco è che useEffect accetta un secondo parametro.

Il secondo parametro è un array di variabili che il componente controllerà per assicurarsi che sia cambiato prima del nuovo rendering. Puoi mettere qualsiasi frammento di oggetti di scena e dichiarare qui che vuoi verificare.

Oppure, non mettere nulla:

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>
  );
}

Ciò garantirà che useEffect venga eseguito una sola volta.

Nota dai documenti:

Se si utilizza questa ottimizzazione, assicurarsi che l'array includa tutti i valori dell'ambito del componente (come oggetti di scena e stato) che cambiano nel tempo e che vengono utilizzati dall'effetto. In caso contrario, il codice farà riferimento a valori non aggiornati dei rendering precedenti.