Bug: Error: Should have a queue. This is likely a bug in React. Please file an issue.

[nikikalwar]

[<!--]()

--> I got this error in the development screen so came here no hard feelings :)

Error: Should have a queue. This is likely a bug in React. Please file an issue.

Please check the screenshot for more details:

There are two errors in console:

1. The render state has changed for some reason.
2. It says should have a queue. I think we can't change the order of the hooks in that way?

React version:

Steps To Reproduce

1.It's simple change the order of the hooks as they are changed in the below way: Warning: React has detected a change in the order of Hooks called by Requests. 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. useState useState
3. useRef useRef
4. useEffect useEffect
5. useMemo useMemo
6. useMemo useMemo
7. useState useState
8. useState useState
9. useState useState
10. useState useState
11. useState useState
12. useState useState
13. useState useState
14. useState useState
15. useState useState
16. useState useState
17. useState useState
18. useState useState
19. useState useState
20. useState useState
21. useState useState
22. useState useState
23. useEffect useState ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Uncaught Error: Should have a queue. This is likely a bug in React. Please file an issue. React 4 Requests Requests.js:103 React 12 unstable_runWithPriority scheduler.development.js:468 React 5 performReactRefresh react-refresh-runtime.development.js:304 performReactRefresh react-refresh-runtime.development.js:293 refreshTimeout RefreshUtils.js:62 setTimeout handler*enqueueUpdate RefreshUtils.js:60 js main.580626385e6a06b8cd5e.hot-update.js:1531 js main.580626385e6a06b8cd5e.hot-update.js:1553 Webpack 8 react-dom.development.js:15225 4.

I am like very fresher in react so just wanted to understand why this message popped up. Link to code example:

The current behavior

It's giving errors I want components 🗡️

The expected behavior

Components

[nikikalwar]

I have already fixed this bug so It's not an issue but if its it production the page won't crash so there goes one useEffect and one useState on a react web app, no worries though. but its better to correct that error.

[samuelgoff]

I'm still seeing this in react-dom 18.2.0 running inside next 13.3.1:

Unhandled Runtime Error
Error: Should have a queue. This is likely a bug in React. Please file an issue.

Call Stack
updateReducer
../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (16572:0)
Object.useReducer
../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (17898:0)
Object.useReducer
../node_modules/.pnpm/react@18.2.0/node_modules/react/cjs/react.development.js (1626:0)
ReactDevOverlay
../node_modules/.pnpm/next@13.3.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js (851:955)
renderWithHooks
../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (16305:0)
updateFunctionComponent
../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (19588:0)
beginWork
../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (21601:0)
HTMLUnknownElement.callCallback
../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (4213:0)
invokeGuardedCallback
../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (4277:0)
beginWork$1
../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (27451:0)
performUnitOfWork
../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (26557:0)
workLoopSync
../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (26466:0)
renderRootSync
../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (26434:0)
performConcurrentWorkOnRoot
../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (25738:0)
workLoop
../node_modules/.pnpm/scheduler@0.23.0/node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
../node_modules/.pnpm/scheduler@0.23.0/node_modules/scheduler/cjs/scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
../node_modules/.pnpm/scheduler@0.23.0/node_modules/scheduler/cjs/scheduler.development.js (533:0)

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!