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

    Repair the Workspace Member Search

    Challenge workspace

    60-75 min
    Effects and data fetchingPath 20/33
    EffectsAsync dataForms

    Suggested first

    Repair the Team Directory FilterRepair the Support SLA Timer

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

    Repair the Workspace Member Search

    The support workspace uses this search before assigning an incident to a teammate. A previous implementation occasionally showed results for an earlier query, and users had no useful recovery path when the directory request failed.

    Requirements

    • Wait 300ms after typing before searching; do not issue a request for every keystroke.
    • Cancel the timer and ignore stale promises during effect cleanup.
    • Handle empty, loading, results, no-results, and failed-request states.
    • Clicking a result selects it and closes the list.
    • Keep the existing API.

    The query error makes the provided API reject so you can exercise the recovery state. “Try again” should retry the current query without losing the user’s input.

    What to explain in your review

    • Why does cleanup protect the rendered result even when the promise cannot be cancelled?
    • Which state is server data, which state is interaction state, and which values are derived?
    • How does selecting a result differ from editing the search query?

    Progressive hints

    1. Keep a request scoped to the effect that created it.
    2. A request can finish after a newer request; only the current effect may commit its result.
    3. Selecting a result should update the input and clear the result list.