Master React Through Real-World Challenges

Write React and TypeScript in a full Monaco editor with IntelliSense, autocomplete, and optional Vim mode.

Run your code against a real Node + Jest server — the same setup you’d face in production and technical interviews.

Last challenges

#52
30min

Use optimistic

Learn React's useOptimistic hook by building instant heart toggles that update the UI before the server responds — and revert automatically when requests fail.

ddd
useOptimisticstartTransitionreact 19
#53
20min

Best practices

In a technical interview, solving the logic is only half the battle — reviewers also judge your code's quality. A todo list that works perfectly can still hide anti-patterns like derived state in effects, impure renders, or eager initializers that degrade performance. This challenge is different: instead of just checking that your code passes tests, the platform also runs ESLint with React best-practice rules and surfaces every violation. Fix the 3 lint warnings to prove you don't just make it work — you make it right.

ddd
useStateuseEffectESLintbest practices
#54
90min

Spreadsheet

Build a spreadsheet with real-time formula evaluation — a great exercise to practice custom state management, two-way cell bindings, and reusable table components.

ddd
useStateuseEffectcustomHook

Try a Free React Challenge

Try a real challenge right in your browser. Write code with TypeScript and IntelliSense, run tests on a live Node + Jest server, and see your solution validated instantly — no setup required.

The workspace is designed for desktop. For the best experience, please switch to a larger screen.

Overview

Learn the difference between useState and useRef by creating two counters and observing how state and refs affect component rendering.

Requirements

  • Create two counters: counter state and counter ref, each with increment and decrement buttons.
  • The counter state should update and reflect its value in the UI when incremented or decremented.
  • The counter ref should update its value when incremented or decremented without triggering a UI update.
  • After triggering a rerender with the counter state, the counter ref should show its updated value.

Notes

  • Understand the difference between useState and useRef in React.
  • Learn how useRef can store mutable values without causing rerenders.
  • Practice triggering and observing rerenders with useState.
  • Gain clarity on when to use useState vs useRef depending on UI updates.

Tests

  1. increment state value on plus button click
  2. decrement state value on minus button click
  3. does not update ref value in DOM without re-render
  4. displays updated ref value after state re-render

Simple, transparent pricing

Limited-time offer: enjoy reduced pricing while there are fewer than 100 challenges!
monthly plan
$9/month
Billed monthly
  • 1Full access to 50+ challenges across all levels
  • 2New challenges added every week
  • 3Exclusive advanced topics: Redux, React 19, compound components
  • 4View solutions and learn from working code
annual plan
$5/month
Billed $60yearly
save 44%!
  • 1Full access to 50+ challenges across all levels
  • 2New challenges added every week
  • 3Exclusive advanced topics: Redux, React 19, compound components
  • 4View solutions and learn from working code
quarterly plan
$7/month
Billed $21quarterly
save 22%!
  • 1Full access to 50+ challenges across all levels
  • 2New challenges added every week
  • 3Exclusive advanced topics: Redux, React 19, compound components
  • 4View solutions and learn from working code
FREE
  • 1Start solving free coding challenges
  • 2All challenges include TypeScript and pre-styled layouts
  • 3Code editor with optional Vim mode
  • 4Run and test your code instantly in the browser
Get Started

Frequently Asked Questions