Why Component State Survives Navigation in Next.js 16: React Activity

Next.js react activity is the mechanism behind a state-preservation change in Next.js 16. This article assumes a project has Cache Components enabled. With that flag on, navigating away from a page and back no longer resets the state that page held, which surprises developers used to every page mounting fresh on every visit.

Say a page has a details element a reader expanded, or a form they partly filled in.

App.tsx

// app/notes/page.tsx
"use client";
import { useState } from "react";
 
export default function NotesPage() {
  const [draft, setDraft] = useState("");
  return (
    <textarea value={draft} onChange={(e) => setDraft(e.target.value)} />
  );
}

Type a partial note, navigate to another route, then click back. With Cache Components enabled, the text is still there. Without it, this page would have unmounted on the way out and remounted empty on the way back, losing the draft entirely.

Why the state does not reset

Instead of unmounting a page's component tree when a reader navigates away, Next.js hides it using React's Activity component, keeping the DOM in place with display: none rather than tearing it down. Because the DOM and component state both remain, the browser's own state, such as scroll position and an expanded details element, survives alongside the React state a component manages itself.

What gets preserved, and for how long

Next.js keeps a limited number of recently visited routes this way, currently up to three. Once a reader visits a fourth route in this pattern, the oldest of the previous three is evicted and renders fresh the next time it is visited, the same as it would without this feature.

A full reload always clears state, since it tears down the entire page rather than hiding part of it. This matters for something like a sign-out action: if it should truly reset everything, a full reload achieves that, while a client-side navigation to the same URL would not.

A caveat with media

A video or audio element does not automatically pause when its page is hidden this way, since display: none alone does not stop playback. Handle that case explicitly with a cleanup effect if a hidden page should stop playing media instead of continuing in the background.

For the client-side navigation mechanics this feature builds on, see Client-Side Navigation in Next.js: What Happens on a Link Click. It also relies on the same app shell used for Partial Prefetching and Instant Navigation in Next.js 16.