What's the difference between react-coroutine and async-reactor?

[MaxGraey]

Hi! Could you explain please what's benefits comparable to async-reactor your project have? It seems this two projects very quite similar except Async Reactor by xtuc is more mature?

[alexeyraspopov]

Back in 2016 (which is almost 2 years ago) when I started React Coroutine, it was a solution for my project that made code way flexible comparing to what it was being written with React Transmit. The code is still in production and I continue using React Coroutine for an extended set of cases and not just for pet projects. This means, if I encounter any issue, I need to immediately fix it.

Comparing to async-reactor, I see a set of implementation differences:

• Sync/Async Generators support. Besides async functions, React Coroutine allows usage of async generators that dramatically increase the set of use cases a one can implement. for..await..of and yield/await work without limitations in the same way as defined by the language spec.
• Smaller API surface. There is nothing you need provide to a factory function besides the target async function/generator. This means less expectations and more flexible way to handle things like loading and failure state — you basically continue using language feature which is the main goal of the project. As functional components, using async functions or generators feels in the same way.
• Reaction on props update. React Coroutine will re-run the target async function or generator when new props will be received by your component. That's something you would expect because of how it works with plain functional components. This also increases the set of use cases. See an example here

Such differences allows to do much more with your components, keeping the same level of simplicity and expectations. Here are some of the cases I use frequently:

• Optional render of pending state. Using async generators I can yield a piece of UI that can be rendered immediately and then replaced by different piece based on async request or other event. You can find a code example the examples folder. The example shows that you can do concurrent requests while showing a piece of UI (a.k.a. loading state, that can also support RAIL Model without any additional APIs or configurations).
• Incremental rendering. In one of my projects I have a data viz components that needs data from two different data sources. Since it takes longer for a particular data source to return data, using async generators I'm able to prerender partial state of the component and then await for the final part of the data to arrive:

export default Coroutine.create(DataVizCoroutine);

async function* DataVizCoroutine({ bucketId, dataFilter }) {
  let filterSetup = await ConfigAPI.retrieve({ dataFilter });

  // Assuming `ConfigAPI` has almost immediate result, rendering partial state
  yield <DataViz filters={filterSetup} />;

  // Awaiting for heavy data to arrive at some point
  let dataBuckets = await DataStorageAPI.retrieve({ bucketId });

  // Rendering the same component but with complete data. The UI transition
  // happens without blinking.
  return <DataViz filters={filterSetup} data={dataBuckets} />;
}

• Render UI listening to a data source. Using async iterators, I can re-render a piece of UI based on an event that comes from a specific data source that has async iterators interface, for example Async Queue.

export default Coroutine.create(ResourceMonitorCoroutine);

async function* ResourceMonitorCoroutine({ resourceId }) {
  yield <p>Awaiting for resource usage stats...</p>;

  for await (let stats of ResourcesAPI.subscribeTo(resourceId)) {
    yield <ResourceUsage stats={stats} />;
  }
}

[alexeyraspopov]

I hope this answers your question. I may need to update some parts of docs to reflect the flexibility and specific use cases besides just fetching data and doing code splitting.

[MaxGraey]

Thanks