Updating from 2.1.5 to 2.2.0 causes issue with hooks order in next.js app router

[rickiesmooth]

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

[uonr]

I encountered the same problem. As I modify other parts of the code (removing useMemo), this issue appears and disappears like a ghost, making it difficult for me to organize a minimal reproducible code. I will try again when I have time.

[himself65]

dynamic is a very old code with no maintenance for a long time.
I think you should use React.lazy with Suspense to replace it

[uonr]

dynamic is a very old code with no maintenance for a long time. I think you should use React.lazy with Suspense to replace it

In my case, I didn't use dynamic but still encountered the problem of hook order, so I suspect this may not be related to dynamic.

[rickiesmooth]

I'm unable to come up with a minimum reproduction, but adding/removing useMemo seems to affect the issue indeed

[uonr]

I reproduced this bug.

https://github.com/uonr/swr-issue-2702-reproduction/blob/master/app/Client.tsx

[nyeoni]

The same error occurred when I used useSWRInfinite and dynamic.

[promer94]

will be tracked in #2849

[MiccWan]

will be tracked in #2894

@promer94 Do you mean #2849 ?