Debug Suspense loading boundaries under interview pressure

The fixed Dashboard wraps the header and the chart in separate Suspense boundaries; each renders independently as its data resolves.

// THE BUG: a single Suspense boundary wrapped the whole page, so any one
// slow data source held the entire UI in the spinner state. The fix is
// nested boundaries that match the data dependencies of each section, so
// the navigation and the fast widgets render immediately while the slow
// chart shows a localized fallback.

function readResource<T>(promise: Promise<T>): T {
  // Minimal resource-reader shim. In production use a library or React's
  // built-in caching primitives; the contract is "throw the promise".
  const tracked = promise as Promise<T> & { status?: string; value?: T; error?: unknown };
  if (tracked.status === 'fulfilled') return tracked.value as T;
  if (tracked.status === 'rejected') throw tracked.error;
  if (!tracked.status) {
    tracked.status = 'pending';
    promise.then(
      (value) => {
        tracked.status = 'fulfilled';
        tracked.value = value;
      },
      (error) => {
        tracked.status = 'rejected';
        tracked.error = error;
      }
    );
  }
  throw promise;
}

type Page = { title: string };
type Chart = { samples: number[] };

function PageHeader({ pagePromise }: { pagePromise: Promise<Page> }) {
  const page = readResource(pagePromise);
  return <h1>{page.title}</h1>;
}

function SlowChart({ chartPromise }: { chartPromise: Promise<Chart> }) {
  const chart = readResource(chartPromise);
  return <p data-testid="samples">{chart.samples.length} samples</p>;
}

export function Dashboard({
  pagePromise,
  chartPromise,
}: {
  pagePromise: Promise<Page>;
  chartPromise: Promise<Chart>;
}) {
  return (
    <main>
      {/* Header has its own boundary because it is fast and important. */}
      <React.Suspense fallback={<p>Loading header…</p>}>
        <PageHeader pagePromise={pagePromise} />
      </React.Suspense>
      {/* Chart has a separate boundary so it does not block the header. */}
      <React.Suspense fallback={<p role="status">Loading chart…</p>}>
        <SlowChart chartPromise={chartPromise} />
      </React.Suspense>
    </main>
  );
}

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, waitFor } from '@testing-library/react';

describe('Dashboard suspense regression', () => {
  it('renders the fast header before the slow chart resolves', async () => {
    const pagePromise = Promise.resolve({ title: 'Welcome' });
    let resolveChart: (value: { samples: number[] }) => void = () => {};
    const chartPromise = new Promise<{ samples: number[] }>(
      (resolve) => (resolveChart = resolve)
    );

    render(<Dashboard pagePromise={pagePromise} chartPromise={chartPromise} />);
    // Header resolves on the next tick; chart fallback is visible.
    await waitFor(() => expect(screen.getByText('Welcome')).toBeInTheDocument());
    expect(screen.getByRole('status')).toHaveTextContent('Loading chart');

    resolveChart({ samples: [1, 2, 3] });
    await waitFor(() => expect(screen.getByTestId('samples')).toHaveTextContent('3 samples'));
  });
});

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?