Recompose: rx HOC idea

[istarkov]

Just found this project react-observable-subscribe and got some idea about recompose HOC. Not sure it is a good idea but.

mapPropsToObservables(
  ['name'],
  ({ name$ }) => (
    name$: name$.debounce(300).map(name => name + ' Haha'),
  )
)(
  ({ ordinaryProp, name$ }) => (
    <div><Subscribe>{name$}</Subscribe></div>
  )
)

<Suscribe> also can be written to suport attributes on inner components

<Subscribe on={color$}>{
(color) => <div style={color}>Lala</div>
}</Subscribe>

[acdlite]

What's the advantage over mapPropsStream()?

[istarkov]

In most cases is simple performance I think. Transforming frequently changing prop to observable will allow to avoid rerenders of main component.
So having component structure like <div><Heavy /><Subsribe on={hello$} /></div> where will be no need to make any optimizations on <Heavy /> like pure

Also for a long lists, for example you have 1000 points and want to support fast controllable hover on them (_controllable here means that we receive hoveredPointId as external prop_).
This will be really slow on non production react env, and just slow on production.
Having hoverPointId$ as a stream, I could just pass it as a prop for each point, and only the affected point will hover. This gives really good performance on both React env, as list is not rerendered on each hover change.

Just as some easy helper to start using rx partially. As mapPropsStream need you to combine streams, change the way of working with events etc.
Something like component above will allow to use streams for some situations without all of that things.

[acdlite]

The problem with putting observables inside a component's render method, like this

<div><Subscribe>{name$}</Subscribe></div>

is that people will be tempted to apply transformations inside the render method:

<div><Subscribe>{name$.map(formatName)}</Subscribe></div>

This means a new observable will be created on each render, which means the Subscribe component will have to create and destroy a new subscription on every render.

It's impossible to make this mistake with mapPropsToStream and createComponent, because transformations are applied only once and there's only a single subscription for the entire lifecycle of the component.

[acdlite]

Also, all the benefits you cite are currently possible with mapPropsToStream, as far as I can tell.

[istarkov]

I see, thank you, just started to heavily use rxjs and my mind is bleeding ;-)

[istarkov]

The question is, could you (_or anybody who read this_) share some real heavy examples with rx-recompose somewhere, there is no need examples to work,
just to view ideas and patterns used?

[wuct]

@istarkov Have you seen this one?

[istarkov]

Yes ;-) too simple

[wuct]

I would like to see some heavy examples, too 😄

[acdlite]

Honestly, most of my uses of it are about that simple. Another thing I commonly use it for is to fetch data based on a prop using a promise and flatMap. I'll try to work on some examples soon.