[RFC] unstable_createStore

[dai-shi]

If #854 is successfully merged, we would like to consider exposing unstable_createStore.

import { atom, Provider, unstable_createStore } from 'jotai'

const countAtom = atom(0)
const store = unstable_createStore()

const App = () => (
  <Provider unstable_createStore={() => store}>
    ...
  </Provider>
)

// read atom value outside React
const value = store.get(countAtom)

// write atom value outside React
store.set(countAtom, 1)
store.set(countAtom, (c) => c + 1)

// subscribe to atom change outside React
const unsub = store.sub(countAtom, () => {
  console.log('countAtom can be changed')
  const value = store.get(countAtom) // this can be the same value as the previous one
})

[a-eid]

would it also be possible to set an atom value from outside react ?

[dai-shi]

Yeah, that's the plan. Updated description.

[a-eid]

@dai-shi that would be amazing.

[loganvolkers]

This would be great!

It would let us use jotai with lit, haunted, and stencil via https://github.com/saasquatch/universal-hooks

[timedtext]

Is it possible to release an alpha version now?

[dai-shi]

Please give us more time. It's still RFC. It's actually helpful if you can note why you need it. (And, maybe we can discuss current possible workaround.)

[timedtext]

Sorry, didn't mean to rush, just hope to use this feature soon.
In my case, I need to perform transient updates, similar to this one: #610

[dai-shi]

So, your comment is valuable, because this doesn't allow transient updates. store.set() will trigger re-render.

[timedtext]

Oh, it's a lucky thing I replied. I usually just read and don't reply because my English is not good.

Related Codes:

  const offsetRef = useRef(useStore.getState().offsets[index]);
  useEffect(
    () =>
      useStore.subscribe(
        (state) => state.offsets[index],
        (offset: Offset) => {
          offsetRef.current = offset;

          animation.animateTo({
            transform: [{ translateX: offset.x }, { translateY: offset.y }],
          });
        },
      ),
    [],
  );

[dai-shi]

jotai doesn't have a proper way for transient updates.
In some of utils, we do have a hack,

jotai/src/utils/selectAtom.ts

Lines 15 to 16 in 685c8dc

	// TODO we should revisit this for a better solution than refAtom
	const refAtom = atom(() => ({} as { prev?: Slice }))

but it's not something to recommend, and hope to revisit this in the future.

I guess we should keep the mutable store outside of jotai, and jotai atom only keeps an identifier to it. Like, atom/useAtom is for useState, and for useRef, just module variable.

[timedtext]

I found that zustand/vanilla can be embedded nicely in jotai. And its code is very clear.

Jotai's code is a bit larger. I don't know what's preventing it from implementing transient updates yet.

[dai-shi]

zustand and jotai are based on different models. (otherwise, we wouldn't develop jotai.)
Jotai is trying to be useState replacement. Transient updates are not React-ish. Basically, it's just reading a mutable variable in render, which can lead tearing in concurrent rendering.