Jotai v2.7.0+ useAtomValue for Async Derived Atoms Not Updated Under Specific Conditions #2565

yuneco · 2024-05-22T16:47:24Z

yuneco
May 22, 2024

Hi,

In #2554, I reported an edge case regarding the re-calculation of derived atoms, which has been fixed in v2.8.1 (great thanks for the quick response!). However, I noticed that v2.8.1 may still have a similar problem.

Sample Reproducible Code:

https://codesandbox.io/p/sandbox/jotai-2-7-atom-recalculation-issue-forked-45smpl

Sample Code Overview and Expected Output:

We create a simple counter atom that can be incremented synchronously using an update action.

const countAtom = atom(0);
const countUpAction = atom(undefined, (get, set) => {
  set(countAtom, (prev) => prev + 1);
});

We also create an async atom that provides a counter base value. The total counter value can be obtained via totalCountAtom.

// get counter base value (simulate getting via API)
const baseCountAtom = atom(async () => await Promise.resolve(100));

// get count value including base count
const totalCountAtom = atom(async (get) => {
  const base = await get(baseCountAtom);
  const count = get(countAtom);
  const total = base + count;
  console.log("render totalCountAtom", { base, count, total });
  return total;
});

In the components, we expect the incremented value with every single click of the button that calls countUpAction.

const Count = () => {
  const count = useAtomValue(totalCountAtom);
  console.log("render Count component", count);
  return <p>{count}</p>;
};

const App = () => {
  const up = useSetAtom(countUpAction);
  return (
    <div>
      <button onClick={up}>Count Up</button>
      <Suspense fallback="loading...">
        <Count />
      </Suspense>
    </div>
  );
};

This works on v2.6.5, but does not update after second click on v2.7.0+ including v2.8.1.

v2.6.5 Console log

render totalCountAtom {base: 100, count: 0, total: 100}
render Count component 100
render Count component 100
render totalCountAtom {base: 100, count: 1, total: 101}
render totalCountAtom {base: 100, count: 1, total: 101}
render Count component 101
render Count component 101
render totalCountAtom {base: 100, count: 2, total: 102}
render totalCountAtom {base: 100, count: 2, total: 102}
render Count component 102
render Count component 102
…

v2.8.1 Console log

render totalCountAtom {base: 100, count: 0, total: 100}
render Count component 100
render Count component 100
render Count component 100
render Count component 100
render totalCountAtom {base: 100, count: 1, total: 101}
render totalCountAtom {base: 100, count: 1, total: 101}
render Count component 101
render Count component 101
render totalCountAtom {base: 100, count: 2, total: 102}
render totalCountAtom {base: 100, count: 2, total: 102}
render totalCountAtom {base: 100, count: 3, total: 103}
render totalCountAtom {base: 100, count: 3, total: 103}
render totalCountAtom {base: 100, count: 4, total: 104}
…

In v2.8.1, the atom itself is re-rendered but the component using the atom value is not re-rendered. It seems this problem occurs when dependencies are read after an async atom read.

// NG
const totalCountAtom = atom(async (get) => {
  const base = await get(baseCountAtom);
  const count = get(countAtom);
  …
});

// OK
const totalCountAtom = atom(async (get) => {
  const count = get(countAtom);
  const base = await get(baseCountAtom);
  …
});

More to the point, the primary factor is not baseCountAtom but seems to be the await before get.

// NG
const totalCountAtom = atom(async (get) => {
  const base = await 100;
  const count = get(countAtom);
  …
});

// OK
const totalCountAtom = atom(async (get) => {
  const base = 100;
  const count = get(countAtom);
  …
});