Async-Syntax im useEffect-Callback verwenden

1. Was ist useEffect() in React?
2. So verwenden Sie die async-Syntax in useEffect in React
3. Die beste Lösung zur Verwendung der async-Syntax innerhalb von useEffect in React

Die Veröffentlichung von React Version 16.8 hat die Bibliothek in vielerlei Hinsicht verändert. Mit der Einführung von Haken erhielten funktionale Komponenten die Fähigkeit, den Zustand beizubehalten und Nebenwirkungen zu behandeln.

useEffect() ist einer der wichtigsten Hooks für funktionale Komponenten in React und wurde speziell für den Umgang mit Nebeneffekten entwickelt. Es ist ziemlich einfach herauszufinden, hat aber immer noch einige Vorbehalte, die React-Entwickler wissen sollten.

In diesem Artikel wird einer dieser Vorbehalte untersucht – wie man die async-Syntax in useEffect() verwendet.

Was ist useEffect() in React?

useEffect() ist eine Lösung, die es Ihnen ermöglicht, Nebenwirkungen in funktionalen Komponenten zu behandeln. Wenn Sie zuvor Klassenkomponenten verwendet haben, können Sie es sich als Alternative zu Lebenszyklusmethoden vorstellen.

Die Nebenwirkungen in React-Anwendungen sollten sich auf useEffect() beschränken. Gängige Beispiele sind die Zeitberechnung oder das asynchrone Laden externer Daten durch Anfragen, was uns zu unserem Hauptthema bringt.

So verwenden Sie die async-Syntax in useEffect in React

Wenn Sie versuchen, eine async-Funktion als useEffect-Callback zu verwenden, erhalten Sie eine Fehlermeldung, dass der Hook sie nicht unterstützt.

Was genau können Sie also tun, wenn Sie diese Syntax zum Laden von Daten oder für andere Zwecke verwenden müssen? Und warum haben die Macher von React beschlossen, useEffect() mit der async-Syntax inkompatibel zu machen?

Beginnen wir mit der zweiten Frage. useEffect() unterstützt keine async-Callbacks, da solche Funktionen normalerweise eine Bereinigung erfordern.

Nebenwirkungen müssen vorsichtig gehandhabt werden, und die falsche Handhabung einer async-Funktion innerhalb des Hooks kann zu Speicherlecks oder anderen Fehlern führen, die Ihre Anwendung aufdecken könnten. Deshalb hat sich das Team hinter React entschieden, dies nicht zuzulassen.

Was die erste Frage angeht, gibt es glücklicherweise eine Bibliothek, die es Ihnen ermöglicht, async-Funktionen in useEffect() einzufügen, ohne einen Fehler zu erhalten.

Die beste Lösung zur Verwendung der async-Syntax innerhalb von useEffect in React

Wenn Sie die Syntax async await verwenden müssen, ist die beste Lösung die Verwendung eines Pakets use-async-effect. Dieses Paket bietet einen leicht modifizierten useAsyncEffect()-Hook, der die gleiche Funktionalität wie useEffect() hat, aber die Verwendung der async-Syntax erlaubt.

Es ist sehr leicht zu erlernen. Es akzeptiert sogar dieselben Argumente wie das normale useEffect().

Um mehr über die Installation und andere Details zu erfahren, lesen Sie die offiziellen Dokumente.