nextjs - ✅(Solved) Fix cacheComponents breaks React Portal cleanup — portaled content stays stuck after route change [11 pull requests, 13 comments, 6 participants]

SorooshGb · 2025-10-27T08:21:26Z

[nextjs] PR 415: Workaround for handling Next.js 16 router caching - Repository: zoonk/zoonk - Author: ceolinwill - State: closed | merged: True - Link: https:… # PR #415: Workaround for handling Next.js 16 router caching - Repository: zoonk/zoonk - Author: ceolinwill - State: closed | merged: True - Link: https://github.com/zoonk/zoonk/pull/415 ## Description (problem / solution / changelog) Next.js 16 merged the `routerBfCache` flag with `cacheComponents` on https://github.com/vercel/next.js/pull/84923 This means we can no longer use `cacheComponents` without also using `routerBfCache`, which broke our components using Radix Portal and our form. We need to double-check other pages as well because this can cause more unexpected behavior since Next.js now preserves the state when navigating back/forward. We never want this behavior but there isn't a way to disable it right now. So, we need to also test all pages to spot more broken behavior caused by this. We can partially revert this if https://github.com/facebook/react/issues/35000 is fixed since `Activity` doesn't hide portals. However, this will cause other issues. Basically, we need to make sure we're always resetting a page's state before navigation. ## References - https://github.com/facebook/react/issues/35000 - https://github.com/vercel/next.js/issues/85390 - https://github.com/vercel/next.js/pull/84923 - https://github.com/vercel/next.js/pull/85309 ## Changed files - `apps/main/src/app/[locale]/(catalog)/learn/start-course-form.tsx` (modified, +2/-0) - `packages/ui/src/components/dialog.tsx` (modified, +3/-0) - `packages/ui/src/components/dropdown-menu.tsx` (modified, +4/-2) - `packages/ui/src/components/select.tsx` (modified, +3/-0) - `packages/ui/src/components/sheet.tsx` (modified, +3/-0) - `packages/ui/src/hooks/use-remove-portal.ts` (added, +30/-0) --- # PR #115: refactor: upgrade to next.js 16 and adopt cache components - Repository: dkast/biztro - Author: dkast - State: closed | merged: False - Link: https://github.com/dkast/biztro/pull/115 ## Description (problem / solution / changelog) Blocked until this issue is resolved: https://github.com/vercel/next.js/issues/85390 ## Changed files - `.vscode/mcp.json` (modified, +4/-0) - `bun.lockb` (modified, +0/-0) - `eslint.config.mjs` (modified, +27/-43) - `next-env.d.ts` (modified, +1/-1) - `next.config.mjs` (modified, +4/-3) - `package.json` (modified, +45/-43) - `prisma.config.ts` (modified, +5/-7) - `src/app/(auth)/auth-error/loading.tsx` (added, +9/-0) - `src/app/(auth)/invite/[id]/loading.tsx` (added, +9/-0) - `src/app/(auth)/login/login-form.tsx` (modified, +12/-7) - `src/app/(auth)/login/page.tsx` (modified, +2/-9) - `src/app/(auth)/new-org/loading.tsx` (added, +9/-0) - `src/app/(auth)/new-org/page.tsx` (modified, +6/-1) - `src/app/[subdomain]/page.tsx` (modified, +49/-51) - `src/app/api/file/route.ts` (modified, +0/-4) - `src/app/api/org/route.ts` (modified, +0/-2) - `src/app/dashboard/layout.tsx` (modified, +15/-16) - `src/app/dashboard/menu-delete.tsx` (modified, +2/-1) - `src/app/dashboard/menu-items/@modal/(.)[action]/[id]/loading.tsx` (renamed, +0/-0) - `src/app/dashboard/menu-items/@modal/(.)[action]/[id]/page.tsx` (modified, +9/-11) - `src/app/dashboard/menu-items/[action]/[id]/item-form.tsx` (modified, +17/-13) - `src/app/dashboard/menu-items/[action]/[id]/page.tsx` (modified, +8/-10) - `src/app/dashboard/menu-items/[action]/[id]/variant-form.tsx` (modified, +2/-3) - `src/app/dashboard/menu-items/categories/category-delete.tsx` (modified, +1/-2) - `src/app/dashboard/menu-items/categories/loading.tsx` (added, +9/-0) - `src/app/dashboard/menu-items/categories/page.tsx` (modified, +3/-4) - `src/app/dashboard/menu-items/page.tsx` (modified, +7/-6) - `src/app/dashboard/menu-list.tsx` (modified, +16/-3) - `src/app/dashboard/menu-rename.tsx` (modified, +3/-6) - `src/app/dashboard/page.tsx` (modified, +18/-4) - `src/app/dashboard/settings/billing/pro-plan-view.tsx` (modified, +1/-1) - `src/app/dashboard/settings/locations/hours-form.tsx` (modified, +54/-1) - `src/app/dashboard/settings/locations/location-form.tsx` (modified, +19/-0) - `src/app/dashboard/settings/locations/page.tsx` (modified, +3/-4) - `src/app/dashboard/settings/members/page.tsx` (modified, +3/-3) - `src/app/dashboard/settings/organization-form.tsx` (modified, +18/-3) - `src/app/layout.tsx` (modified, +14/-10) - `src/app/menu-editor/[id]/page.tsx` (modified, +1/-1) - `src/app/providers.tsx` (modified, +0/-13) - `src/components/dashboard/app-sidebar.tsx` (modified, +74/-61) - `src/components/marketing/footer.tsx` (modified, +2/-1) - `src/components/menu-editor/menu-title.tsx` (modified, +0/-9) - `src/components/menu-editor/theme-selector.tsx` (modified, +4/-4) - `src/lib/utils.ts` (modified, +1/-1) - `src/proxy.ts` (renamed, +1/-1) - `src/server/actions/item/mutations.ts` (modified, +79/-116) - `src/server/actions/item/queries.ts` (modified, +19/-47) - `src/server/actions/location/mutations.ts` (modified, +19/-22) - `src/

