Skip to main content

Search

Search problems, hooks, and pages

Tabs Component

Build a custom tabs component from scratch. Clicking a tab shows its content panel. Implement keyboard navigation (← → arrow keys) and a lazy-mount strategy so heavy content is only rendered the first time its tab is opened.

Requirements

  • Render a row of tab buttons; clicking activates that tab
  • Show the content panel for the active tab only
  • Keyboard navigation: arrow keys move focus between tabs; Enter/Space activates
  • Lazy mount: a tab's content is NOT rendered until the tab is first opened
  • Once mounted, keep the tab content in the DOM but hide it (CSS display:none) — avoids re-mounting on every switch
  • Add an "Unread" badge count to some tabs to test props/state

Key Patterns

activeTab: numbermountedTabs: Set<number>display: none vs unmountuseRef for tab elementsonKeyDown arrow navigation

Important

Interview Tip

The lazy-mount + keep-alive pattern: when a tab opens, add its index to mountedTabs (Set). In render: always output the panel div but set display:none when inactive. Only render the panel's children if mountedTabs.has(index). This gives you: no wasted render on first load, no state loss on tab switch.

Project Overview

This tab was rendered the first time you opened it and stays mounted after that. Switch tabs and back — it does not re-mount.

First rendered: 9:44:16 AM

Try: Switch tabs with ← → arrow keys. Tab content is preserved (lazy mount + keep-alive).