atom not resetting to initial state instantly if provider is not unmounted

[RaulCote]

Hi,

First congratulations for all the amazing work you contribute to the front end state management world.

I have a question that I can't seem to solve, I'm testing Jotai as a way to bind Rxjs with React and I have detected that given a Provider we don't unmount, but all listeners to an atom are unmounted, and then we bring them back, the reset to the initial state can get delayed depending on the operations we are making.

As an example the code below, if both counters are hidden, and then I set to visible one of them, it keeps showing the last value (imagine that I hidden both counters at the second 20, so I unmount both components, wait two seconds, mount one again by setting the visibility to true, and 20 is still in there for a second until it rolls back to 1).

Am I missing something or is it a bug?

It seems like the provider is still storing the last value, it doesn't clear it even if there are no one listening to it.

const seconds$ = interval(1000)
const secondsAtom = atomWithObservable(() => seconds$)

// even with this alternative implementation for secondsAtom the issue is the same
// so it's not directly related with atomWithObservable

//const secondsAtom = atom(0)
//secondsAtom.onMount = setAtom => {
//  let counter = 0
//
//  const intervalId = setInterval(() => {
//    counter = counter + 1
//    setAtom(counter)
//  }, 1000)
//
//  return () => {
//    clearInterval(intervalId)
//  }
//}

const FirstSecondsCounter = withSuspense(() => {
  const [seconds] = useAtom(secondsAtom)

  return <div>{seconds}</div>
})

const SecondSecondsCounter = withSuspense(() => {
  const [seconds] = useAtom(secondsAtom)

  return <div>{seconds}</div>
})

export const SharedState = () => {
  const [visibleOne, setVisibleOne] = useState(false)
  const [visibleTwo, setVisibleTwo] = useState(false)

  return (
    <Provider>
      <Section className="flex-col h-60 w-80 gap-6 flex items-center justify-center">
        <div className="flex items-center gap-4">
          <Button onClick={() => setVisibleOne(v => !v)}>Toggle</Button>
          {visibleOne ? <FirstSecondsCounter /> : <div>hidden</div>}
        </div>

        <div className="flex items-center gap-4">
          <Button onClick={() => setVisibleTwo(v => !v)}>Toggle</Button>
          {visibleTwo ? <SecondSecondsCounter /> : <div>hidden</div>}
        </div>
      </Section>
    </Provider>
  )
}

[dai-shi]

the provider is still storing the last value, it doesn't clear it even if there are no one listening to it.

Yes, it's by design.
The lifetime of atom value in the store is the same as the lifetime of the atom config. We don't delete the value even if all subscriptions are unsubscribed.

Think of it as a subscribeable WeakMap. If you delete atom config, the value will be garbage collected.

I think you can reset the value with onUnmount.

const anAtom = atom(0)
anAtom.onMount = (set) => {
  const onUnmount = () => {
    set(0)
  }
  return onUnmount
}

[RaulCote]

Thanks for the fast answer. That solution works well with regular atom creation, I guess not with async atoms (or at least not for atomWithObservable).

A possible solution is to make the observable startWith a default value, this works resetting to 0, the trade off would be I lose the loading state.

const seconds$ = interval(1000).pipe(startWith(0))
const secondsAtom = atomWithObservable(() => seconds$)

What I can't figure it out is how without unmounting the Provider when all listeners unsubscribe make the atom enter on loading mode again. I guess it's not possible?

[dai-shi]

It's not possible with singe atom / atomWithObservable.
There are some ways, but one I have in mind is to put atom in an atom.

const internalAtom = atom(atomWithObservable(...));
export const theAtom = atom(
  (get) => get(get(internalAtom)),
  (_get, set) => set(internalAtom, atomWithObservable(...)) // reset function
);
theAtom.onMount = (set) => {
  return () => set(); // reset on unmount
};

[RaulCote]

Thanks a lot for your answers, very much appreciated!