javascript / intermediate
Snippet
Synchronisierung asynchroner Datenabfragen mit einem Flag für veraltete Antworten
Beim Abrufen von Daten in React auf Basis dynamischer Props können schnelle Änderungen zu überlappenden Netzwerkanfragen führen, die in falscher Reihenfolge aufgelöst werden (Race Conditions). Durch die Verwendung eines booleschen Flags (`isCurrent`) innerhalb jedes Effect-Lebenszyklus, das in der Cleanup-Funktion auf `false` gesetzt wird, wird sichergestellt, dass veraltete asynchrone Antworten oder Fehler ignoriert werden, falls die Komponente mit einer neuen `userId` neu gerendert wird, bevor das vorherige Promise abgeschlossen ist.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function UserProfile({ userId }) {const [userData, setUserData] = React.useState(null);const [fetchError, setFetchError] = React.useState(null);React.useEffect(() => {let isCurrent = true;async function loadUser() {try {const response = await fetch(`/api/users/${userId}`);if (!response.ok) throw new Error(`HTTP status: ${response.status}`);const data = await response.json();if (isCurrent) {setUserData(data);}} catch (err) {if (isCurrent) {setFetchError(err.message);}}}loadUser();return () => {isCurrent = false;};}, [userId]);return <div>{fetchError ? `Error: ${fetchError}` : userData?.name}</div>;}
react
Erklärung
1
let isCurrent = true;
Initialisiert ein Closure-Flag für den aktuellen Effect-Zyklus, um zu prüfen, ob die aktive Anfrage noch relevant ist.
2
if (isCurrent) { setUserData(data); }
Aktualisiert den Komponenten-State nur dann mit den empfangenen Daten, wenn der Kontext nicht durch einen neueren Render abgelöst wurde.
3
return () => { isCurrent = false; };
Wird beim Unmounten oder vor dem nächsten Ausführen des Effects aufgerufen und markiert noch ausstehende Antworten als veraltet.