Async atom causes unnecessary updates

[angrypie]

Bug Description

I'm experiencing an issue where an atom containing an async operation is updating more frequently than expected. The intention is to update the minutes value once per minute, but it's updating much more frequently.

export function App() {
  const [minutes] = useAtom(minutesAtom);
  useAtom(updateEffect);
  const now = Date.now();
  return (
    <div>
      <div>{minutes}</div>
      <div>{now} update should be once per minute but it's not</div>
    </div>
  );
}

const timeMsAtom = atom(0); //update clock every 100ms
const updateEffect = atomEffect((get, set) => {
  const interval = setInterval(() => set(timeMsAtom, Date.now()), 100);
  return () => clearInterval(interval);
});
const asyncResourceAtom = atom(
  //some async resource we need
  async () => new Promise((resolve) => setTimeout(resolve, 1000))
);
const minutesAtom = atom(async (get) => {
  const ms = get(timeMsAtom);
  const asyncResource = await get(asyncResourceAtom); // we need some async resource for example
  return Math.round(ms / 1000 / 60);
});

The issue seems to be resolved when using unwrap on the asyncResourceAtom.

const syncResourceAtom = unwrap(asyncResourceAtom);
const minutesAtom = atom((get) => {
  const ms = get(timeMsAtom);
  const asyncResource = get(syncResourceAtom); // we need some async resource for example
  return Math.round(ms / 1000 / 60);
});

Is it something about checking equality of current and previous state in async atom?

Reproduction Link

https://codesandbox.io/p/sandbox/objective-moon-6w2f2x

[dai-shi]

Can you reproduce the issue without jotai-effect?
Otherwise, I think @dmaskasky might be able to help.

[rothsandro]

The behavior can be reproduced when replacing jotai-effect with a simple useEffect that updates the timeMsAtom atom.

As far as I understand: The minutesAtom depends on the timesInMs atom which changes every 100ms and therefore minutesAtom will be recomputed every 100ms. Because the atom is async, it produces a new Promise every time. The useAtom() value subscribed to the async atom and triggers a re-render whenever the value changes - which always changes because it's a new promise (even if the resolved value will be the same).

[dai-shi]

Thanks for the explanation.

So, I guess this would help:

const roundTimeAtom = atom((get) => {
  const ms = get(timeMsAtom);
  return Math.round(ms / 1000 / 60);
});

const minutesAtom = atom(async (get) => {
  const roundTime = get(roundTimeAtom);
  const asyncResource = await get(asyncResourceAtom); // we need some async resource for example
  return roundTime;
});

[angrypie]

Yes, it works, but only as long as roundTimeAtom is not async. Personally, I don't have a problem with this behavior, though it is not very obvious. I couldn’t find any hint about it in the documentation, so I ended up spending quite some time debugging.

[dai-shi]

You don't need a promise to make it break. This does break too:

const roundTimeAtom = atom((get) => {
  const ms = get(timeMsAtom);
  return [Math.round(ms / 1000 / 60)];
});

const minutesAtom = atom(async (get) => {
  const [roundTime] = get(roundTimeAtom);
  const asyncResource = await get(asyncResourceAtom); // we need some async resource for example
  return roundTime;
});

[dai-shi]

I mean, it can be less obvious too. It's difficult.