React Debug Arena

Practise the reasoning behind the code.

Debug realistic React problems and explain your fixes. Prepare for technical interviews and strengthen your judgment when reviewing code, including AI-generated changes.

No account needed. Progress is saved in this browser.

What you’ll practise

In an interview, you need to explain how you reached a solution and defend its trade-offs. When reviewing a change at work, you need to judge whether it addresses the problem and what could still go wrong, whoever wrote it.

These scenarios exercise that reasoning: investigate unfamiliar code, challenge assumptions, verify behavior, and explain your decisions.

Each scenario has two steps. First you fix the bug yourself. Then you review a fix someone else wrote for the same bug and decide whether it really works, before the checks show you.

Work through each exercise without AI assistance so you can see which parts you understand independently and where you need more practice.

Topic
  • Search results go backwards

    A customer search sometimes shows results that do not match the text in the field. Reproduce it, find the cause, and make the smallest reliable fix.

    about 25 minasynceffectsstate

    Loading your progress…

  • Editing one row changes another

    Unsaved notes in a task list jump to the wrong task after sorting, filtering, or deleting. Find out why and keep each draft with its task.

    about 20 minrenderingstate

    Loading your progress…

  • An older failed save undoes a newer edit

    Task titles sometimes snap back to an old value even though the latest save went through. Find the cause and make the optimistic updates trustworthy.

    about 25 minasyncstate

    Loading your progress…