A hack util to update atoms on another atom change

[dai-shi]

If you are familiar with Jotai API, you will notice that there's no way to update atom values imperatively when some other atoms change. This is intentional because such imperative logic is not declarative, and it's not aline with Jotai atom abstraction, which is declarative or "pure".

The canonical solution for imperative updates is:
a) use custom hook, or
b) use store.sub since v2.

But, if we give up pure atom model, would we be able to update imperatively somehow? Let's explore some hacks. Note that this is far from recommendation.

1st iteration:

export function atomWithImperativeUpdate(fn) {
  const setterAtom = atom(null);
  const baseAtom = atom(
    (get) => {
      const setter = get(setterAtom)?.[0];
      if (setter) {
        fn(get, setter);
        return true;
      }
      return false;
    },
    (get, set, isInit) => {
      if (isInit) {
        set(setterAtom, [set]);
      } else {
        set(setterAtom, null);
      }
    },
  );
  baseAtom.onMount = (init) => {
    init(true);
    return () => init(false);
  };
  const derivedAtom = atom((get) => get(baseAtom));
  return derivedAtom;
}

[dmaskasky]

Starting this sub-thread to centralize a bunch of code updates.

It works! Please see the code sandbox demo, https://codesandbox.io/s/jotai-forked-69lvfr

[dmaskasky]

Starting this sub-thread to centralize a bunch of code updates.

Add cleanup function.

export function atomWithImperativeUpdate(fn) {
  const setterAtom = atom(null);
+ const cleanupAtom = atom(null);
  const baseAtom = atom(
    (get) => {
      const setter = get(setterAtom)?.[0];
      if (setter) {
+       get(cleanupAtom)?.();
+       const cleanup = fn(get, setter);
+       setter(cleanupAtom, () => cleanup);
        return true;
      }
      return false;
    },
    (get, set, isInit) => {
      if (isInit) {
        set(setterAtom, [set]);
      } else {
        set(setterAtom, null);
      }
    },
  );
  baseAtom.onMount = (init) => {
    init(true);
    return () => init(false);
  };
  const derivedAtom = atom((get) => get(baseAtom));
  return derivedAtom;
}

[dmaskasky]

Refactor internal state. We can store all internal state in a single atom since we don't actually need reactivity here, but we do need to have a partition between stores.

Internal state resets when on mount / unmount.

We also want to reset the dependency map between runs to clear out any stale atom dependency references.

const setterAtom = atom(null, (get, set, isInit) => {
  if (isInit) {
    set(setterAtom, set);
  } else {
    set(setterAtom, null);
  }
});
setterAtom.onMount = (init) => {
  init(true);
  return () => init(false);
};

export function atomEffect(effectFn) {
+  const internalStateAtom = atom(null, (get, set, isInit) => {
+    if (isInit) {
+      set(internalStateAtom, createInternalState());
+    } else {
+      set(internalStateAtom, null);
+    }
+  });
+  internalStateAtom.onMount = (init) => {
+    init(true);
+    return () => init(false);
+  };
+  const isFirstRun = (get) => get(internalStateAtom)?.dependencyMap.size === 0;
  const hasChanged = (get) => {
+    const dependencyMap = get(internalStateAtom)?.dependencyMap;
    const atoms = Array.from(dependencyMap?.keys() ?? []);
    return atoms.some((anAtom) => get(anAtom) !== dependencyMap.get(anAtom));
  };
  const makeGetter = (get) => (anAtom) => {
+    const dependencyMap = get(internalStateAtom)?.dependencyMap;
    const value = get(anAtom);
    dependencyMap?.set(anAtom, value);
    return value;
  };
+  const makeSetter = (set, getInternalState) => (anAtom, ...args) => {
+    const internalState = getInternalState();
+    if (!internalState) return; // component has unmounted
    if (internalState.isSync) {
      throw new Error("set function cannot be called in sync");  // should this just be a warning in dev mode?
    } else {
      return set(anAtom, ...args);
    }
  };
  const baseAtom = atom((get) => {
    const set = get(setterAtom);
+    const internalState = get(internalStateAtom);
+    if (!set || !internalState) return false;
    if (isFirstRun(get) || hasChanged(get)) {
+      internalState?.dependencyMap.clear();
+      internalState.isSync = true;
+      internalState.cleanup?.();
      const getter = makeGetter(get);
+      const setter = makeSetter(set, () => get(internalStateAtom));
+      internalState.cleanup = effectFn(getter, setter);
+      internalState.isSync = false;
      return true;
    }
    return false;
  });
  return baseAtom;
}

