ReactCHALLENGES

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

#59

GitHub Contribution Heatmap

30 min
30 min

Fetch contribution data for a GitHub-style heatmap using SWR. The grid and components are already built — your job is to wire up data fetching with loading skeletons, error handling, and year navigation to bring the heatmap to life.

ddd
useStatefetchingSWR
#60

Calendar

45 min
45 min

Implement a working month calendar in App.tsx — the calendar components are provided, so you focus on rendering the correct days, highlighting today, navigating between months, and handling leap years with plain JavaScript date math.

ddd
useStatedate
#61

Calendar Events

45 min
45 min

Reuse the calendar from the previous challenge and give it events — render events on their days, support multiple events per day, select a day to see its events, and add/delete events while keeping them intact across month navigation.

ddd
useStatedatestate management
Available on Aug 26, 2026
Explore more challenges

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

Fair prices

A small investment for your next React interview. You can't afford to fail.
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

Need more JavaScript Practice?
Strengthen your JavaScript knowledge with JSExercises
Try JSExercises