How are others preloading atoms?

[sebinsua]

There's been quite a bit of chatter about implementing "render-as-you-fetch" patterns online recently.

How are others within the community preloading atoms? That is, causing them to asynchronously load data without suspending in advance of them being 'read' by components further down our component hierarchy.

Right now I'm doing something like this:

import { useCallback } from 'react';
import type { Atom, WritableAtom } from 'jotai';
import { useAtomCallback } from 'jotai/utils';

export function usePreloadAtom(shouldRefresh = false) {
  return useAtomCallback(
    useCallback(
      (
        get,
        refresh,
        atom: Atom<unknown> | WritableAtom<unknown, [], unknown>
      ) => {
        if (shouldRefresh && 'write' in atom) {
          refresh(atom);
        }
        get(atom);
      },
      [shouldRefresh]
    )
  );
}

I can call this hook to get a preloadAtom function and I can then call this within event handlers or effects to preload the value of an atom.

Should it be implemented differently? For example, perhaps on top of useStore or providing variadic arguments for atoms? Public API-wise, I was thinking it would make sense to be able to match preload in React closely, however we can't use global functions as we are reliant on React context for the store.