React has detected a change in the order of Hooks called by %s-CodePudding

I keep getting this error saying "ERROR Warning: 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: https://reactjs.org/link/rules-of-hooks". I have tried different solutions but I can't find where the problem is. I also installed eslint to try to find some bugs with the hooks but I can't find any.

const HandleScreen = () => {
    const [loading, setLoading] = useState(true);
    const dispatch = useAppDispatch();

    const isLogin = useAppSelector((state) => state.login.isLogin);
    const alreadyLogIn =
      useAppSelector((state) => state.login.userName) &&
      useAppSelector((state) => state.login.password);

    useEffect(() => {
      async function retriveData() {
        await createTable();
        await getDataFromDB(dispatch);

        setLoading(false);
      }
      retriveData()
    }, []);

    if(loading) {return}
    else return (isLogin || alreadyLogIn !== '') ?  <MainScreen /> : <LoginScreen />;
  };

And this is my error message

Warning: 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: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render

%s, HandleScreen, 
1. useState                   useState
2. useContext                 useContext
3. useContext                 useContext
4. useRef                     useRef
5. useMemo                    useMemo
6. useSyncExternalStore       useSyncExternalStore
7. useEffect                  useEffect
8. useDebugValue              useDebugValue
9. useDebugValue              useDebugValue
10. useContext                useContext
11. useRef                    useRef
12. useMemo                   useMemo
13. useSyncExternalStore      useSyncExternalStore
14. useEffect                 useEffect
15. useDebugValue             useDebugValue
16. useDebugValue             useDebugValue
17. useEffect                 useContext
, 
    in HandleScreen (created by App)
    ...

CodePudding user response：

From what I can see the issue can be inside the useAppSelector hook use for alreadyLogIn

Try this:

const alreadyLogIn = useAppSelector((state) => {
    return state.login.userName && state.login.password;
});