function createInternalState() {
  return {
    isSync: true,
    cleanup: null,
    dependencyMap: new Map(),
  };
}

[dmaskasky]

Prevent infinite loop when an atomEffect is watching an atom that it also changes. This is done with internalState.inProgress. Which flags the setState event so that the effectAtom can early return.

const setterAtom = atom(null, (get, set, isInit) => {
  if (isInit) {
    set(setterAtom, set);
  } else {
    set(setterAtom, null);
  }
});
setterAtom.onMount = (init) => {
  init(true);
  return () => init(false);
};

export function atomEffect(effectFn) {
  const internalStateAtom = atom(null, (get, set, isInit) => {
    if (isInit) {
      set(internalStateAtom, createInternalState());
    } else {
      set(internalStateAtom, null);
    }
  });
  internalStateAtom.onMount = (init) => {
    init(true);
    return () => init(false);
  };
  const isFirstRun = (get) => get(internalStateAtom)?.dependencyMap.size === 0;
  const hasChanged = (get) => {
    const dependencyMap = get(internalStateAtom)?.dependencyMap;
    const atoms = Array.from(dependencyMap?.keys() ?? []);
    return atoms.some((anAtom) => get(anAtom) !== dependencyMap.get(anAtom));
  };
  const makeGetter = (get) => (anAtom) => {
    const dependencyMap = get(internalStateAtom)?.dependencyMap;
    const value = get(anAtom);
    dependencyMap?.set(anAtom, value);
    return value;
  };
  const makeSetter = (set, getInternalState) => (anAtom, ...args) => {
    const internalState = getInternalState();
    if (!internalState) return; // component has unmounted
    if (internalState.isSync) {
      throw new Error("set function cannot be called in sync");  // should this just be a warning in dev mode?
    } else {
+      internalState.inProgress++;
     const result = set(anAtom, ...args);
+      internalState.inProgress--;
+      return result;
    }
  };
  const baseAtom = atom((get) => {
    const set = get(setterAtom);
    const internalState = get(internalStateAtom);
    if (!set || !internalState) return false;
+    if (internalState.inProgress > 0) return false; // effect setter has triggered this run

    if (isFirstRun(get) || hasChanged(get)) {
      internalState?.dependencyMap.clear();
      internalState.isSync = true;
      internalState.cleanup?.();
      const getter = makeGetter(get);
      const setter = makeSetter(set, () => get(internalStateAtom));
      internalState.cleanup = effectFn(getter, setter);
      internalState.isSync = false;
      return true;
    }
    return false;
  });
  return baseAtom;
}

function createInternalState() {
  return {
    isSync: true,
+    inProgress: 0,
    cleanup: null,
    dependencyMap: new Map()
  };
}

[dmaskasky]

Previously, we were forced to call get synchronously otherwise Jotai wouldn't remember the atom's dependencies. However, we want the user to be able to make get calls asynchronously. To accomplish this, we need to synchronously call get using the dependencyMap keys from the most recent run. However, in order to do this, we need to force a re-evaluation of the effect by toggling a boolean atom when the setter is called.

Since set can be called at any time, we want to trigger a run to evaluate when set is called.

const setterAtom = atom(null, (get, set, isInit) => {
  if (isInit) {
    set(setterAtom, set);
  } else {
    set(setterAtom, null);
  }
});
setterAtom.onMount = (init) => {
  init(true);
  return () => init(false);
};

