Use concurrent React features for responsive filtering

Interview framing: Concurrent features help prioritize urgent input updates over expensive rendering, but they do not replace profiling or data-size fixes.

Investigation:

• Profile typing to see whether the bottleneck is filtering, rendering rows, network requests, or layout.
• Check how many DOM nodes render and whether row props are stable.

Tools and fixes:

1. Debounce network search:

• Useful when every keystroke triggers an API request.
• Still handle cancellation and stale responses.

2. useTransition:

const [isPending, startTransition] = useTransition()

function onSearchChange(value: string) {
  setInput(value)
  startTransition(() => {
    setQuery(value)
  })
}

• Keeps the input update urgent.
• Marks the expensive list update as lower priority.

3. useDeferredValue:

• Lets the input display immediately while the list catches up to a deferred query.
• Good when derived rendering is expensive.

4. Memoization:

• Memoize expensive filtering or row components only after measuring.
• Stable props are required for memoized rows to help.

5. Virtualization:

• If thousands of rows are rendered, render only visible rows.

Good closing: "I would combine UX-level fixes with data-size fixes: keep typing responsive, cancel stale work, and avoid rendering more rows than the user can see."