Practice React Coding Challenges to Pass Your Interview
Interviewers test what you can build, not just what you know. Practice real React and TypeScript coding challenges — hooks, forms, data fetching, and component architecture — with a full code editor, real test cases, and instant feedback.
- No credit card required
- Real TypeScript runtime
- Server-side test runner
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
Not another code box. A real IDE.
A workspace that behaves like your editor.
| Most platforms | ReactChallenges | |
|---|---|---|
| Preview updates | Updates on every keystroke — the preview breaks while you are mid-line or on an unclosed tag. | Updates only on Ctrl+S, exactly like VS Code. Type freely, save when you are ready. |
| Editor engine | CodeMirror — the code box most platforms get by default from the preview runtime. | Monaco — the same editor engine behind VS Code, with familiar keybindings and layout. |
| TypeScript | No TypeScript worker, so no type checking, autocomplete, or IntelliSense. | A real TypeScript worker: live type checking, autocomplete, and IntelliSense right in the editor. |
| TSX highlighting | Editors that do add TypeScript (via Monaco) often highlight TSX incorrectly — tags, generics, and type syntax break. | Correct TSX highlighting: tags, generics, and type-aware syntax, all rendered accurately. |
| Vim mode | No Vim mode — you are stuck with the default editor keybindings. | Optional Vim mode: toggle it on and edit with real Vim motions, like in your terminal. |
We get it — TypeScript looks weird and everything is way easier without it. But JavaScript is dynamically typed: no matter how good you think you are, the types will catch you.
And every company asks for TypeScript. So if you want to do this for a living, there is no way around it — you are just going to have to force yourself to learn it.
And no, this is not a React course. Learn the fundamentals in the official docs at react.dev/learn.
Then come to ReactChallenges to repeat them until they stick. Every challenge is a rep — do it enough times and the patterns will be burned into your brain for good.
Last UI Challenges
Put Your React UI Skills to the Test
OTP Input
Build a one-time-password (OTP) input with six single-digit fields that auto-advance focus as you type, support pasting a full code, and validate it against a demo code.
dddEverything You Need to Master React Interviews
From JavaScript fundamentals to real-world React applications and architecture
Fair prices
A small investment for your next React interview, one you can't afford to fail.
- Start solving 18 free challenges and 42 free katas
- Free quiz questions to test your React knowledge
- Free playground with React, TypeScript and Tailwind
- All challenges include TypeScript and pre-styled layouts
- Code editor with optional Vim mode
- Automated tests with instant feedback
- Full access to 67 UI challenges across all levels
- Full access to 95 katas across all levels
- Full access to 675 quiz questions
- Unlimited quizzes
- New challenges added every week
- Full access to 67 UI challenges across all levels
- Full access to 95 katas across all levels
- Full access to 675 quiz questions
- Unlimited quizzes
- New challenges added every week
- Full access to 67 UI challenges across all levels
- Full access to 95 katas across all levels
- Full access to 675 quiz questions
- Unlimited quizzes
- New challenges added every week
Challenges and katas inspired by real interview questions from companies like
Frequently Asked Questions
Still have questions? Contact us