I am trying to use Context
and Reducers
via React's hooks, and running into problems with the order of the hooks not being constant. My understanding was that as long as the order of the useHook(…)
remained the same, it was fine to invoke the returned state/update function/reducer in any sort of control flow. Otherwise, I'm invoking the hooks at the very beginning of the FunctionComponents.
Is it that I'm generating Days
in a loop? Or missing something else?
Warning: React has detected a change in the order of Hooks
called by Container. This will lead to bugs and errors if not fixed. For
more information, read the Rules of Hooks:
https://reactjs.org/docs/hooks-rules.html
Previous render Next render
------------------------------------------------------
1. useContext useContext
2. undefined useRef
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
The full version of Container
is below. An excerpt from Day
is below, and has a ref from react-dnd
's useDrop
.
export const Container: FunctionComponent<Props> = () => {
let events = useContext(State.StateContext)
//let events: Array<Event.Event> = [] <- with this, no warning
const getDaysEvents = (day: Event.Time, events: Array<Event.Event>) => {
return events.map(e => {
const isTodays = e.startTime.hasSame(day, "day")
return isTodays && Event.Event({ dayHeight, event: e })
})
}
let days = []
for (let i = 0; i < 7; i++) {
const day = DateTime.today().plus({ days: i })
days.push(
<Day key={day.toISO()} height={dayHeight} date={day}>
{getDaysEvents(day, events)}
</Day>
)
}
return <div className="Container">{days}</div>
}
An excerpt from Day
( Event
similarly uses a useDrag
hook, also called at the top level just like here).
const Day: FunctionComponent<DayProps> = ({ date, height, children }) => {
const dispatch = useContext(State.DispatchContext)
const [{ isOver, offset }, dropRef] = useDrop({
// …uses the dispatch function within…
// …
})
// …
}
I ran into this same error message in a component I was writing due to use of short-circuiting logic.
This resulted in an error:
const x = useSelector(state => state.foo);
if (!x) { return ; }
const y = useSelector(state => state.bar);
This is because when x
is truthy the list of hooks has length 2, but when x
is falsey the list has length 1.
To resolve the error I had to put all hook use before any early terminations.
const x = useSelector(state => state.foo);
const y = useSelector(state => state.bar);
if (!x) { return ; }
Writing my comment as an answer:
The problem is that you're calling Event.Event()
directly, even though it is a react component. That causes react to treat the hook calls inside the function as part of Container
, even though you meant for them to be part of Event.
The solution is to use JSX:
return isTodays && <Event.Event dayHeight={dayHeight} event={e} />
Why this works is clearer when you replace the JSX with the resulting JS code:
return isTodays && React.createElement(Event.Event, { dayHeight, event: e })
See https://reactjs.org/docs/react-api.html#createelement . You never want to call the function components directly, how react works is that you always hand a reference the component to react and let it call the function at the correct time.
For other reason instead of this question, when you receive this error
It actually happens because of any bad practice for hook implementations
Don't call Hooks inside loops , conditions , or nested functions . Instead, always use Hooks at the top level of your React function
NOTE: Implement your
useState
hooks first at top of the function
Don't call Hooks from regular JavaScript functions
If you get This Error when testing the component, be careful to where you set your custom hooks (replace to top of the function)
use eslint for lint your code avoid geting React Hooks Rules errors
install package with npm or yarn
npm install eslint-plugin-react-hooks --save-dev
It is not the question scenario, but it is the error itself, hopefully, it will help somebody :)
const { chatSession, userBelongsToSession } = useChatSession(session_id)
const { activeSession, setActiveSession } = useActiveChatSession()
const isCurrentActiveSession = useMemo(() => activeSession != null && activeSession.session_id === session_id, [activeSession, session_id])
if (chatSession == null || activeSession == null) {
return (<div></div>)
}
const Container = styled(BorderedContainer)`height: 72px; cursor: pointer;`
The same error happens to me in this piece of code and is related to useRef being called by styled-components and not being called before because of conditional rendering
if (chatSession == null || activeSession == null) {
return (<div></div>)
}
by default, the hooks will return null and my component will render with no useRef, although when the hooks are actually populated, styled-components will then generate a component with useRef.
if (chatSession == null || activeSession == null) {
return (<div></div>)
}
const Container = styled(BorderedContainer)`height: 72px; cursor: pointer;
I got the same issue in the react-native application as well. It has happened due to the unnecessary elements loading process.
old code
return (......
<NotificationDialog
show={notificationPayload !== null}
title={notificationPayload?.title}
.......
/>
);
This will re-render NotificationDialog even notificationPayload !== null. But it is not needed. Simply I added this null check and avoid render this NotificationDialog if it is null
fix
return (......
{ notificationPayload !== null? <NotificationDialog
show={notificationPayload !== null}
title={notificationPayload?.title}
.......
/> : null }
);
I was getting this error randomly while calling different hook methods in the test I was writing. The fix for me was in the spy of useRef
I had implemented:
const useRefSpy = jest
.spyOn(React, 'useRef')
.mockReturnValueOnce({ whatever })
Changing the mockReturnValueOnce
to mockReturnValue
fixed the error.
in my case i was doing multiple api calls and saving each of them to different state, which led me to this error. But after changing it into a single state i was able to overcome that.
const [resp, setGitData] = useState({ data: null, repos: null });
useEffect(() => {
const fetchData = async () => {
const respGlobal = await axios(
`https://api.github.com/users/${username}`
);
const respRepos = await axios(
`https://api.github.com/users/${username}/repos`
);
setGitData({ data: respGlobal.data, repos: respGlobal.data });
};
fetchData();
}, []);
i fixed my issue by using an imported component as a component and not as a function, i had to return jsx ( <>{values}</>
) instead of just values because i had to import redux's useSelector inside ConvertDate, apparently it doesn't work with useSelector if it's just a function. I could've just use a function and pass the date and the redux's state as props though...
what i had:
<b>{ConvertDate({ date: post.dateTime })}</b>
and how i fixed it:
<b>{<ConvertDate date={post.dateTime} />}</b>
I know I'm very late, but just wanted to share my experience on the same error stack.
It happened for me for the combination of tanstack's useQuery
4 and useEffect
in ReactJS
17.
One beautiful discussion here .
Stacktrace:
react_devtools_backend.js:4026 Warning: React has detected a change in the order of Hooks called by Applicants. 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
------------------------------------------------------
1. useContext useContext
2. useContext useContext
3. useState useState
4. useRef useRef
5. useEffect useEffect
6. useRef useRef
7. useEffect useEffect
8. useContext useContext
9. useState useState
10. useRef useRef
11. useEffect useEffect
12. useRef useRef
13. useEffect useEffect
14. useState useState
15. useState useState
16. useState useState
17. useState useState
18. useState useState
19. useState useState
20. useContext useContext
21. useContext useContext
22. useContext useContext
23. useContext useContext
24. useEffect useEffect
25. useState useState
26. useCallback useCallback
27. useState useState
28. useLayoutEffect useLayoutEffect
29. useEffect useEffect
30. useDebugValue useDebugValue
31. useEffect useEffect
32. undefined useEffect
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
So it were happening, due to I were using the useEffect
after the useQuery
api callback line, which I resolved by putting the useEffect
before the useQuery
line, and all warning stack trace got solved.
Hope it would help someone.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.