How to disable client-side <Activity> (Keep Alive) behavior when using "use cache" in Next.js 16? #87110
-
SummaryI am experimenting with Next.js 16 and React 19, specifically utilizing the new The Problem While I understand this is likely for "Instant Back" navigation, it is breaking my application's styling. Because the previous page remains in the DOM:
What I need help with
Additional information**Context:**
* **Next.js Version:** 16
* **React Version:** 19
* **Features Enabled:** `use cache`ExampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 6 replies
-
Isn't this just the problem with global page level styles? I mean, it likely happens without Cache Components too.
Got any example for this? I know before, tooltips used via Portals had issues, but that's been fixed on React itself. Cuz when Activity hides DOM elements it removes them from the document flow via display: none, but I am sure there might be some edge case. I'd like to see a clear example.
You could clean up on useLayoutEffect for those cases, right? or? I shall also add that the team is aware of the feedback around this topic. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the response! I have a concrete example of how this breaks functional application logic, not just styles. 1. State Staleness (The Checkout Bug)This is the most critical issue. Because the component is "hidden" and not destroyed, local state is preserved when I don't want it to be, breaking standard user flows.
// I have to add this boilerplate to every page component:
export function useFreshState<T>(initialValue: T) {
const [state, setState] = useState<T>(initialValue);
// Force reset on mount because the component might be "kept alive"
useIsomorphicEffect(() => {
setState(initialValue);
}, [initialValue]);
return [state, setState] as const;
}2. Global Styles & Body ClassesIt is common for specific pages to modify the document body (e.g., adding a
3. Cleanup &
|
Beta Was this translation helpful? Give feedback.
-
|
There's a few wrong statements here, even contradicting your first comment. As per React docs, https://react.dev/reference/react/Activity#my-hidden-components-have-unwanted-side-effects:
As you can see in this codesandox: We can clean up the DOM without issue. So items 2 and 3 are not correct in your statement. Item 1 is the one I've found most people get bitten by. As shown above you can safely clean that state up though. There are more ways to handle these cases. And yes, it does require wiring up more things. There's also a nuclear option, which I don't promote because it de-opts the entire subtree under it, but if you look around in this repo you'll find it. Screen.Recording.2025-12-12.at.18.03.15.mov |
Beta Was this translation helpful? Give feedback.
-
|
Warning
As part of v16 and Cache Components, the documentation for I explored the code and found that Is the following configuration the correct way to keep the cache features enabled ( // next.config.ts
const nextConfig = {
experimental: {
useCache: true,
}
};
|
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
okay |
Beta Was this translation helpful? Give feedback.
-
|
Ok, marked again. Sorry if it sounds a bit dramatic 😅 - but if its undocumented but present still, to help migrate and such, it is better to be clear about it. That's why it is still there, no other reason. |
Beta Was this translation helpful? Give feedback.
Warning
As part of v16 and Cache Components, the documentation for
experimental.useCachewas removed, but the configuration flag remained in place. It was kept to help with migration intoCache Components. If you do decide to use it at this point, do remember that because it is bothundocumentedandexperimental, it could be removed in the future. It is advised to try to migrate toCache Components.I explored the code and found that
useCacheseems to be the main flag. I also noticed references tocacheComponent.Is the following configuration the correct way to keep the cache features enabled (
useCache) but opt-out of the client-side Compo…