npm install react-coroutine
Coroutines are computer program components that generalize subroutines for nonpreemptive multitasking, by allowing multiple entry points for suspending and resuming execution at certain locations. Coroutines are well-suited for implementing more familiar program components such as cooperative tasks, exceptions, event loop, iterators, infinite lists and pipes.
— Wikipedia
Use generators, async functions, and async generators to render React components based on async state.
import React from 'react';
import Coroutine from 'react-coroutine';async function UserListContainer() {
try {
// Wait for async data and render it in the same way as plain components
const users = await Users.retrieve();
return <UserList users={users} />;
} catch (error) {
// Handle failures in place with just JavaScript tools
return <ErrorMessage error={error} />;
}
}
export default Coroutine.create(UserListContainer);async function* PokemonInfoPage({ pokemonId, pokemonName }) {
// Use generators to provide multiple render points of your async component
yield <p>Loading {pokemonName} info...</p>;
// Easily import components asynchronously and render them on demand
const { default: PokemonInfo } = await import('./PokemonInfo.react');
const data = await PokemonAPI.retrieve(pokemonId);
return <PokemonInfo data={data} />;
}
export default Coroutine.create(PokemonInfoPage);function* MovieInfoLoader({ movieId }) {
// Assuming cache.read() return a value from cache or Promise
const movieData = yield movieCache.read(movieId);
return <MovieInfo data={movieData} />;
}
export default Coroutine.create(MovieInfoLoader);See details page for more.
React Coroutine attempts to use basic language features for the sake of solving problems that are usually solved with APIs and new abstractions that require particular knowledge about them and sometimes about internal processes (leaky abstractions).