Führen Sie asynchrone Aufgaben mit useEffect sauber und sicher aus

Vom Aufrufen einer API zum Festlegen einer Timeout-Verzögerung haben Sie sich sicher schon gefragt, wie man es richtig macht, wenn man den React-Hook verwendet useEffect. Wenn das immer noch verschwommen klingt, dann ist dieser Artikel für Sie. Wenn nicht, lernen Sie vielleicht zumindest einen anderen Ansatz, um die Arbeit zu erledigen, oder fühlen sich dabei sicherer.

Ich werde 3 Möglichkeiten vorstellen, wie man es sicher und ordentlich macht. Aber zuerst möchte ich zeigen, was Sie NICHT tun sollten.

Was Sie NICHT tun sollten ❌

Führen Sie die asynchrone Aufgabe nicht direkt in useEffect aus, sondern packen Sie Ihre asynchrone Aufgabe IMMER in eine Funktion und rufen Sie sie nur aus useEffect auf.

Hier ist ein Beispiel dafür, was Sie NICHT tun sollten:

useEffect(async () => {
   await getData();
},[]);

Wenn Sie das tun, was dieses BAD-Beispiel zeigt, würde dies zu einem React-Fehler führen:

Effektrückrufe sind synchron, um Racebedingungen zu verhindern.

In Ordnung, jetzt können wir sicher zu den guten Praktiken übergehen ⬇️

1. Definieren der Async-Funktion innerhalb des Hooks

Wenn Sie beabsichtigen, eine asynchrone Aufgabe auszuführen, um beispielsweise einige Daten von einer API zu erhalten und den Ladezustand Ihrer Komponente zu aktualisieren, müssen Sie die Funktion innerhalb des Hooks definieren und sie dann aufrufen:

useEffect(() => {
async function getData() {
    setLoading(false);
    const reponse = await myApi.getSomeGoodData()
    setLoading(true);
   }
getData();
},[]);

2. Definieren der Async-Funktion außerhalb des Hooks

Wenn Sie beabsichtigen, die von Ihnen definierte asynchrone Funktion wiederzuverwenden, ist es eine gute Idee, sie in Ihrem funktionalen Komponentenkörper zu definieren, der vom useCallbackHook umschlossen ist. Hör zu:

const getData = useCallback(() => {
    setLoading(false);
    const reponse = await myApi.getSomeGoodData()
    setLoading(true);
}, [])
useEffect(() => {
getData()
},[getData])

3. Festlegen eines Intervalls oder Timeouts

Die beiden vorherigen Beispiele konzentrierten sich hauptsächlich auf das Abrufen von Daten und das Aktualisieren des Komponentenstatus. Dieser soll auch ein allgemeines Szenario für asynchrone Aufgaben innerhalb von useEffect zeigen, das ein Intervall oder ein Timeout setzt.

Der Trick dafür besteht darin, IMMER das Timeout und das Intervall zu löschen, das in der useEffect.

Einstellen einer Zeitüberschreitung

useEffect(() => {
const timeout = setTimeout(() => {
     // do something
   }, 100)
return () => {
      clearTimeout(timeout);
   }
},[])

useEffect(() => {
const interval = setInterval(() => {
       // do something
  }, 100)
return () => {
      clearInterval(interval);
  }
},[])

Die obigen Beispiele decken 99,99 % der asynchronen Situationen ab, denen Sie während der Entwicklung von React begegnen können. Denken Sie nur daran, die Effektabhängigkeiten zu beachten. Wenn Sie Ihren Fall in den folgenden Beispielen nicht gefunden haben, hinterlassen Sie einen Kommentar und ich werde ihn prüfen.

Danke fürs Lesen

— Fernando Abolafio