Consecutive updates prevent re-evaluation of derived atom in v2.11.0 #2916

yuneco · 2025-01-07T17:19:31Z

yuneco
Jan 7, 2025

Bug Description

In Jotai v2.11.0, batch processing was introduced for atom re-evaluation. As a result, in some cases, certain derived atoms are not re-evaluated when an atom is updated. Below is a typical reproduction example.

In this example, countAtom holds a simple count and objAtom holds an object. For the object atom, we use the atomWithRefresh pattern, which does not change the object reference itself but triggers re-evaluation by updating a version.

Under Jotai v2.10.4, Update button causes both countAtom and objAtom to update, and the two counts on the screen increase in sync. However, under v2.11.0, countAndObjAtom is no longer re-evaluated, and the two counts are not synchronized.

// counter atom
const countAtom = atom(0);

// object atom with versioning
const objBaseAtom = atom({ value: 100 });
const objVersionAtom = atom(0);
const objAtom = atom((get) => {
  console.log("eveluate objAtom");
  get(objVersionAtom); // depend on version
  return get(objBaseAtom);
});

const updateObjAction = atom(undefined, (get, set) => {
  get(objBaseAtom).value++; // update object content
  console.log("updateObjAction: increment objVersionAtom");
  set(objVersionAtom, (c) => c + 1); // update version to cause re-evaluation
});

// action to update both counter and object
const updateCounterAndObjAction = atom(undefined, (get, set) => {
  set(updateObjAction);
  console.log("updateCounterAndObjAction: increment countAtom");
  set(countAtom, (c) => c + 1);
});

// derived atom with both counter and object
const countAndObjAtom = atom((get) => {
  console.log("eveluate countAndObjAtom");
  const obj = get(objAtom);
  const count = get(countAtom);
  return { count, obj };
});

export const App = () => {
  const { count, obj } = useAtomValue(countAndObjAtom);
  const countDirect = useAtomValue(countAtom);
  const update = useSetAtom(updateCounterAndObjAction);

  return (
    <div>
      <h2>two count should be same</h2>
      <p>count direct: {countDirect}</p>
      <p>count derived: {count}</p>
      <p>obj.value: {obj.value}</p>
      <button type="button" onClick={update}>
        Update
      </button>
    </div>
  );
};

I do not fully understand the changes introduced in v2.11.0, but I suspect the following sequence of events:

set(updateCounterAndObjAction) is called
set(updateObjAction) is called
set(objVersionAtom, (c) => c + 1) is called
recomputeDependents is triggered, marking countAndObjAtom as dirty
finishRecompute is added to the batch
set(countAtom, (c) => c + 1) is called
recomputeDependents is triggered again, marking countAndObjAtom as dirty once more
finishRecompute is added to the batch
The batch is flushed, and the first finishRecompute runs
countAndObjAtom is re-evaluated; since neither obj nor count has changed, the result remains the same but its dirty flag is cleared
The second finishRecompute runs
countAndObjAtom would normally be re-evaluated, but since its dirty flag is already cleared, the cached value is used, and no actual re-evaluation occurs

Based on this assumption, here is the minimal reproduction code. This code also behaves normally under v2.10.4, but under v2.11.0, val B and val D no longer stay in sync.

const atomA = atom(0);
const atomB = atom(0);

const atomC = atom((get) => {
  get(atomA);
  return 0;
});

const atomD = atom((get) => {
  get(atomC);
  return get(atomB);
});

const updateAtom = atom(undefined, (get, set) => {
  set(atomA, (c) => c + 1);
  set(atomB, (c) => c + 1);
});

export const App2 = () => {
  const valB = useAtomValue(atomB);
  const valD = useAtomValue(atomD);
  const update = useSetAtom(updateAtom);

  return (
    <div>
      <h2>val B should be same as val D</h2>
      <div>val B: {valB}</div>
      <div>val D: {valD}</div>
      <button type="button" onClick={update}>
        Update
      </button>
    </div>
  );
};