React has detected a change in the order of Hooks called by %s. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks

[AnhNguyenDinh]

hello zustand team. i'm facing with error. I created index.ts with content (

import AsyncStorage from "@react-native-async-storage/async-storage";
import { create } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware";
interface AppState {
  fisrtDowloadApp: boolean;
  deviceId: string;
  islogged: boolean;
}
type AppStateAction = {
  updateFisrtDowloadApp: (logged: boolean) => void;
  updateLogged: (logged: boolean) => void;
  updateDeviceId: (deviceId: string) => void;
};
const inittialAppState: AppState = {
  fisrtDowloadApp: false,
  deviceId: "",
  islogged: false,
};
const appState = create<AppState & AppStateAction>()(
  persist<AppState & AppStateAction>(
    (set) => ({
      ...inittialAppState,
      updateFisrtDowloadApp: (dowload: boolean) => set({ fisrtDowloadApp: dowload }),
      updateDeviceId: (deviceId: string) => set({ deviceId }),
      updateLogged: (logged: boolean) => set({ islogged: logged }), 
    }),
    {
      name: "app-storage",
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);


export { appState };

)
and i'm using inside loginScreen in here:

  const {updateLogged} = appState()
const loginMutation = useMutation({
    mutationKey: [MUTATION_KEY.LOGIN],
    mutationFn: async ({ username, password }: FormLogin) =>
      await loginApi({ username, password }),
    onSuccess: (data) => {
      // console.info("data", data);
      updateLogged(true); // Error here
      navigation.replace(AppRoutes.APP);

    },
    onError: (error) => {
      Vibration.vibrate();
      showToast(handleMessage({ status: error.status }));
    },
  });

If i comment line updateLogged(true); and replace by appState.getState().updateLogged(true); will be okey. but if i use updateLogged(true) i will facing with error : "React has detected a change in the order of Hooks called by....". pls help me

[dai-shi]

First thing first, use hook naming convention appState -> useAppState.
I'm not sure if it helps, but one thing I'd do is:

const updateLogged = useAppState((state) => state.updateLogged);

[AnhNguyenDinh]

thanks for your response.it;'s useful for me. :3