Frontend Beauty
ESC

Type to search the knowledge base.

Layout Components

Layout components structure pages with slots and children: shells, stacks, and keeping presentational layout free of business state.

beginner3 min read
  • react
  • layout-components

Layout components own structure and spacing, not business rules. They accept children or named slots and apply consistent grids, gutters, and regions so feature screens stay thin.

function AppShell({ nav, children }) {
  return (
    <div className="shell">
      <header className="shell__header">{nav}</header>
      <main className="shell__main">{children}</main>
    </div>
  );
}

function Page() {
  return (
    <AppShell nav={<MainNav />}>
      <BillingSettings />
    </AppShell>
  );
}

This is composition applied to page chrome.

Stack, cluster, sidebar patterns

function Stack({ gap = 16, children }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap }}>
      {children}
    </div>
  );
}

function SidebarLayout({ side, children }) {
  return (
    <div className="sidebar-layout">
      <aside>{side}</aside>
      <div>{children}</div>
    </div>
  );
}

Utility layout primitives beat one-off margin soup. Keep them presentational: no data fetching, no auth redirects (those belong in route layers or server layouts — in Next, see layouts).

Nested layouts and state

Do not park global filters inside a layout that remounts on every leaf navigation unless you want state loss — or lift state above the remounting boundary. In SPA routers, layout routes exist specifically to preserve chrome state across child route changes.

Accessibility

Landmarks matter: one <main>, meaningful <nav aria-label>, skip links. Layout is where those regions are defined.

function AppShell({ children }) {
  return (
    <>
      <a className="skip" href="#main">Skip to content</a>
      <nav aria-label="Primary">{/* ... */}</nav>
      <main id="main">{children}</main>
    </>
  );
}

Interview out-loud

“Layout components accept children or slots and own structural chrome — header, sidebar, grid — without business logic. Composition keeps features free of spacing duplication, and landmarks in the shell improve accessibility. I avoid putting high-churn business state in layouts that remount.”

Further reading

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides