Updating from 2.1.5 to 2.2.0 causes issue with hooks order in next.js app router #2702
Description
Bug report
Description / Observed Behavior
After updating from 2.1.5 to 2.2.0 I start seeing the following error:
[Error] Warning: React has detected a change in the order of Hooks called by DashboardLayout. 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. useRef useRef
3. useRef useRef
4. useRef useRef
5. useRef useRef
6. useRef useRef
7. useRef useRef
8. useMemo useMemo
9. useCallback useCallback
10. useSyncExternalStore useSyncExternalStore
11. useRef useRef
12. useCallback useCallback
13. useCallback useCallback
14. useLayoutEffect useLayoutEffect
15. useLayoutEffect useLayoutEffect
16. useLayoutEffect useLayoutEffect
17. useDebugValue useDebugValue
18. undefined useContext
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
DashboardLayout
NoSSR
Suspense
LoadableComponent
InnerLayoutRouter
Component@
RedirectBoundary
NotFoundBoundary
LoadingBoundary
ErrorBoundary
Component@
ScrollAndFocusHandler
RenderFromTemplateContext
OuterLayoutRouter
div
main
div
NoSSR
Suspense
InnerLayoutRouter
Component@
RedirectBoundary
NotFoundBoundary
LoadingBoundary
ErrorBoundary
Component@
ScrollAndFocusHandler
RenderFromTemplateContext
OuterLayoutRouter
LazyMotion
SWRConfig
f
$
ThemeProvider
body
html
AppLayout
Component@
RedirectBoundary
PureComponent@
Component@
NotFoundBoundary
HotReload
Router
Component@
ErrorBoundary
AppRouter
ServerRoot
RSCComponent
Root
(anonymous function) (app-index.js:32)
(anonymous function) (hydration-error-info.js:41)
printWarning (react-dom.development.js:94)
error (react-dom.development.js:68)
warnOnHookMismatchInDev (react-dom.development.js:10532)
updateHookTypesDev (react-dom.development.js:10491)
useContext (react-dom.development.js:12566)
useParams (navigation.js:141)
useCurrentProjectAndTeam (useCurrentProjectAndTeam.ts:14:85)
DashboardLayout (layout.tsx:36:120)
renderWithHooksAgain (react-dom.development.js:10798)
replaySuspendedComponentWithHooks (react-dom.development.js:10745)
replayFunctionComponent (react-dom.development.js:15221)
replaySuspendedUnitOfWork (react-dom.development.js:24581)
renderRootConcurrent (react-dom.development.js:24353)
performConcurrentWorkOnRoot (react-dom.development.js:23343)
performConcurrentWorkOnRoot
workLoop (scheduler.development.js:261)
flushWork (scheduler.development.js:230)
performWorkUntilDeadline (scheduler.development.js:537)
[Error] Error: Update hook called on initial render. This is likely a bug in React. Please file an issue.
getDerivedStateFromError (redirect-boundary.js:10938)
getStateFromUpdate (react-dom.development.js:7658)
processUpdateQueue (react-dom.development.js:7813)
updateClassInstance (react-dom.development.js:13973)
updateClassComponent (react-dom.development.js:15314)
callCallback (react-dom.development.js:19449)
dispatchEvent
invokeGuardedCallbackImpl (react-dom.development.js:19498)
invokeGuardedCallback (react-dom.development.js:19573)
beginWork (react-dom.development.js:25694)
performUnitOfWork (react-dom.development.js:24523)
workLoopConcurrent (react-dom.development.js:24509)
renderRootConcurrent (react-dom.development.js:24465)
performConcurrentWorkOnRoot (react-dom.development.js:23343)
performConcurrentWorkOnRoot
workLoop (scheduler.development.js:261)
flushWork (scheduler.development.js:230)
performWorkUntilDeadline (scheduler.development.js:537)
[Error] Error: Update hook called on initial render. This is likely a bug in React. Please file an issue.
getDerivedStateFromError (redirect-boundary.js:57)
getStateFromUpdate (react-dom.development.js:7658)
processUpdateQueue (react-dom.development.js:7813)
updateClassInstance (react-dom.development.js:13973)
updateClassComponent (react-dom.development.js:15314)
callCallback (react-dom.development.js:19449)
dispatchEvent
invokeGuardedCallbackImpl (react-dom.development.js:19498)
invokeGuardedCallback (react-dom.development.js:19573)
beginWork (react-dom.development.js:25694)
performUnitOfWork (react-dom.development.js:24523)
workLoopConcurrent (react-dom.development.js:24509)
renderRootConcurrent (react-dom.development.js:24465)
performConcurrentWorkOnRoot (react-dom.development.js:23343)
performConcurrentWorkOnRoot
workLoop (scheduler.development.js:261)
flushWork (scheduler.development.js:230)
performWorkUntilDeadline (scheduler.development.js:537)
Expected Behavior
Upgrading doesnt change the hooks order
Repro Steps / Code Example
I don't have a minimal repro, but I only see this error on a page where I use the a dynamic nextjs route segment as a variable:
// settings/[tid]/page.ts
export default function Page({ params: { tid } }) {
const { data } = useQuery(getTeam, { id: tid });
....
}and I have suspense enabled (and only running this client side.
// settings/[tid]/layout.ts
export default dynamic(() => Promise.resolve(SettingsDashboardLayout), {
ssr: false,
});Additional Context
version 2.2.0
suspense enabled
ssr false