Observable atom does not get unsubscribed from if it never mount

[tien]

Bug Description

If the atom was started but never mounted, it will lead to a leaked subscription.

Reproduction Link

https://codesandbox.io/p/sandbox/clever-rubin-rsm38y

[dai-shi]

It's a known limitation. That's why unstable_timeout was introduced. It's the only hack suggested by React team as far as I remember.
This hasn't been something I'm happy with, and I would like to see alternative ideas.

[dai-shi]

The problem is:

• Observable doesn't have a capability to "peek" the next value.
• If we subscribe in useEffect, it's too late (unless we show some default value.)

So, we subscribe in render phase, and setTimeout for unsubscribe. If useEffect fires, we clear the timeout.

[tien]

Thank you, sorry for asking more questions. What would the behaviour be when setting unstable_timeout too high vs too low?

[dai-shi]

If it's too high, it will take time to release the memory.
If it's too low, it may unsubscribe before mount and re-subscribe on mount, which may cause extra re-render or even behave unexpectedly.

[tien]

Right, yes this is indeed a VERY hard problems, I've spent days trying solve this now, every solutions I can think of is a hack with downsides :(

This is a stretch, but are you in touch with anyone at the React team that can possibly help. or provide some sort of back door that could help with this?

[dai-shi]

I don't think they can help. React doesn't have a solution (at least when there was a long discussion in one of issues), and what they said is that the timeout is a valid workaround (as far as I remember.)

[tien]

@dai-shi I ended up using this very limited implementation:

import { atom, type Getter } from "jotai";
import { type Observable, firstValueFrom } from "rxjs";

type Data<T> = { value: T } | { error: unknown };

export function atomWithObservable<TValue>(
  getObservable: (get: Getter) => Observable<TValue>,
) {
  const valueAtom = atom((get) => {
    const observable = getObservable(get);

    const valueAtom = atom<Data<TValue | Promise<TValue>>>({
      value: firstValueFrom(observable),
    });

    valueAtom.onMount = (update) => {
      const subscription = observable.subscribe({
        next: (value) => update({ value }),
        error: (error) => update({ error }),
      });

      return () => {
        subscription.unsubscribe();
      };
    };

    return valueAtom;
  });

  return atom((get) => {
    const data = get(get(valueAtom));

    if ("error" in data) {
      throw data.error;
    }

    return data.value;
  });
}

It creates 1 additional temporary subscription, always suspends initially, and only updates itself after mount. But it never leaks memory and works well enough for what I need. Do you think this is good enough to be added as a recipe to the Jotai docs?

[dai-shi]

Oh, firstValueFrom looks nice. Does it "peek" the next value? Does it always suspend initially?

Yeah, it looks good for a recipe. It only works with rxjs though.

[tien]

• firstValueFrom basically returns a promise that opens a subscription that will unsubscribe immediately after the first value. It’s an acceptable hack in my case.
• It will always suspend on React 19 at first, because the initial value is always a promise, even if it's already resolved.
• Yes, to make it compatible with any observable implementation, you would have to self-implement a version of firstValueFrom, which should be relatively simple anyway.

[dai-shi]

• firstValueFrom basically returns a promise

Oh, I see. It returns a promise.