Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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)
    ...

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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;
});
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading