I am getting "Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition"

[Jablett]

I get this error only on android and It's coming from the root component (App)

This is the line causing the issue: atomWithStorage('somethingToStore', null, createJSONStorage(() => AsyncStorage))

[dai-shi]

Like the error message says, async atoms don't work in sync, and it can't update the input. I wonder if startTransition help. Otherwise, you can create a sync atom and update the async atom at the same time.

Conceptually, something like this:

const asyncAtom = atom(...)
const syncAtom = atom(...)
const finalAtom = atom(
  (get) => get(syncAtom) || get(asyncAtom),
  (get, set, newValue) => {
    set(syncAtom, newValue)
    set(asyncAtom, newValue)
  }
)

[Jablett]

Could this be used with async storage? or even have it set as null until asynchronous tasks have completed? And I find it strange that it works with iOS as expected.

[dai-shi]

Could this be used with async storage?

Yes.

have it set as null until asynchronous tasks have completed?

You could you use unwrap util. But, I haven't tried if it fixes the error.

const asyncAtom = atom(...)
const syncAtom = unwrap(asyncAtom, (prev) => prev ?? null)

[JDMathew]

I got this Error on iOS when using const value = useAtomValue(asyncAtom) inside a provider (early on in the render cycle). I resolved this by wrapping my App in a Suspense component:

export const App = () => {
  return (
    <Suspense fallback={<SplashScreen />}>
      <InnerApp />
    </Suspense>
  );
};

[danielchim]

I am trying to combine jotai-query and jotai-effect together and work on something like this:

export const coachInfoAtom = atomWithQuery(get => {
  return {
    queryKey: ['coachInfo'],
    queryFn: () =>
      contentfulControllerFindAllCoaches(
          {
        query: {
          lang: `en`,
        },
      }),
  };
});

export const coachAgentsAtom = atomWithStorage(  'coachAgents',
    null,
    storage,
    {getOnInit: true},
    )
    
export const coachMetaEffect = atomEffect((get, set) => {
    // runs on mount or whenever coachInfoAtom changes, then extract coachAgents into the atom
    const value = get(coachInfoAtom)
    set(coachAgentsAtom, value?.data?.data?.data?.coachAgents).then(r => console.log(r))
})

And react native will throw the a component.... error, my app.tsx is already wrapped with <Suspense/> component but it still don't work.

[dmaskasky]

The code you shared looks correct.
Can you reproduce the issue in a codesandbox?

[danielchim]

Sure thing, here's the demo in expo snack, and I've replaced the API call with a simulated json but the data content are the same.
https://snack.expo.dev/@dfxbgtr/jotai-side-effect-with-tanstack-query-demo

p.s: React-dom didn't have this issue, i guess it is related to how I write my asyncSotrage?
https://stackblitz.com/edit/vitejs-vite-ssmhnh?file=src%2FApp.tsx