New · FAANG interview set v2

React Coding
Challenges & Practice.

100+ problems for React interview practice, Get real tests

Stop watching tutorials. Solve production-grade React challenges — from state and hooks to memoization and reconciliation — validated by real test cases. No setup, no theory, no fluff.

Start practicing freeSee sample problems →
Counter.tsx
Passing
1import { useState } from 'react';
2
3export default function Counter() {
4 const [count, setCount] = useState(0);
5 return (
6 <button onClick={() => setCount(c => c + 1)}>
7 Count: {count}
8 </button>
9 );
10}
✓test('starts at 0')4ms
✓test('increments on click')9ms
2 passed · 0 failed
500+
React problems
Real
Test-case validation
0
Setup required
12
FAANG company tracks
01 · Library

Choose your path

Six curated tracks, each one mapped to the questions engineers actually face.

Hooks & State

20 pr

useEffect, useReducer, derived state, and lifecycle traps.

Beginner
12
Intermediate
6
Advanced
2
Sample problems
  • → Persistent tabs across reloads
  • → Race condition in async fetch
  • → Reducer for multi-step form

Custom Hooks

20 pr

Composable abstractions: debounce, intersection, media, fetch.

Beginner
9
Intermediate
8
Advanced
3
Sample problems
  • → useDebounce<T>(value, delay)
  • → useIntersectionObserver
  • → useEventListener typed

Performance

20 pr

Memoization, virtualization, and reconciliation behavior.

Beginner
4
Intermediate
9
Advanced
7
Sample problems
  • → Virtualize 10k-row table
  • → Stop wasteful re-renders
  • → Stable callback identities

Context & Patterns

17 pr

Compound components, slots, providers, render props.

Beginner
5
Intermediate
8
Advanced
4
Sample problems
  • → Tabs with compound API
  • → Theme provider with scopes
  • → Slot-based Card

Forms & Events

18 pr

Controlled inputs, validation, focus management, a11y.

Beginner
10
Intermediate
6
Advanced
2
Sample problems
  • → Field-level async validation
  • → Focus trap modal
  • → Multi-step wizard state

FAANG Interview Set

19 pr

Live-coded problems pulled from real onsite loops.

Beginner
1
Intermediate
4
Advanced
14
Sample problems
  • → Nested comment thread
  • → Typeahead with cancellation
  • → Drag-and-drop kanban
02 · Workflow

The loop is the product

01
Pick a problem

Filter by topic, difficulty, or company tag.

02
Write your solution

Real editor, real TypeScript, real React 19.

03
Run the tests

Vitest under the hood. Same harness as production.

04
Read the diff

Pass/fail per assertion, with expandable error traces.

03 · Inside the arena

A real editor. Real tests. Real diffs.

Monaco-grade code editor, a live component preview, and a Vitest panel that streams react challenges as you type.

042 ·useDebounce custom hookIntermediate
1import { useEffect, useState } from 'react';
2
3export function useDebounce<T>(value: T, delay = 300) {
4 const [debounced, setDebounced] = useState(value);
5
6 useEffect(() => {
7 const id = setTimeout(() => setDebounced(value), delay);
8 return () => clearTimeout(id);
9 }, [value, delay]);
10
11 return debounced;
12}
Preview · live● connected
raw: react fiber
debounced: react fiber
Test results
4 / 5 passing
  • ✓returns the initial value synchronously
  • ✓updates after the configured delay
  • ✓cancels pending updates on unmount
  • ✓respects a changing delay prop
  • ✕coalesces rapid updates into a single trailing value
Expected: "react"
Received: "rea"
  at tests.spec.ts:42
04 · Progression

A ladder, not a list

Each react coding challenge raises the bar — from primitive hooks to systems you'd actually ship.

BeginnerT1

Build the muscle memory.

  • → Counter with reset
  • → Toggle theme
  • → Controlled input
IntermediateT2

Compose real abstractions.

  • → useDebounce<T>
  • → Modal with focus trap
  • → Tabs compound API
AdvancedT3

Reason about renders.

  • → Virtualized table
  • → Optimistic updates
  • → Suspense data flow
FAANGT4

Onsite-grade systems.

  • → Nested comments
  • → Typeahead w/ cancellation
  • → Realtime kanban
05 · Pricing

Invest in your craft

One subscription. Every problem. Cancel anytime.

Free
$0/mo

Enough to know if this is for you.

  • ✓50 starter problems
  • ✓Pass/fail test feedback
  • ✓Community solutions
  • ✓Single-file editor
  • ✓React concepts, visualized
Pro
Interview-ready
$5/mo · or ₹299

Everything FAANG candidates ship with.

  • ✓500+ problems, every tier
  • ✓Company tags: Meta, Razorpay, Flipkart…
  • ✓AI hints that don't spoil the answer
  • ✓Editorial walkthroughs by senior eng
  • ✓Multi-file projects + custom tests
12,480
Problems solved this month
3,210
Engineers practicing weekly
4.8 / 5
Average problem rating
62%
Pro users land an interview