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
Everything 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