export function atomEffect(effectFn) {
  const internalStateAtom = atom(null, (get, set, isInit) => {
    if (isInit) {
      set(internalStateAtom, createInternalState());
    } else {
      set(internalStateAtom, null);
    }
  });
  internalStateAtom.onMount = (init) => {
    init(true);
    return () => init(false);
  };

  const isFirstRun = (get) => get(internalStateAtom)?.dependencyMap.size === 0;

  const hasChanged = (get) => {
    const dependencyMap = get(internalStateAtom)?.dependencyMap;
+    const atoms = Array.from(dependencyMap?.keys() ?? []).filter(
+      (anAtom) => anAtom !== rerunAtom
+    );
    return atoms.some((anAtom) => get(anAtom) !== dependencyMap.get(anAtom));
  };

+  // adds dependencies to Jotai's internal dependency maps
+  const ensureWatchDependencies = (get) => {
+    const dependencyMap = get(internalStateAtom)?.dependencyMap;
+    Array.from(dependencyMap?.keys() ?? []).forEach((anAtom) => {
+      get(anAtom);
+    });
+  };

  const makeGetter = (get) => (anAtom) => {
    const dependencyMap = get(internalStateAtom)?.dependencyMap;
    const value = get(anAtom);
    dependencyMap?.set(anAtom, value);
    return value;
  };

  const makeSetter = (set, getInternalState) => (anAtom, ...args) => {
    const internalState = getInternalState();
    if (!internalState) return; // component has unmounted
    if (internalState.isSync) {
      throw new Error("set function cannot be called in sync");  // should this just be a warning in dev mode?
    } else {
      internalState.inProgress++;
      const result = set(anAtom, ...args);
+      rerunToEvaluate(set);  // case 1: the run set atoms, as setter could be called async, force a rerun to capture all exposed atom dependencies
      internalState.inProgress--;
      return result;
    }
  };

+  // toggles a value to trigger a rerun.
+  // this rerun is used to capture all missed atoms not watched by the previous run
+  const rerunToEvaluate = (set) => {
+    set(rerunAtom, (value) => !value);
+  };

  const rerunAtom = atom(true);

  const baseAtom = atom((get) => {
    const set = get(setterAtom);
    const internalState = get(internalStateAtom);
+    ensureWatchDependencies(get);

    if (!set || !internalState) return false;
    if (internalState.inProgress > 0) return false; // effect setter has triggered this run
+    const getter = makeGetter(get);
+    const setter = makeSetter(set, () => get(internalStateAtom));
    if (isFirstRun(get) || hasChanged(get)) {
      internalState?.dependencyMap.clear();
+      getter(rerunAtom);
      internalState.isSync = true;
      internalState.cleanup?.();
      internalState.cleanup = effectFn(getter, setter);
      internalState.isSync = false;
      return true;
    }
    return false;
  });
  return baseAtom;
}

function createInternalState() {
  return {
    isSync: true,
    inProgress: 0,
    cleanup: null,
    dependencyMap: new Map()
  };
}

[dmaskasky]

To keep atomEffect alined with Jotai atom abstraction, we want to run atom effects in the next microtask with Promise.resolve().then and after the current getter evaluation is complete.

Additionally, we have to make sure Jotai is watching all atom dependencies. Since these dependencies might conditionally invoke the setters, we need to add a new mechanism for ensuring Jotai is watching them. To do this we want to manually trigger a rerun right after the effect function.

Good news! Now the api can handle promises in both the effect function as well as in the callback. Plus, since the effect function operates asynchronously, you can make "synchronous" calls to the setter without encountering errors, but do note that the utility won't be able to provide a synchronous didFire boolean anymore.

I hope this brings clarity to the updates. Thanks!

