Codstak
    • Home
    • DSA
    • JavaScript
    • TypeScript
    • Node.js
    • React
    • More↓
      BlogReact PrepPricingDiscordNewsletterLeaderboard
    React challenge/hard

    Make Customer Search Race-Safe

    Challenge workspace

    90-110 min
    Effects and data fetchingPath 18/30
    EffectsAsync dataState & events

    Suggested first

    Repair the Workspace Member Search

    Your workspace must pass its server-side browser checks to complete this challenge.

    Day 4 — Make search safe under async races

    The directory API is intentionally uneven: a broad query can resolve after a more specific one. Make the UI correct when requests are cancelled, fail, return no data, or complete out of order.

    Requirements

    • Do not display results from an outdated search.
    • Abort superseded requests and avoid setting state after abort/unmount.
    • Show loading, error, empty, and results states.
    • Empty or whitespace-only search should not call the API or display stale results.
    • Keep the API boundary separate from the view.

    Interview review

    • Why is request cancellation useful even when you have a stale-result guard?
    • What state should be retained while a new query is loading?
    • Where would caching and debouncing belong if this became a shared feature?