Comment optimiser le hook useEffect pour déclencher une fonction uniquement lors du rendu initial ?

Hook useEffect optimisé : appeler la fonction d'initialisation une seule fois

Le hook useEffect de React permet d'exécuter des fonctions personnalisées en réponse aux changements dans les accessoires ou l'état du composant. Cependant, dans certains scénarios, il est souhaité d'appeler une fonction lors du rendu initial uniquement, simulant le comportement de la méthode de cycle de vie du composant existant DidMount.

Considérez le composant basé sur la classe suivant :

<code class="javascript">class MyComponent extends React.PureComponent {
    componentDidMount() {
        loadDataOnlyOnce();
    }
    render() { ... }
}</code>

Dans un composant basé sur une fonction utilisant des hooks, cela peut être traduit comme suit :

<code class="javascript">function MyComponent() {
    useEffect(() => {
        loadDataOnlyOnce(); // This will fire on every change
    }, [...???]);
    return (...);
}</code>

Pour garantir que la fonction n'est appelée qu'une seule fois, un tableau vide doit être fourni comme deuxième argument de useEffect :

<code class="javascript">function MyComponent() {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);

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

En fournissant un tableau vide, useEffect ne se déclenchera qu'après la phase de rendu initiale, permettant une initialisation efficace des composants sans rendus inutiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!