can bind overload return a single stream instead of creating a new stream every time?

[csenio]

I'm using the overload on bind quite a bit to "connect react state and rxjs". So usually like this:

const [useMyObservable] = bind(prop => of(prop).pipe(...))

function MyComponent({prop}){
  const myValue = useMyObservable(prop)

  return <di...
}

The issue is that this code might suspend every time the prop is changed. Example: codesandbox 1

For real users, this behavior is basically never wanted. I can kind of solve it with createSignal like this: codesandbox 2

The issue with the hacky useEffect / createSignal is that my observables and components are not reusable now. It would be impossibe to render a list of my <Reversed /> components for example.

Is there a "rxjs way" of tackling this problem? Feels like this is something every real app would run into quite a bit.

[voliva]

I can't access the linked sandbox examples, "not found or I don't have the right permission"

The factory overload is meant for "instance observables", this is when you want to have one observable for each specific instance. This is why it's better to think of all the parameters as IDs of the observable, same as it would be as the key of a relational database.

With the factory overload you can have for instance a hook to watch one employee by its id. Then every component that calls that hook with the same employee id will have the same subscription and result coming back.

I can't see your examples, but as a general rule of thumb, if you want to have a list of stuff where every item has their own observable then using the factory overload is the way to go, If you need to use a prop on your global state, try to rethink on how that prop should actually interact with the state, potentially bringing it out into a new bind. But it's hard to give concrete advice without seeing the problem.

[csenio]

Sorry, I updated the sandboxes to be public now!

"parameters as IDs" makes sense as a mindset and explains why my use of the overload wasn't working well.

That still leaves a hole in my mindset for how to best create reusable signals / streams.
Since observables have to be created outside the component, it makes the composition a bit hard.

This is my attempt at a solution, but I suspect that I'm still misunderstanding something that makes it necessary for me to go through such a convoluted route: codesandbox 3

Amazing work on the library btw, and thanks for the reply 🙌🏻