Allow loader functions to be generators

[fionawhim]

What is the new or updated feature that you are suggesting?

Allow loader functions to be async generators.

The first time the function yielded a value, React Router would be able to render the element, and the most recently-yielded value would be available through useLoaderData. React Router would then await the next value, and re-render when it yielded. Returning a value from the loader would cause a final render.

If the user navigated away from the route with the loader, React Router would stop requesting additional values from the generator.

With SSR, React Router could loop until the generator returned, ignoring the intermediate yielded values and only rendering the final result.

Why should this feature be included?

This is a more general, more flexible way of managing the current defer / <Await> pattern for partial data.

Async generators make the stale-while-revalidate pattern straightforward to implement, as they can yield stale data immediately, then wait for the revalidated data before returning.

This can also be used for data that is streamed in in chunks, as the loader could yield after each page of data is returned and the component could render what was available each time.

[brophdawg11]

I'm going to convert this to a discussion so it can go through our new Open Development process. Please upvote the new Proposal if you'd like to see this considered!

[cmmartti]

This was discussed in the Roadmap Planning #4 livestream, starting at 8:45.

[fionawhim]

Thanks for the thoughtful consideration! I enjoyed watching the pieces fall into place for you from this sparse request.

I think the combined insight of “defer/await could be built on this, probably in a way with less syntax” tempered with “if there aren’t enough use cases we want to support beyond defer/await is it worth learning generators” is likely key.

Generators tend to feel reasonably compatible with React in ways that promises sometimes don’t since “a newly-yielded value causes a rerender” (as you noticed) is rather natural, especially with hooks.

FWIW for me at least I got more comfortable with generators because of async use cases like this… the “Fibonacci generator” example you called out that’s always used is hard to get your mind around because it doesn’t actually make much sense as a concrete use case. Async generators clicked for me much better.

[levrik]

I think this would also help a lot with integrating libraries like Apollo Client which is quite cumbersome atm. You either have to give up on the caching mechanisms (and re-renders on cache change) or have to hack your way around it by using both, the Apollo Client hooks and React Router loaders.

[mitoihs]

I would like to stream JSON lines/NDJSON from the server to the client. The current approach with Promises allows only an all-or-nothing approach but I want to show partial results to the user as soon as they become available.