javascript / expert
Snippet
Async Generator-Windowing für paginierte React-Sammlungs-Iterationen
Das Verarbeiten riesiger Server-Arrays im React-Zustand verursacht oft Speicherprobleme, wenn alle Seiten gleichzeitig abgerufen werden. Asynchrone Generatoren liefern paginierte Array-Häppchen auf Anfrage über 'for await...of'-Schleifen, ohne den Haupt-Event-Loop beim Rendern zu blockieren.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
export async function* fetchPaginatedBatchStream(fetcher, batchSize = 50) {let page = 0;let hasMore = true;while (hasMore) {const chunk = await fetcher(page, batchSize);if (!Array.isArray(chunk) || chunk.length === 0) {hasMore = false;break;}yield chunk;if (chunk.length < batchSize) hasMore = false;page++;}}
react
Erklärung
1
export async function* fetchPaginatedBatchStream(fetcher, batchSize = 50)
Definiert eine asynchrone Generator-Funktion, die einen AsyncIterator von Array-Batches zurückgibt.
2
yield chunk;
Liefert das aktuell abgerufene Batch-Array an den Konsumenten und pausiert den Generator-Zustand.
3
if (chunk.length < batchSize) hasMore = false;
Wertet Abbruchkriterien basierend auf der zurückgegebenen Sammlungsgröße aus, um den Kontrollfluss zu beenden.