How does the App Router handle layout re-rendering — does a layout re-render when its child route changes?

Question

Accepted Answer

In the Pages Router, every route change caused the entire page — including shared UI like headers, sidebars and navbars — to unmount and remount. The App Router solves this with Partial Rendering. When you navigate between routes that share a layout, only the segment below the shared layout re-renders. The layout itself stays mounted, preserving its state, scroll position, and avoiding unnecessary re-fetches. Next.js identifies the shared layout between the current and target route Only the route segments below the shared layout are re-rendered The shared layout stays mounted — it is NOT unmounted and remounted Layout state (useState, scroll position, form input) is preserved across navigations Layout data fetching does NOT re-run on child route changes React Server Components diffing ensures only changed segments are updated in the DOM app/ ├── layout.jsx ← RootLayout (never re-renders) ├── dashboard/ │ ├── layout.jsx ← DashboardLayout (re-renders only when leaving /dashboard) │ ├── page.jsx ← /dashboard │ ├── analytics/ │ │ └── page.jsx ← /dashboard/analytics │ ├── settings/ │ │ └── page.jsx ← /dashboard/settings │ └── profile/ │ └── page.jsx ← /dashboard/profile // Navigating /dashboard → /dashboard/analytics // ✅ RootLayout — stays mounted, no re-render // ✅ DashboardLayout — stays mounted, no re-render // 🔄 page.jsx — only THIS re-renders (swapped out) // app/dashboard/layout.jsx import { useState } from 'react' export default function DashboardLayout({ children }) { // ✅ This state is PRESERVED when navigating between child routes // useState only runs once — on initial mount const [sidebarOpen, setSidebarOpen] = useState(true) console.log('DashboardLayout rendered') // This logs ONCE on mount // Does NOT log again when navigating to /dashboard/analytics // Does NOT log again when navigating to /dashboard/settings return (

setSidebarOpen(prev => !prev)} />

{children} {/* ← only this part swaps on navigation */}

) } // app/dashboard/layout.jsx // Data fetched here runs ONCE — not on every child route change export default async function DashboardLayout({ children }) { // ✅ Fetched once when layout first mounts // ✅ NOT re-fetched when navigating between child routes const user = await fetch('https://api.example.com/me', { cache: 'force-cache' // cached by default }).then(r => r.json()) return (

{children}

) } // ⚠️ Important: if user data changes, layout won't reflect it // until a hard refresh or router.refresh() is called // Solution: use revalidatePath() or router.refresh() after mutations // app/dashboard/layout.jsx // ✅ Preserved across child navigations — state is kept export default function DashboardLayout({ children }) { const [count, setCount] = useState(0) // count is preserved when navigating between child routes return (

{children}

) } // app/dashboard/template.jsx // 🔄 Re-mounts on EVERY child navigation — state is reset export default function DashboardTemplate({ children }) { const [count, setCount] = useState(0) // count RESETS to 0 on every navigation — template always re-mounts return (

{children}

) } // Use template.jsx when you need: // - CSS enter/exit animations on every route change // - useEffect to fire on every navigation // - Fresh component state on every page visit // - Per-page analytics tracking // app/dashboard/settings/page.jsx 'use client' import { useRouter } from 'next/navigation' export default function SettingsPage() { const router = useRouter() const updateProfile = async (data) => { await fetch('/api/profile', { method: 'PUT', body: JSON.stringify(data) }) // ✅ router.refresh() re-fetches layout server data // without unmounting the layout or losing client state router.refresh() } return ( ) } // Server Action alternative — revalidatePath // app/actions/profile.js import { revalidatePath } from 'next/cache' export async function updateProfile(data) { await db.profile.update(data) revalidatePath('/dashboard') // ✅ re-fetches layout + all child routes } // Navigating from /dashboard/settings to /dashboard/analytics // app/layout.jsx → ✅ Never re-renders (root) // app/dashboard/layout.jsx → ✅ Never re-renders (shared parent) // app/dashboard/settings/layout.jsx

How does the App Router handle layout re-rendering — does a layout re-render when its child route changes?

No — layouts in the App Router do NOT re-render when their child route changes. This is one of the most important performance advantages of the App Router over the Pages Router. Layouts are preserved across navigations, meaning only the part of the UI that actually changed is re-rendered.

How does the App Router handle layout re-rendering — does a layout re-render when its child route changes?

No — layouts in the App Router do NOT re-render when their child route changes. This is one of the most important performance advantages of the App Router over the Pages Router. Layouts are preserved across navigations, meaning only the part of the UI that actually changed is re-rendered.

Scenario Questions

Follow-up Questions