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

I’m using Next.js, when I navigated to another page, this error occurred

this is the target page code

const count = signal(0);

function Counter() {
  return <button onClick={() => count.value++}>Value: {count.value}</button>;
}
export default Counter;

• next: 12.2.5
• react: 18.2.0
• signals-react: 1.0.2

[jmeistrich]

For what it’s worth, I’ve come to the conclusion that this method of injecting useReducer into the current dispatcher can’t possibly work reliably and I’ve migrated legend-state away from it. We were seeing this bug in Next.js and users saw a similar bug in Expo Router, and in some Framer-Motion animations it was crashing as elements unmounted. After a lot of debugging I was not able to find a reliable solution. That combined with the React team telling us not to do it and that it would break soon made it seem untenable.

I hope you’re able to find a solution! But if not I hope I can save you some time knowing that it didn’t work for us.

[marvinhagemeister]

Fixed by #219