DebugMidFrontendAuto-graded

Fix a React counter that increments unpredictably

Checks whether someone traces why a screen shows the wrong number and lands a small fix instead of a rewrite.A counter component that should go up by one jumps unpredictably instead. The cause is a stale closure — an interval capturing a value that has since moved on. Find it and fix it in place: rewriting the component from scratch is not the exercise, and the surrounding code is not the problem.

20 min

react, javascript

Start lab

You're done when

The counter increments by exactly one each tick, with no unpredictable jumps.
State updates use the functional form, so each update is based on the current value rather than a captured one.
No double increment occurs from a duplicated effect or listener.
The component is repaired rather than replaced.

What it measures

ReactUnderstanding how closures capture state across renders, and which update form escapes that capture.

Debugging and profilingLocating the single line responsible for erratic behaviour rather than rewriting until the symptom disappears.

Minimal correct changeFixing the actual defect in place, which is what a reviewer would ask for on a real pull request.

Your environment

Terminal + editorA full shell in the browser

Claude CodePre-authenticated, no key setup

Isolated microVMYours alone, wiped afterwards

Start this lab

20 min

Start labYou'll sign in to Anthropos to start. The lab opens in a private cloud workspace with Claude Code ready to use.

AI Labs is part of Anthropos Workforce. Not on your plan yet? Book a demo