const setterAtom = atom(null, (get, set, isInit) => {
  if (isInit) {
    set(setterAtom, set);
  } else {
    set(setterAtom, null);
  }
});
setterAtom.onMount = (init) => {
  init(true);
  return () => init(false);
};

export function atomEffect(effectFn) {
  const internalStateAtom = atom(null, (get, set, isInit) => {
    if (isInit) {
      set(internalStateAtom, createInternalState());
    } else {
      set(internalStateAtom, null);
    }
  });
  internalStateAtom.onMount = (init) => {
    init(true);
    return () => init(false);
  };

  const isFirstRun = (get) => get(internalStateAtom)?.dependencyMap.size === 0;

  const hasChanged = (get) => {
    const dependencyMap = get(internalStateAtom)?.dependencyMap;
    const atoms = Array.from(dependencyMap?.keys() ?? []).filter(
      (anAtom) => anAtom !== rerunAtom
    );
    return atoms.some((anAtom) => get(anAtom) !== dependencyMap.get(anAtom));
  };

  // adds dependencies to Jotai's internal dependency maps
  const ensureWatchDependencies = (get) => {
    const dependencyMap = get(internalStateAtom)?.dependencyMap;
    Array.from(dependencyMap?.keys() ?? []).forEach((anAtom) => {
      get(anAtom);
    });
  };

  const makeGetter = (get) => (anAtom) => {
    const dependencyMap = get(internalStateAtom)?.dependencyMap;
    const value = get(anAtom);
    dependencyMap?.set(anAtom, value);
    return value;
  };

  const makeSetter = (set, getInternalState) => (anAtom, ...args) => {
    const internalState = getInternalState();
    if (!internalState) return;
+    internalState.inProgress++;
+    const result = set(anAtom, ...args);
+    rerunToEvaluate(set);
+    internalState.inProgress--;
+    return result;
  };

  // toggles a value to trigger a rerun.
  // this rerun is used to capture all missed atoms not watched by the previous run
  const rerunToEvaluate = (set) => {
    set(rerunAtom, (value) => !value);
  };

  const rerunAtom = atom(true);

  const baseAtom = atom((get) => {
    const set = get(setterAtom);
    const internalState = get(internalStateAtom);
    ensureWatchDependencies(get);

    if (!set || !internalState) return;
    if (internalState.inProgress > 0) return;

    const getter = makeGetter(get);
    const setter = makeSetter(set, () => get(internalStateAtom));
    if (isFirstRun(get) || hasChanged(get)) {
      internalState?.dependencyMap.clear();
      getter(rerunAtom);
+      defer(async () => {
        await internalState.cleanup?.();
        internalState.cleanup = await effectFn(getter, setter);
+        // the run did not set any atoms, ensure all exposed atom dependencies are captured by Jotai
+        rerunToEvaluate(setter);
+      });
    }
  });
  return baseAtom;
}

// delays execution until next microtask
function defer(fn) {
  Promise.resolve().then(fn);
}

function createInternalState() {
  return {
    inProgress: 0,
    cleanup: null,
    dependencyMap: new Map()
  };
}

[dmaskasky]

Fire cleanup when effect atom unmounts.
Don't early return from setter when internalState is null.

const setterAtom = atom(null, (get, set, isInit) => {
  if (isInit) {
    set(setterAtom, set);
  } else {
    set(setterAtom, null);
  }
});
setterAtom.onMount = (init) => {
  init(true);
  return () => init(false);
};

