Good pattern for updating atoms based on subscription

Lets say I have an API that I can subscribe to, and any time a value changes (can happen once a frame at 60FPS) I would want to update an atom to always reflect that

Currently I can just create a useEffect to do this at the App.tsx level, but wondering if there’s an atoms-only way to do this.

some pseudocode:

useEffect(() => {
  async function load() {
    setAtom(client.get(someId))
  }
  client.subscribe(someId, (msg) => setAtom(msg));
  () => {
    client.unsubscribe(someId);
  }
}, [])

[dai-shi]

atomWithObservable with initial value to avoid suspense? That’s possible. We did something like that in atomWithQuery in jotai/query. Would you like to open a new issue for tracking?

For people who don’t want to use experimental Suspense yet?

For this specific purpose, we have loadable.

[dai-shi]

Let me try ideating something.

So, what works now is something like this:

const dataAtom = atom(null)

const useDataAtomWithEffect = () => {
  const [data, setData] = useAtom(dataAtom)
  useEffect(() => {
    const init = async () => {
      setData(await fetchData())
    }
    const unsubscribe = subscribeToData(setData)
    init()
    return unsubscribe
  }, [setData])
  return data
}

Let’s see if we can generalize a bit.

// define an atom
const dataAtom = atom(null)
// define an atom initializer
const initializeDataAtom = async (set) => {
  const unsubscribe = subscribeToData(set)
  (async () => { set(await fetchData()) })()
  return unsubscribe
}

// list all atoms with initializer
const atomsWithInitializer = [
  [dataAtom, initializeDataAtom]
]

// internal component
const InitializeAtom = ({ atom, initialize }) => {
  const [value, setValue] = useAtom(atom)
  useEffect(() => {
    return initialize(setValue)
  }, [setValue])
  return null
}

// component to initialize atoms recursively
const InitializeAtoms = ({ atoms, children }) =>
  atoms.reduceRight(a, [atom, initialize] =>
    React.createElement(InitializeAtom, { atom, initialize }, a),
    children,
  )

// How to use
const App = () => (
  <Provider>
    <InitializeAtoms atoms={atomsWithInitializer}>
      <MainLayout />
    </InitializeAtoms>
  </Provider>
)

Just a rough idea.