useEffect nur einmal ausführen

React verfügt über einen integrierten Hook namens useEffect. Hooks werden in Funktionskomponenten verwendet. Der Vergleich von Class-Komponenten mit useEffect sind die Methoden componentDidMount, componentDidUpdate und componentWillUnmount.

useEffect wird beim Rendern der Komponente ausgeführt, was möglicherweise öfter geschieht, als Sie denken. Ich habe das Gefühl, dass dies in den letzten Wochen ein Dutzend Mal aufgetaucht ist, daher scheint es einen kurzen Blogbeitrag wert zu sein.

import React, { useEffect } from 'react';

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

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

In einem völlig isolierten Beispiel wie diesem wird useEffect wahrscheinlich nur einmal ausgeführt. Aber in einer komplexeren App mit herumfliegenden Props und Ähnlichem ist dies sicherlich nicht garantiert. Das Problem dabei ist, dass Sie, wenn Sie etwas wie das Abrufen von Daten von einer API tun, am Ende doppelte Abrufe tätigen könnten, was ineffizient und unnötig ist.

Der Trick ist, dass useEffect einen zweiten Parameter nimmt.

Der zweite Parameter ist ein Array von Variablen, die die Komponente überprüft, um sicherzustellen, dass sie sich geändert haben, bevor erneut gerendert wird. Sie können hier beliebige Teile von Props und State einfügen, die Sie überprüfen möchten.

Oder lassen Sie es leer

import React, { useEffect } from 'react';

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

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

Dies stellt sicher, dass useEffect nur einmal ausgeführt wird.

Hinweis aus der Dokumentation

Wenn Sie diese Optimierung verwenden, stellen Sie sicher, dass das Array alle Werte aus dem Komponentenbereich (wie Props und State) enthält, die sich im Laufe der Zeit ändern und die vom Effekt verwendet werden. Andernfalls greift Ihr Code auf veraltete Werte aus früheren Renderings zu.