Debug compound components under interview pressure

The fixed Tabs uses a context for state instead of cloneElement injection; arbitrary wrapping divs no longer break the contract.

// THE BUG: the original Tabs cloned children with React.Children.map and
// injected props. Any wrapping div (like a layout helper) broke the
// injection because cloneElement could not see past the first level. The
// fix shares state through context so any depth of wrapping works and
// callers can compose children freely.

type TabsContextValue = {
  active: string;
  setActive: (id: string) => void;
};

const TabsContext = React.createContext<TabsContextValue | null>(null);

function useTabs(name: string) {
  const ctx = React.useContext(TabsContext);
  if (!ctx) throw new Error(name + ' must be inside Tabs.Root');
  return ctx;
}

function Root({
  defaultActive,
  children,
}: {
  defaultActive: string;
  children: React.ReactNode;
}) {
  const [active, setActive] = React.useState(defaultActive);
  const value = React.useMemo(() => ({ active, setActive }), [active]);
  return <TabsContext.Provider value={value}>{children}</TabsContext.Provider>;
}

function Trigger({ id, children }: { id: string; children: React.ReactNode }) {
  const { active, setActive } = useTabs('Tabs.Trigger');
  return (
    <button
      role="tab"
      aria-selected={active= id}
      onClick={()=> setActive(id)}
    >
      {children}
    </button>
  );
}

function Panel({ id, children }: { id: string; children: React.ReactNode }) {
  const { active } = useTabs('Tabs.Panel');
  if (active !== id) return null;
  return <div role="tabpanel">{children}</div>;
}

export const Tabs = { Root, Trigger, Panel };

Convert the answer into observable behavior. In a mid-senior interview, say which behaviors are covered by unit tests, interaction tests, accessibility checks, and one browser smoke path.

import { describe, it, expect } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';

describe('Tabs regression', () => {
  it('works through arbitrary wrapping divs', () => {
    render(
      <Tabs.Root defaultActive="a">
        <div className="layout">
          <div className="row">
            <Tabs.Trigger id="a">A</Tabs.Trigger>
            <Tabs.Trigger id="b">B</Tabs.Trigger>
          </div>
        </div>
        <Tabs.Panel id="a">Panel A</Tabs.Panel>
        <Tabs.Panel id="b">Panel B</Tabs.Panel>
      </Tabs.Root>
    );

    // The broken cloneElement version lost the props after the wrapping
    // divs and the trigger never received state. Here state flows
    // through context, depth is irrelevant.
    expect(screen.getByText('Panel A')).toBeInTheDocument();
    fireEvent.click(screen.getByRole('tab', { name: 'B' }));
    expect(screen.getByText('Panel B')).toBeInTheDocument();
  });
});

Tests whether you debug from ownership and lifecycle instead of random dependency-array edits.

• State a hypothesis before changing code.
• Name what evidence would confirm the bug.
• Avoid broad rewrites unless the current API cannot express the behavior.

• Reproduce the failing sequence first.
• Inspect ownership boundaries: local state, props, effects, subscriptions, and server data.
• Patch the minimal broken boundary and add a regression test.

• A minimal patch reduces risk, but repeated lifecycle bugs often justify a small reducer or custom hook.
• Adding dependencies can silence lint warnings while still preserving the wrong ownership model.

• Double clicks and repeated submissions.
• Slow network responses arriving out of order.
• Component remount with stale persisted state.

• Failing interaction sequence.
• Out-of-order async response.
• Unmount cleanup.

• What would the code review comment say?
• What metric or log would show this in production?