Post

A few weeks ago, I used ES6 generators for the first time in my career. First of, it felt amazing (hoping Symbols get their turn!). Secondly, I wanted to share a practical use case in the context of a React app.

I was implementing a complex flow where a user provides a prompt in the UI, then I programmatically enhance it and attach some context, and then start a long-running process where I feed this data to an LLM, wait for the response, then feed it to another LLM (potentially changing it), and so forth.

It was a huge function with many steps. I would repeatedly call different LLM APIs, and each step needed the result of the previous one, with some sync actions in between. Before each async step, I would set a status state and render it to inform the user of the currently performing step.

I didn't like having such a long function in my React component, but I didn't know how to extract it since I needed to sequentially update the status state upon each async step complete. And then I remembered about generators.