export function atomEffect(effectFn) {
  const internalStateAtom = atom(null, (get, set, isInit) => {
    if (isInit) {
      set(internalStateAtom, createInternalState());
    } else {
+      (async () => await get(internalStateAtom)?.cleanup?.())();
      set(internalStateAtom, null);
    }
  });
  internalStateAtom.onMount = (init) => {
    init(true);
    return () => init(false);
  };

  const isFirstRun = (get) => get(internalStateAtom)?.dependencyMap.size === 0;

  const hasChanged = (get) => {
    const dependencyMap = get(internalStateAtom)?.dependencyMap;
    const atoms = Array.from(dependencyMap?.keys() ?? []).filter(
      (anAtom) => anAtom !== rerunAtom
    );
    return atoms.some((anAtom) => get(anAtom) !== dependencyMap.get(anAtom));
  };

  // adds dependencies to Jotai's internal dependency maps
  const ensureWatchDependencies = (get) => {
    const dependencyMap = get(internalStateAtom)?.dependencyMap;
    Array.from(dependencyMap?.keys() ?? []).forEach((anAtom) => {
      get(anAtom);
    });
  };

  const makeGetter = (get) => (anAtom) => {
    const dependencyMap = get(internalStateAtom)?.dependencyMap;
    const value = get(anAtom);
    dependencyMap?.set(anAtom, value);
    return value;
  };

  const makeSetter = (set, getInternalState) => (anAtom, ...args) => {
    const internalState = getInternalState();
+    if (internalState) internalState.inProgress++;
    const result = set(anAtom, ...args);
    rerunToEvaluate(set);
+    if (internalState) internalState.inProgress--;
    return result;
  };

  // toggles a value to trigger a rerun.
  // this rerun is used to capture all missed atoms not watched by the previous run
  const rerunToEvaluate = (set) => {
    set(rerunAtom, (value) => !value);
  };

  const rerunAtom = atom(true);

  const baseAtom = atom((get) => {
    const set = get(setterAtom);
    const internalState = get(internalStateAtom);
    ensureWatchDependencies(get);

    if (!set || !internalState) return;
    if (internalState.inProgress > 0) return;

    const getter = makeGetter(get);
    const setter = makeSetter(set, () => get(internalStateAtom));
    if (isFirstRun(get) || hasChanged(get)) {
      internalState?.dependencyMap.clear();
      getter(rerunAtom);
      defer(async () => {
        await internalState.cleanup?.();
        internalState.cleanup = await effectFn(getter, setter);
        // the run did not set any atoms, ensure all exposed atom dependencies are captured by Jotai
        rerunToEvaluate(setter);
      });
    }
  });
  return baseAtom;
}

// delays execution until next microtask
function defer(fn) {
  Promise.resolve().then(fn);
}

function createInternalState() {
  return {
    inProgress: 0,
    cleanup: null,
    dependencyMap: new Map()
  };
}

[dai-shi]

@dmaskasky

Opening a new thread for some responses:

#2136 (reply in thread)

Can an atoms getter fire multiple times?

Yeah, I believe the current impl batches a single write.

#2136 (reply in thread)

This change ensures that the setter must only be called with a small delay,

I'm not 100% following, but if it's always with a delay, can we simply use setSelf?

I'm considering naming this feature “atomEffect”,

Yes, that sounds good, but let's defer the final decision.

#2136 (reply in thread)

Previously, we were forced to call get synchronously otherwise Jotai wouldn't remember the atom's dependencies.

btw, if you returns a promise from the read function, Jotai will update atom's dependencies on resolve. Not sure if it helps.

#2136 (reply in thread)

we want to run atom effects in the next microtask with Promise.resolve().then and after the current getter evaluation is complete.

Again, that sounds like we could use setSelf and eliminate setterAtom hack, which should simplify things a lot. Though, I didn't read your code fully yet.

[dai-shi]

We want to support getting value during setting:

set(valueAtom, (c) => c + 1);
console.log(get(valueAtom));
set(valueAtom, (c) => c + 1);

[dmaskasky]

I think batching is probably preferable. I have implementation both ways now.

I mean for atomEffect, batching setState calls is preferable so the effect runs just once at after all synchronous updates have been made.

