DEV Community

OLEKSII SHEPEL
OLEKSII SHEPEL

Posted on

streamix: Generators + Operators - React Community Feedback = ?

#react #javascript #asyncawait #opensource

I’d like to introduce streamix, a small (~9KB) open-source library that adds Rx-style operator pipelines to native async generators.

This post is not a React integration announcement.
It’s an invitation to the React community to review the idea and share professional feedback.

The core idea

Async generators already model async data flows well:

async function* numbers() {
  for (let i = 0; i < 10; i++) yield i;
}

for await (const n of numbers()) {
  console.log(n);
}
Enter fullscreen mode Exit fullscreen mode

streamix keeps this model but adds composition:

import { from, map, filter, take } from '@epikodelabs/streamix';

const stream = from(numbers()).pipe(
  filter(n => n % 2 === 0),
  map(n => n * 2),
  take(3)
);

for await (const n of stream) {
  console.log(n); // 0, 4, 8
}
Enter fullscreen mode Exit fullscreen mode

No observables — just async generators with operators.

Why I’m asking React developers specifically

In many React apps, async logic ends up split across useEffect, refs, flags, and cleanup code:

  • debouncing and throttling
  • request cancellation
  • race conditions
  • stale closures
  • mixed concerns inside effects

Conceptually, those problems map well to stream processing — but RxJS is often seen as too heavy or unfamiliar.

streamix explores a different trade-off:
native async generators + small operator layer.

I want to understand if this idea makes sense from a React professional’s point of view.

This is NOT a finished React solution

There is no official hooks package yet.

Before building one, I want feedback on questions like:

  • Is this a good abstraction for React at all?
  • Would hooks over async generators feel natural?
  • Does pull-based streaming align with React rendering?
  • Where would this clash with React 18 / concurrency?
  • Is this solving real pain points — or inventing new ones?

Hypothetical hook ideas (for discussion only) 

const value = useStream(stream, initialValue);

const [stream$, emit] = useStreamCallback();

useStreamEffect(stream$, value => {
  console.log(value);
});
Enter fullscreen mode Exit fullscreen mode

These are conversation starters, not an API proposal.

What makes streamix different (quick summary)

  • Pull-based async iteration (built-in backpressure)
  • Small footprint (~9KB)
  • Native async generators, not observables
  • Operators work with sync & async logic
  • Can be consumed via for await...of or subscribe()

What I’d love feedback on

If you’re experienced with React:

  • Does this abstraction feel aligned or alien?
  • Would you reach for this over useEffect + helpers?
  • What async patterns hurt most in real apps?
  • How should this coexist with React Query / SWR?
  • What would immediately disqualify this approach?

Honest criticism is more valuable than approval.

Links

Closing

If you have strong opinions — positive or negative — I’d really appreciate hearing them in the comments.

Especially if you’ve dealt with complex async flows, RxJS in React, or hard-to-maintain useEffect logic.

Thanks for reading 🙏

Top comments (0)