Real-World React Challenges with TypeScript
Practice React and TypeScript in a coding environment built for real development. Write .tsx with proper TypeScript support, IntelliSense, autocomplete, and Vim mode.
Run your code when you’re ready, not on every keystroke. Press Ctrl/Cmd + S to run your solution and update the preview — just like your real development workflow.
Last challenges
Try a Free React Challenge
This is the real editor running a real challenge — jump in and try it, 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
useStateanduseRefin React. - Learn how
useRefcan store mutable values without causing rerenders. - Practice triggering and observing rerenders with
useState. - Gain clarity on when to use
useStatevsuseRefdepending on UI updates.
Tests
- increment state value on plus button click
- decrement state value on minus button click
- does not update ref value in DOM without re-render
- displays updated ref value after state re-render
Explore the platform
Challenges and katas inspired by real interview questions from companies like
Amazon
Google
Microsoft
Apple
OpenAI
Stripe
Uber
Tiktok
Atlassian
Meta
LinkedIn
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 64+ 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 64+ 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 64+ 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
Frequently Asked Questions
Need more JavaScript Practice?
Strengthen your JavaScript knowledge with JSExercises