it('should rerun the effect once when multiple synchronous updates are made', async () => {
  const valueAtom = atom(0);
  const runCount = 0;
  const effectAtom = atomEffect((get) => {
    runCount++;
    get(valueAtom);
  });
  const { result } = renderHook(() => {
    useAtomValue(effectAtom);
    return useSetAtom(valueAtom);
  });
  const setValue = result.current;
  await delay(0);

  // initialRender: runCount = 1
  expect(runCount).toBe(1);

  await act(() => setValue((c) => c + 1));

  // setValue: runCount = 2
  expect(runCount).toBe(2);

  await act(() => {
    setValue((c) => c + 1);
    setValue((c) => c + 1);
  });

  // setValue: runCount = 3
  expect(runCount).toBe(3); // <--- batched
});

Batching is done by
(1) collecting atom dependencies in the next microtask
(2) triggering an atom rerun
(3) running get on all dependencies.

get calls are collected on the resolved promise of the effectFn, so get calls in the callback or in something like a setTimeout still work but do not contribute to the atom's dependencies.

I can't think of any more cases that are not covered, so I'll put up a PR tomorrow.

[dai-shi]

I mean for atomEffect

Oh, I see.

so I'll put up a PR tomorrow.

Please create jotai-effect repo.

[dmaskasky]

Please createjotai-effect repo.

Would you be against it being added to jotai-utils instead?

---

Effect

atomEffect

Ref: https://github.com/pmndrs/jotai/pull/TODO

atomEffect is a utility function, allowing developers to manage side effects in their state management architecture seamlessly. It is useful for observing state changes in atoms and triggering side effects.

Signature

type CleanupFn = () => void

type EffectFn = (get: Getter, set: Setter) => CleanupFn | void | Promise<CleanupFn | void>

function atomEffect(effectFn: EffectFn): Atom<void>

Parameters

effectFn (required): A function or async function that accepts parameters get and set and can optionally return a cleanup function. The effectFn is useful for creating side effects that interact with other Jotai atoms.

Usage

Subscribe to Atom Changes

import { atomEffect } from 'jotai/utils'

const loggingEffect = atomEffect((get, set) => {
  // reruns when someAtom changes
  const value = get(someAtom)
  loggingService.setValue(value)
})

Setup and Teardown Side Effcts

const subscriptionEffect = atomEffect((get, set) => {
  const unsubscribe = subscriptionService.subscribe((value) => {
    set(anAtom, value)
  })
  return unsubscribe
})

Mounting with Atoms or Hooks

After defining an effect using atomEffect, it can be integrated within another atom's read function or passed to Jotai hooks.

import { atom } from 'jotai'

const anAtom = atom((get) => {
  // mounts loggingEffect while anAtom is mounted
  get(loggingEffect)
  // ... other logic
})

// mounts loggingEffect while the component is mounted
useAtom(loggingEffect)

Behavior

The atomEffect behavior during operation and interactions with other atoms is described below.

• Cleanup Function:
  The cleanup function is invoked on unmount or prior to re-evaluation when any of its dependencies change values.

• Prevents Infinite Loops:
  atomEffect does not rerun when it changes a value that it is observing. This characteristic is essential for preventing infinite loops from occurring within the application.

• Asynchronous Execution:
  The effect introduced by atomEffect runs in the next microtask from when it is triggered, ensuring that all updates to Jotai state are run asynchronously and after the current evaluation task completes.

• Batches Synchronous Updates:
  When an atom, that atomEffect is observing, is updated multiple times synchronously, these updates are batched. Consequently, the effect is rerun with the final value.

• Conditionally Running atomEffect:
  atomEffect is only run when it is mounted within the application. This prevents unnecessary computations and side effects when they are not needed.

Dependency Management

Aside from mount events, the effect runs when any of its dependencies change value. Understanding what makes an atom a dependency of the effect is critical to understand the effect's operation.

• Sync:
  All atoms accessed with get during the synchronous evaluation of the effect are added to the atom's internal dependency map.

• Async:
  For effects that return a promise, all atoms accessed with get are added to the atom's internal dependency map upon the resolution of the promise. Atoms observed after the promise has resolved, for instance in a setTimeout, are not included in the dependency map.

