set() blocks when a network activity is being performed

[Rezrazi]

Hi

I'm having a weird behavior that I'm not really able to explain.
Using zustand with React Native and Expo

I have this store:

const useAuth = create<AuthStoreProps>()(
  devtools(
    computed(
      (set, get) => ({
        isReady: false,
        isLoading: false,
        isLoggedIn: false,
        isOnboarded: false,
        init: async () => {
          console.log("here 1")
          set({ isLoading: true })

          const {
            data: { session },
          } = await supabase.auth.getSession()

          // console.log(await supabase.auth.getUser())

          let isOnboarded = false

          // if (session) {
          //   const response = await supabase.from("users").select("*").eq("uuid", session?.user.id)
          //
          //   isOnboarded = response.data ? response.data[0]?.onboarded_at !== null : false
          // }

          const {
            data: { subscription },
          } = supabase.auth.onAuthStateChange((event, session) => {
            if (event === "SIGNED_IN" && session) {
              get().signIn(session)
            }

            if (event === "SIGNED_OUT") {
              set({ isLoggedIn: false })
            }
          })

          set({ isReady: true, session, isLoggedIn: !!session, isLoading: false, isOnboarded, subscription })
          console.log("here 2")
        },
      }),
    ),
  ),
)


export const init = () => useAuth.getState().init()

In my base layout I call the init method, and then in a component down the tree I call the store

// app/_layout.tsx
init()

export default function Page {
  return ...
}



// a component further down the tree
export default function UserCard() {
 const { isReady, isLoggedIn, isOnboarded} = useAuth()
 
 console.log({isReady, isLoggedIn, isOnboarded});
  return ...
}

This is working fine, as the init method gets called first and I'm able to hydrate my store with some data (e.g I can retrieve the session from supabase and set isLoggedIn to true, that method pulls the data from the device's storage, no network call)

But as soon as I introduce a network call like

console.log(await supabase.auth.getUser())

// or

const response = await supabase.from("users").select("*").eq("uuid", session?.user.id)

none of the set() in my init() method seem to work. I do see the console.log for Here 2, but the state doesn't get updated.

the init method works well if I don't make any network call.

Is this specific to zustand where I'm using it wrong or is it related to react native/expo?

Thanks