Description
I am using an atom (A) to control if an atom (B) should return the value of an atom (C) otherwise a default value is returned. See the example below: https://codesandbox.io/s/dark-http-bsili?file=/src/App.tsx
const aAtom = atom<any>(false);
aAtom.debugLabel = "aAtom";
aAtom.onMount = (set) => {
console.log("onMount: aAtom");
setTimeout(() => {
set(true);
}, 1000);
};
const cAtom = atom<any>(1);
cAtom.debugLabel = "cAtom";
cAtom.onMount = (set) => {
console.log("onMount: cAtom");
set(2);
};
const bAtom = atom<any>((get) => {
const a = get(aAtom);
console.log("a=", a);
if (a) {
return get(cAtom);
}
return 1;
});
bAtom.debugLabel = "bAtom";The problem is, that the changed value of atom (C) is never propagated to the invoking component through useAtom. The error occurs when there is no externally triggered rendering within the calling component, which re-evaluates the useAtom hook. I think, there is somewhere a flushPending missing. I tried to figure out what could be a possible fix, but I did not found any good solution.
Affects version 1.5.0. Worked with 1.4.21.4.9.
BTW: I think the useEffect call at https://github.com/pmndrs/jotai/blob/main/src/core/useAtom.ts#L103-L105 should pass its dependencies. If so, a forced rendering has no effect anymore on the bug above.
useEffect(() => {
store[COMMIT_ATOM](atom, version)
}, [store, atom, version]);