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

    Repair the Incident Controls

    Challenge workspace

    60-75 min
    Lists and formsPath 15/30
    State & eventsDerived stateLists

    Suggested first

    Repair a Drifting Order Summary

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

    Day 1 — Repair a drifting incident dashboard

    The incident count and the filtered list become unreliable after acknowledgement. Diagnose the bug rather than merely masking its symptoms.

    Requirements

    • Acknowledging an open incident must immediately update its row and disable its action.
    • The open count must always be derived from the current incidents; never maintain it as separate mutable state.
    • The open-only filter must update after an acknowledgement.
    • Do not mutate a state object or array in place.
    • The already acknowledged incident must remain disabled and must not make the count negative.

    Recommended checks

    1. Acknowledge INC-482: the count changes from 2 open to 1 open.
    2. Enable the open-only filter: only INC-481 remains.
    3. Disable the filter: all three incidents remain visible.

    Interview review

    • Which values are source state and which are derived state here?
    • Why can mutating an object and setting the same array cause an intermittent-looking UI bug?
    • When would you use a reducer instead of this local state shape?