DEV Community

The Secret Life of JavaScript: The Async Generator

Aaron Rose on February 17, 2026

How to handle streams of data with for await...of. Timothy was rubbing his temples. On his screen was a function that looked like it had been f...

Read full post

Bhavin Sheth • Feb 17

This is a great explanation. I ran into this exact problem when working with a paginated API — I was waiting for everything to load before showing anything, and the UI felt slow. Switching to an async generator made a huge difference because I could process and show data immediately. Also +1 for mentioning AbortController — stopping the stream is something many examples forget, but it’s very important in real apps.

Aaron Rose • Feb 17

✨🙏

Matthew Hou • Feb 20

Async generators are one of those features that are harder to discover than they should be.

The use case where they clicked for me: streaming data from an API endpoint where you don't know the size upfront. Instead of buffering everything and then processing, or setting up complex event emitter chains, you get a clean for await...of loop that handles backpressure naturally.

The footgun: forgetting that you can only iterate an async generator once. Spent an embarrassing amount of time debugging why my "retry" logic wasn't working before I figured that out.

Aaron Rose • Feb 20

❤✨🙏

alptekin I. • Feb 19

Great and mind opening post. Thank you for sharing. I learned something, again

Aaron Rose • Feb 19

🙏❤

Kai Alder • Feb 17

The "bucket vs stream" analogy really clicked for me. I used this exact pattern recently when building a log viewer that needed to tail thousands of entries from a remote API. One thing worth mentioning though - if you're yielding individual items from each page (like the for (const user of data.users) loop), you might want to consider yielding the whole page as a chunk instead, especially if your consumer can handle batches. Yielding one-by-one is cleaner but can add overhead when you've got thousands of items per page. Also curious if anyone's combined this with ReadableStream? Since Node 18+ has web streams built in, you can pipe an async generator straight into a ReadableStream which opens up some nice composition patterns.

Aaron Rose • Feb 17

✨🙏❤️

Nadim Mahmud • Feb 17

I have a question is async data rerender while i click any button or load it will be helpful if you give me an example !

Aaron Rose • Feb 17

Great question, Nadim! 🚀

You are touching on the most important part: How do we get this onto the screen?

The Async Generator doesn't update the screen automatically. Instead, it hands you data piece-by-piece inside the loop. You write the code inside that loop to update the UI (or "rerender") the moment a new piece of data arrives.

Here is a simple example of how you would hook this up to a Button Click:

const button = document.getElementById('load-btn');
const list = document.getElementById('user-list');

button.addEventListener('click', async () => {
  // 1. Start the stream when user clicks
  const userStream = fetchUsers();

  // 2. Loop through the stream
  for await (const user of userStream) {
    // 3. Render THIS user immediately!
    // We don't have to wait for the whole list.
    const item = document.createElement('li');
    item.innerText = user.name;
    list.appendChild(item);
  }
});

The Result: When the user clicks, they see the first item appear instantly, then the second, then the third. They don't have to wait for all 50,000 users to load. The "rerender" happens incrementally!

Pro Tip: For very fast streams (hundreds of items per second), you might want to batch updates using requestAnimationFrame or a micro-batching technique to avoid overwhelming the renderer.