React has detected a change in the order of Hooks when Lazy loaded

[pavelrotek]

Hi everyone,

when using import @preact/signals-react in lazy loaded component (Suspense), and react tree rerenders, the following error is thrown. It relates probably to preact signal render optimizations (when using react signal "lite" mentioned in issue (https://github.com/preactjs/signals/issues/251#issuecomment-1426095471 everything seems to work correctly).

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

Can be reproduced on my public repo... https://github.com/pavelrotek/signals-error

screens attached before rerender

after pressing "refresh" button

[oliviercperrier]

Got the same thing in expo web app using expo-router v2.

Everything is working with version 1.2.1 of @preact/signals-react tho. Not sure what has changed.

[rgrenonlkr]

We experienced the same issue and ended up import our signals (not using them) in a not-lazy component. Don't know why but after that we can use signals in our lazy loaded components.

[tonygustafsson]

Pulled my hair over this one... read this comment about lazy loaded component and didn't believe it. :P But it's true... making it an ordinary componet worked. However, I would love to understand why this happens.

[XantreDev]

Current preact signals to react integration alter ReactCurrentDispatcher behaviour to track signals in each component. It is quite a complex task (because no one knows how react will behave in some scenarios). There are tests, but probably this case is not covered

[kaisergeX]

We encountered a similar issue with react-router-dom when navigating between routes after declaring a signal. If I use a regular component instead of the lazy one for routes, these errors disappear.

Reproduce issue: https://codesandbox.io/p/sandbox/preact-signals-react-and-react-router-dom-68g3dk

[panovpassendo]

We encountered the same issue with our app after declaring a signal and using version 1.3.6 "Warning: React has detected a change in the order of hooks..." After setting it to an earlier version, 1.2.1, no issues.

[XantreDev]

In which envirement do you using signals?

[XantreDev]

I've tried to fix this kind of problems in my react integration of signals. You can try it out with vite now

[oyee91]

We encountered a similar issue with react-router-dom when navigating between routes after declaring a signal. If I use a regular component instead of the lazy one for routes, these errors disappear.

Reproduce issue: https://codesandbox.io/p/sandbox/preact-signals-react-and-react-router-dom-68g3dk

This is a major issue for us as well, is this issue being looked at or not, there is a perfect and straight forward way of reproducing this.

[XantreDev]

@oyee91 you can try to use my signals integration as well. If you will have any issues I will try to fix it asap. I actually can try to provide a PR that tries to fix it, but it will take some time for research + review

[sahajjain1]

@XantreGodlike getting the same error : React has detected a change in the order of hooks... while using @preact/signals-react@1.1.1 and cant update the signal version above 1.1.1 as it will not work with my React version 17.0.2 any suggestions?

[PHILIPP111007]

I imported "@preact/signals-react" in index.js file

[devcrev]

@PHILIPP111007's solution worked for me.

[XantreDev]

@PHILIPP111007 yep it can fix this issue, because if we are importing signals async - react will not to be patches initially and after patch order of hooks will change. Probably this info should be in README. @rschristian Should I provide PR?