• Cleanup:
  Accessing atoms with get in the cleanup function does not add them to the atom's internal dependency map.

• Recalculation of Dependency Map:
  The dependency map is recalculated on every run. If an atom was not observed during the current run, it would not be incorporated into the dependency map. Only actively observed atoms are considered dependencies.

[dai-shi]

Would you be against it being added to jotai-utils instead?

Yeah, I prefer a new package jotai-effect or something that you can take a full control.
That's our general plan. jotai has a small core and lets the ecosystem grow.
If jotai-effect is released and ready to be promoted, let's consider creating https://jotai.org/docs/integrations/effect.

[dmaskasky]

@dmaskasky

Opening a new thread for some responses:

#2136 (reply in thread)

Can an atoms getter fire multiple times?

Yeah, I believe the current impl batches a single write.

#2136 (reply in thread)

This change ensures that the setter must only be called with a small delay,

I'm not 100% following, but if it's always with a delay, can we simply use setSelf?

I'm considering naming this feature “atomEffect”,

Yes, that sounds good, but let's defer the final decision.

#2136 (reply in thread)

Previously, we were forced to call get synchronously otherwise Jotai wouldn't remember the atom's dependencies.

btw, if you returns a promise from the read function, Jotai will update atom's dependencies on resolve. Not sure if it helps.

#2136 (reply in thread)

we want to run atom effects in the next microtask with Promise.resolve().then and after the current getter evaluation is complete.

Again, that sounds like we could use setSelf and eliminate setterAtom hack, which should simplify things a lot. Though, I didn't read your code fully yet.

Yeah, we could do something like this. It's another hack, but it also works. I don't have a strong preference.

const anAtom = atom(
  (get, { setSelf }) => {
    queueMicrotask(() => {
      setSelf((get, set) => effectFn(get, set));
    });
  },
  (get, set, writeFn) => writeFn(get, set);
);

Please note that the above code lacks a number of critical elements:

1. Dependencies must be collected synchronous to the read function in order for read to rerun when dependencies change. The above code won't work as it. To fix this, atomEffect intercepts get to maintain its own set of dependencies and synchronously calls them.
2. Support cleanup
3. Preventing infinite loops when the effect is watching something that it updates
4. Allowing users to call get asynchronously

[dmaskasky]

Ok, I was able to switch this to using setSelf, all tests pass! 👍

---

I was thinking we should allow asynchronous get because of the following use cases. 🤔

Example 1
Here get is called async, but we may still want the component to re-evaluate. I'm struggling to find a better example than this one, though.

atomEffect((get, set) => {
  const handleClick = () => {
    const value = get(valueAtom);
    // do something with value
  };
  document.addEventListener('click', handleClick);
  return () => document.removeEventListener('click', handleClick);
});

Example 2
Here I think folks would expect this to subscribe to both asyncAtom and countAtom changes.

atomEffect(async (get, set) => {
  const value = await get(asyncAtom);
  const count = get(countAtom);
});

But you brought up a good point about how dependencies are evaluated on resolve. Perhaps the behavior should therefore be that Example 1 would NOT re-evaluate when valueAtom changes. (it doesn't need to). And that Example 2 would re-evaluate as expected when either asyncAtom or countAtom change. I'll see if I can get this to work.

---

I switched to using Promise.resolve().then() for queuing a microtask. 👍

[dai-shi]

Example 1

You could add get(valueAtom) in the body. But, I'm not sure why we need to reevaluate the effect when valueAtom changes.

Example 2

This should work.

Perhaps the behavior should therefore be...

Ah, you reached the same conclusion.

Ok, I was able to switch this to using setSelf, all tests pass! 👍

Where can I see the latest code?

[AjaxSolutions]

If you are familiar with Jotai API, you will notice that there's no way to update atom values imperatively when some other atoms change.

Could atomWithBroadcast be used for this purpose?

[dai-shi]

I don't think so.

[dmaskasky]

https://github.com/jotaijs/jotai-effect