Next.js Preserving UI State

Expert guidance on how React Activity preserves UI state across navigations in Next.js — dropdowns, forms, dialogs, auth, global styles, and testing.

@doc-version: 16.2.6

Core Concepts

เมื่อเปิด cacheComponents: true — Next.js ใช้ React <Activity> component:

• Pages ไม่ถูก unmount เมื่อ navigate ออก — ถูก hide ด้วย display: none
• State ทั้งหมด persist: useState, form inputs, scroll position, <details> expanded, video playback
• เก็บสูงสุด 3 routes — เกินนั้น oldest ถูก evict
• Effects cleanup รันเมื่อ hide, re-run เมื่อ visible

Guidelines

1. Expandable UI (Dropdowns, Accordions)

Keep: Sidebar sections, FAQ accordion, filter panels (user set up intentionally)