Build a Tabs Component with URL Sync & Lazy Mounting

Question

Accepted Answer

**Requirements**
- Tabs from config `[{id, label, panel}]`; active tab highlighted with animated indicator (underline sliding).
- URL sync: `?tab=settings` via `useSearchParams` (or `history.pushState`); restore on reload/back.
- Lazy mount panels (mount only when visited, keep mounted after); keyboard ←/→/Home/End roving.

**Architecture**
- `active` state initialized from `searchParams.get("tab") ?? defaultId`. On change, `setSearchParams({tab: id}, {replace:true})` or `pushState`.
- Indicator: measure active tab `getBoundingClientRect` vs container, set `left/width` with `transition`.
- Panels: `visitedRef = useRef(new Set([active]))`; render `visited.has(id) ? panel : null` with `hidden={active!==id}`.

**What interviewers look for:** URL as source of truth, lazy vs eager mounting, roving tabindex, indicator measurement, `aria-selected`.

**Reference implementation**
```jsx
export function Tabs({ tabs, defaultId }) {
  const [active, setActive] = React.useState(() => new URLSearchP

Build a Tabs Component with URL Sync & Lazy Mounting

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THE
STREAK ALIVE.

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THESTREAK ALIVE.

KEEP THE
STREAK ALIVE.