I had a vite react app and i kept getting this warning in the developers console, so this is what I did to fix it:

Problem:

I had two files:

Login.jsx and GenerateField.jsx

In the Login I was calling a component called GenerateField. The problem is that I had my context provider useStateContext imported in both files,

Solution: I had to pass the variables into a prop

 

 
const { setUser, setToken, formValue, setFormValue } = useStateContext();
 
CHANGE FROM:
{GenerateField(field, fieldname, index, group)}
CHANGE TO:
{GenerateField(field, fieldname, index, group, formValue, setFormValue)}
 
CHANG REMOVED the useStateContext() from GenerateField.jsx
 
 

 

Warning: React has detected a change in the order of Hooks called by Login. 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