DEV Community

Discussion on: What React RxJS libs do You Use?

kosich profile image
Kostia Palchyk Author • Edited on

Hey, Jesse!

Great question, a lot happening here :)

First, about observables inside render fn:

useMemo is fine, but it does not guarantee that the content will be preserved. Consider either using some useConst analogue, or moving Observables outside the render function.

const Component = () => {
  let time$ = useConst(() => timer(0, 1000));

  return <$div>{ timer$ }</$div>
Enter fullscreen mode Exit fullscreen mode

Also, check out this experimental update to the <$> library:

const Component = createComponent$(() => {
  let time$ = timer(0, 1000);

  return <$div>{ timer$ }</$div>
Enter fullscreen mode Exit fullscreen mode

The component function is executed only once, thus making it safe to create Observables here. This is a beta feature and I'm currently testing it. It's available in the @next npm version and can be trialled online More details at github/react-rxjs-elements/pull/9

Second, the double mapping

The services$.pipe( map(items => … thing always bothered me. There are also several solutions to it.

1: Use a separate component to render the list

function App() {
  let source$ = useConst(() => getData('/url/to/data'));

  return <$>{
      map(response => <List items={response}/>)
Enter fullscreen mode Exit fullscreen mode

2: Use rxjs-proxify to do the in a more concise way:

export function App() {
  let source = useConst(() => proxify(getData('/url/to/data')));

  return <ul>
    <$>{ =>
        <li key={i.key}>{i.title}</li>
Enter fullscreen mode Exit fullscreen mode
Try this example in online playground

Proxify provides magic like proxify( of(42) ).toString() which returns an Observable<string>. So .map(…) in the example above creates another Observable, by calling .pipe(map( items =>…) )) on the underlying Observable. More on the rxjs-proxify here


And just a side note: use ajax from rxjs/ajax to remove the

  mergeMap(res => res.json())
// ≈
Enter fullscreen mode Exit fullscreen mode


If that doesn't suit your needs — be sure to checkout other libs I mention, they are all pretty amazing.

Cheers 🙂