Auto unsubscribe on the element is detached

Thanks for the library.

Let’s say I have the following example:

function App() {
  const [show, setShow] = React.useState(true);
  const [text, updateText] = useObservableState<string>(
    text$ => text$.pipe(delay(1000), map(() => Math.random().toString()), finalize(() => console.log('done'))),
    'Init'
  )

  return (
    <section>
      <button onClick={() => setShow((v) => !v)}>Toggle</button>
        {show && <h1 onClick={updateText}>{text}</h1>}
    </section>
  )
}

When we toggle the element the subscription is still alive. The finalize isn’t invoked. How do we deal with this situation?

Thanks.

Btw, I also get a type error:

[crimx]

Unfortunately as I had explained in the docs performing synchronous side effects is not safe in concurrent mode.

It might be okay if just a Behaviour Subject but users may create all kinds of observable pipelines. If you have for example an initial remote data fetching, this could be triggered multiple times if the subscription happens in render phase.

[ArielGueta]

Ok, thanks. Last question:

What about a use case where I have a BehaivorSubject? In this case, I expect that useObservable will take the initial value synchronously and use it instead of passing a “redundant” initial value and cause an additional re-render. What do you think?

It’s common usage in state management libraries such as Akita.