nextjs2025-10-27 08:21:26

ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

GitHub issue URL

Helpful · Quick feedback

GitHub stats

vercel/next.js#85390•Fetched 2026-04-08 02:16:01

View on GitHub

Comments

Participants

Timeline

Reactions

Author

Participants

Timeline (top)

subscribed ×25commented ×13cross-referenced ×5mentioned ×4

Fix Action

Fixed

Fixed by PR: Workaround for handling Next.js 16 router caching (https://github.com/zoonk/zoonk/pull/415)
Fixed by PR: refactor: upgrade to next.js 16 and adopt cache components (https://github.com/dkast/biztro/pull/115)
Fixed by PR: Upgrade React from fa50caf5-20251107 to 52684925-20251110 (https://github.com/vercel/next.js/pull/85980)

PR fix notes

PR #415: Workaround for handling Next.js 16 router caching

Repository: zoonk/zoonk
Author: ceolinwill
State: closed | merged: True
Link: https://github.com/zoonk/zoonk/pull/415

Description (problem / solution / changelog)

Next.js 16 merged the routerBfCache flag with cacheComponents on https://github.com/vercel/next.js/pull/84923

This means we can no longer use cacheComponents without also using routerBfCache, which broke our components using Radix Portal and our form. We need to double-check other pages as well because this can cause more unexpected behavior since Next.js now preserves the state when navigating back/forward.

We never want this behavior but there isn't a way to disable it right now. So, we need to also test all pages to spot more broken behavior caused by this.

We can partially revert this if https://github.com/facebook/react/issues/35000 is fixed since Activity doesn't hide portals. However, this will cause other issues. Basically, we need to make sure we're always resetting a page's state before navigation.

References

Changed files

apps/main/src/app/[locale]/(catalog)/learn/start-course-form.tsx (modified, +2/-0)
packages/ui/src/components/dialog.tsx (modified, +3/-0)
packages/ui/src/components/dropdown-menu.tsx (modified, +4/-2)
packages/ui/src/components/select.tsx (modified, +3/-0)
packages/ui/src/components/sheet.tsx (modified, +3/-0)
packages/ui/src/hooks/use-remove-portal.ts (added, +30/-0)

PR #115: refactor: upgrade to next.js 16 and adopt cache components

Repository: dkast/biztro
Author: dkast
State: closed | merged: False
Link: https://github.com/dkast/biztro/pull/115

Description (problem / solution / changelog)

Blocked until this issue is resolved: https://github.com/vercel/next.js/issues/85390

Changed files

.vscode/mcp.json (modified, +4/-0)
bun.lockb (modified, +0/-0)
eslint.config.mjs (modified, +27/-43)
next-env.d.ts (modified, +1/-1)
next.config.mjs (modified, +4/-3)
package.json (modified, +45/-43)
prisma.config.ts (modified, +5/-7)
src/app/(auth)/auth-error/loading.tsx (added, +9/-0)
src/app/(auth)/invite/[id]/loading.tsx (added, +9/-0)
src/app/(auth)/login/login-form.tsx (modified, +12/-7)
src/app/(auth)/login/page.tsx (modified, +2/-9)
src/app/(auth)/new-org/loading.tsx (added, +9/-0)
src/app/(auth)/new-org/page.tsx (modified, +6/-1)
src/app/[subdomain]/page.tsx (modified, +49/-51)
src/app/api/file/route.ts (modified, +0/-4)
src/app/api/org/route.ts (modified, +0/-2)
src/app/dashboard/layout.tsx (modified, +15/-16)
src/app/dashboard/menu-delete.tsx (modified, +2/-1)
src/app/dashboard/menu-items/@modal/(.)[action]/[id]/loading.tsx (renamed, +0/-0)
src/app/dashboard/menu-items/@modal/(.)[action]/[id]/page.tsx (modified, +9/-11)
src/app/dashboard/menu-items/[action]/[id]/item-form.tsx (modified, +17/-13)
src/app/dashboard/menu-items/[action]/[id]/page.tsx (modified, +8/-10)
src/app/dashboard/menu-items/[action]/[id]/variant-form.tsx (modified, +2/-3)
src/app/dashboard/menu-items/categories/category-delete.tsx (modified, +1/-2)
src/app/dashboard/menu-items/categories/loading.tsx (added, +9/-0)
src/app/dashboard/menu-items/categories/page.tsx (modified, +3/-4)
src/app/dashboard/menu-items/page.tsx (modified, +7/-6)
src/app/dashboard/menu-list.tsx (modified, +16/-3)
src/app/dashboard/menu-rename.tsx (modified, +3/-6)
src/app/dashboard/page.tsx (modified, +18/-4)
src/app/dashboard/settings/billing/pro-plan-view.tsx (modified, +1/-1)
src/app/dashboard/settings/locations/hours-form.tsx (modified, +54/-1)
src/app/dashboard/settings/locations/location-form.tsx (modified, +19/-0)
src/app/dashboard/settings/locations/page.tsx (modified, +3/-4)
src/app/dashboard/settings/members/page.tsx (modified, +3/-3)
src/app/dashboard/settings/organization-form.tsx (modified, +18/-3)
src/app/layout.tsx (modified, +14/-10)
src/app/menu-editor/[id]/page.tsx (modified, +1/-1)
src/app/providers.tsx (modified, +0/-13)
src/components/dashboard/app-sidebar.tsx (modified, +74/-61)
src/components/marketing/footer.tsx (modified, +2/-1)
src/components/menu-editor/menu-title.tsx (modified, +0/-9)
src/components/menu-editor/theme-selector.tsx (modified, +4/-4)
src/lib/utils.ts (modified, +1/-1)
src/proxy.ts (renamed, +1/-1)
src/server/actions/item/mutations.ts (modified, +79/-116)
src/server/actions/item/queries.ts (modified, +19/-47)
src/server/actions/location/mutations.ts (modified, +19/-22)
src/server/actions/location/queries.ts (modified, +17/-24)
src/server/actions/menu/mutations.ts (modified, +6/-34)
src/server/actions/menu/queries.ts (modified, +23/-60)
src/server/actions/organization/mutations.ts (modified, +44/-11)
src/server/actions/organization/queries.ts (modified, +53/-94)
src/server/actions/subscriptions/mutations.ts (modified, +4/-0)
src/server/actions/subscriptions/queries.ts (modified, +5/-0)
src/server/actions/user/mutations.ts (modified, +100/-24)
src/server/actions/user/queries.ts (modified, +69/-4)
tsconfig.json (modified, +5/-2)

PR #85980: Upgrade React from `fa50caf5-20251107` to `52684925-20251110`

Repository: vercel/next.js
Author: nextjs-bot
State: closed | merged: True
Link: https://github.com/vercel/next.js/pull/85980

Description (problem / solution / changelog)

Closes https://github.com/vercel/next.js/issues/85279 Closes https://github.com/vercel/next.js/issues/85390

diff facebook/[email protected]

<details> <summary>React upstream changes</summary>

</details>

Changed files

package.json (modified, +16/-16)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.development.js (modified, +328/-310)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-client.production.js (modified, +353/-335)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.development.js (modified, +328/-310)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-profiling.profiling.js (modified, +358/-340)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.development.js (modified, +32/-35)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.production.js (modified, +32/-37)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.development.js (modified, +32/-35)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.node.production.js (modified, +32/-37)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.development.js (modified, +46/-63)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.browser.production.js (modified, +46/-65)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.bun.production.js (modified, +46/-65)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.development.js (modified, +46/-63)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.edge.production.js (modified, +46/-65)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.development.js (modified, +46/-63)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server.node.production.js (modified, +46/-65)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.development.js (modified, +328/-310)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom-unstable_testing.production.js (modified, +353/-335)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom.development.js (modified, +1/-1)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom.production.js (modified, +1/-1)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom.react-server.development.js (modified, +1/-1)
packages/next/src/compiled/react-dom-experimental/cjs/react-dom.react-server.production.js (modified, +1/-1)
packages/next/src/compiled/react-dom-experimental/package.json (modified, +2/-2)
packages/next/src/compiled/react-dom/cjs/react-dom-client.development.js (modified, +327/-309)
packages/next/src/compiled/react-dom/cjs/react-dom-client.production.js (modified, +349/-331)
packages/next/src/compiled/react-dom/cjs/react-dom-profiling.development.js (modified, +327/-309)
packages/next/src/compiled/react-dom/cjs/react-dom-profiling.profiling.js (modified, +372/-354)
packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js (modified, +42/-39)
packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.production.js (modified, +44/-39)
packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.node.development.js (modified, +42/-39)
packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.node.production.js (modified, +44/-39)
packages/next/src/compiled/react-dom/cjs/react-dom-server.browser.development.js (modified, +50/-61)
packages/next/src/compiled/react-dom/cjs/react-dom-server.browser.production.js (modified, +52/-61)
packages/next/src/compiled/react-dom/cjs/react-dom-server.bun.production.js (modified, +52/-61)
packages/next/src/compiled/react-dom/cjs/react-dom-server.edge.development.js (modified, +50/-61)
packages/next/src/compiled/react-dom/cjs/react-dom-server.edge.production.js (modified, +52/-61)
packages/next/src/compiled/react-dom/cjs/react-dom-server.node.development.js (modified, +50/-61)
packages/next/src/compiled/react-dom/cjs/react-dom-server.node.production.js (modified, +52/-61)
packages/next/src/compiled/react-dom/cjs/react-dom.development.js (modified, +1/-1)
packages/next/src/compiled/react-dom/cjs/react-dom.production.js (modified, +1/-1)
packages/next/src/compiled/react-dom/cjs/react-dom.react-server.development.js (modified, +1/-1)
packages/next/src/compiled/react-dom/cjs/react-dom.react-server.production.js (modified, +1/-1)
packages/next/src/compiled/react-dom/package.json (modified, +2/-2)
packages/next/src/compiled/react-experimental/cjs/react.development.js (modified, +1/-1)
packages/next/src/compiled/react-experimental/cjs/react.production.js (modified, +1/-1)
packages/next/src/compiled/react-experimental/cjs/react.react-server.development.js (modified, +1/-1)
packages/next/src/compiled/react-experimental/cjs/react.react-server.production.js (modified, +1/-1)
packages/next/src/compiled/react-is/package.json (modified, +1/-1)
packages/next/src/compiled/react-server-dom-turbopack-experimental/cjs/react-server-dom-turbopack-client.browser.development.js (modified, +2/-2)
packages/next/src/compiled/react-server-dom-turbopack-experimental/package.json (modified, +2/-2)
packages/next/src/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js (modified, +2/-2)
packages/next/src/compiled/react-server-dom-turbopack/package.json (modified, +2/-2)
packages/next/src/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-client.browser.development.js (modified, +2/-2)
packages/next/src/compiled/react-server-dom-webpack-experimental/package.json (modified, +2/-2)
packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js (modified, +2/-2)
packages/next/src/compiled/react-server-dom-webpack/package.json (modified, +2/-2)
packages/next/src/compiled/react/cjs/react.development.js (modified, +1/-1)
packages/next/src/compiled/react/cjs/react.production.js (modified, +1/-1)
packages/next/src/compiled/react/cjs/react.react-server.development.js (modified, +1/-1)
packages/next/src/compiled/react/cjs/react.react-server.production.js (modified, +1/-1)
packages/next/src/compiled/unistore/unistore.js (modified, +1/-1)
pnpm-lock.yaml (modified, +583/-548)

Code Example

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 32493
  Available CPU cores: 12
Binaries:
  Node: 22.16.0
  npm: 11.4.2
  Yarn: 1.22.22
  pnpm: 10.13.1
Relevant Packages:
  next: 16.0.0 // Latest available version is detected (16.0.0).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/SorooshGb/nextjs-portal-cache-issue-repro

To Reproduce

Clone the repo linked above and run npm install.
Start the app with npm run dev.
Open the Home page (/) — you’ll see 4 dropdown menus, each using a different implementation:
- Radix UI / shadcn dropdown
- Raw React portal example
- React Aria popover
- Headless UI popover
Open any of the dropdowns/popovers.
Inside each one, click the link that navigates to /dashboard.
After navigation, notice that the portaled content remains visible on the new route and doesn’t go away until you refresh the page.

Current vs. Expected behavior

Current behavior:
When cacheComponents: true is enabled in Next.js 16, any open portal (dropdown, popover, modal, etc.) stays visible on the screen after navigation and becomes completely non-interactive.
Its DOM node persists in the document and can only be cleared by refreshing the page.

Expected behavior:
Portal content should disappear (be unmounted) automatically when navigating to a new route, as it does when cacheComponents is set to false or in previous Next.js versions.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 32493
  Available CPU cores: 12
Binaries:
  Node: 22.16.0
  npm: 11.4.2
  Yarn: 1.22.22
  pnpm: 10.13.1
Relevant Packages:
  next: 16.0.0 // Latest available version is detected (16.0.0).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

cacheComponents

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

This issue appears to have been introduced in Next.js 16 — it does not happen in previous versions.
A comment in the related issue (#85218) points to a specific PR that might have caused it:
https://github.com/vercel/next.js/issues/85218#issuecomment-3438988614

I’m creating this new issue with a more accurate title to bring attention to how critical this problem is, since the existing reports don’t fully explain or demonstrate it:

extent analysis

TL;DR

The most likely fix is to disable cacheComponents in Next.js 16 or wait for a future version that addresses this issue.

Guidance

Verify that the issue is specific to Next.js 16 by testing with a previous version to confirm the behavior difference.
Try setting cacheComponents to false in your Next.js configuration to see if it resolves the portal content persistence issue.
Review the related issues and PRs (e.g., #85218, https://github.com/vercel/next.js/issues/85279) for any updates or workarounds that might have been suggested by the community or maintainers.
Consider reaching out to the Next.js community or maintainers for a more definitive fix or workaround, as this issue seems to be a regression introduced in Next.js 16.

Example

No specific code example is provided as the issue seems to be related to the configuration and version of Next.js rather than a specific code snippet.

Notes

The issue is specific to Next.js 16 and does not occur in previous versions, indicating a potential regression.
The problem affects the cacheComponents feature, which suggests that disabling this feature might mitigate the issue.

Recommendation

Apply workaround: Disable cacheComponents in your Next.js configuration until a future version of Next.js addresses this regression, as it currently causes portal content to remain visible after navigation.

Vote matrix · Quick signals

Works

Did the solution work? Tap to confirm.

Easy Fix

Was it a quick fix?

Time Saver

Did it save you time?

Blocking

Was it severely blocking?

Common Issue

Are others likely hitting this too?

Flaky / Intermittent

Is it intermittent?

Verified / Reproducible

Can you reproduce it reliably?

#configuration error #environment variable #network issue #logging issue #cache issue

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

nextjs - ✅(Solved) Fix cacheComponents breaks React Portal cleanup — portaled content stays stuck after route change [11 pull requests, 13 comments, 6 participants]

Recommended Tools

GitHub issue graph ai analysis

Fix Action

Fixed

PR fix notes

PR #415: Workaround for handling Next.js 16 router caching

Description (problem / solution / changelog)

References

Changed files

PR #115: refactor: upgrade to next.js 16 and adopt cache components

Description (problem / solution / changelog)

Changed files

PR #85980: Upgrade React from fa50caf5-20251107 to 52684925-20251110

Description (problem / solution / changelog)

Changed files

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

extent analysis

TL;DR

Guidance

Example

Notes

Recommendation

Still need to ship something?

RELATED_DISCOVERY

TRENDING

PR #85980: Upgrade React from `fa50caf5-20251107` to `52684925-20251110`