React Coding Challenges

Practice building real React components. 15 challenges across easy, medium, and hard difficulty levels.

Easy

5
easy 10m

Build a Counter

A counter with increment, decrement, and reset

useStateevent handling
easy 10m

Build a Toggle

A toggle switch with ON/OFF states

useStateconditional rendering
easy 12m

Build a Character Counter

Textarea with live character count and limit

useStatecontrolled inputsderived state
easy 15m

Build an Accordion

Expandable sections with single-open behavior

useStateconditional renderinglists
easy 12m

Build Tabs

Tabbed interface with content switching

useStateevent handlingconditional rendering

Medium

5
medium 20m

Build a Todo List

Add, complete, and delete todo items

useStatearray stateformsevent handling
medium 20m

Build a Debounced Search

Search input with 300ms debounce delay

useStateuseEffectdebouncingcleanup
medium 25m

Build Infinite Scroll

Load more items on scroll with pagination

useStateuseEffectuseRefscroll eventspagination
medium 20m

Build a Modal

Accessible modal with backdrop and keyboard support

useStateuseEffectevent listenersportals
medium 25m

Build Form Validation

Registration form with real-time validation

useStateformsvalidationderived state

Hard

5
hard 35m

Build a Data Table

Sortable, filterable, paginated data table

useStateuseMemosortingfilteringpagination
hard 30m

Build Drag and Drop

Reorderable list with drag-and-drop

useStateuseRefdrag eventsarray reordering
hard 35m

Build a Virtualized List

Render only visible items from 10,000 rows

useStateuseRefuseCallbackscroll mathperformance
hard 35m

Build Undo/Redo

History stack with undo/redo for a drawing app

useReducerstate machinesimmutable updateskeyboard shortcuts
hard 35m

Build a Real-Time Chat

Chat UI with simulated real-time messages

useStateuseEffectuseRefscroll managementtimers