React Coding Challenges

Counter Component

#State Management

Live Search Filter

#Forms and Inputs

Star Rating

#Component Composition

Todo List Manager

#State Management

Debounce a Search Input with useDebounce

Fix the Data Fetching Race Condition

Event Handling

#State Management#Events

Refactor to Props

#Component Patterns#Events#State Management

Build a Reusable Button Component

#Component Composition

Build a Clock

#Effect and Lifecycle#State Management

Image Carousel

#State Management#Component Composition

Data Fetching with useEffect

#Effect and Lifecycle

Dynamic List Rendering

#Component Patterns#Render Prop Patterns

Controlled Input Field

#Forms and Inputs#Forms#State Management

Custom useToggle Hook

useInterval Hook

Component Composition

#Component Patterns

Focus an Input with useRef

Build a Reusable Input Component

#Component Composition

Temperature Converter

#Forms and Inputs#State Management

Progress Bar Component

#Component Composition#State Management#Forms and Inputs

Checkbox Group

#Forms and Inputs

Shopping Cart State

#State Management

usePrevious Hook

Pagination Implementation

Nested State Manager

#State Management

State History Manager

#State Management

Theme Context

#Context#State Management

Fallback UI

#Error Handling

Multiple Contexts

#Context#State Management

Build a Reusable Drawer Component

#Component Composition

RadioGroup Component

#Component Composition

Build a Reusable Tabs Component

#Component Composition

Build a Tic-Tac-Toe Game

#State Management

Basic Art Drawing Tool

#Component Composition#Events

Persist State with useLocalStorage

Memoizing Expensive Calculation

#Hooks#Performance

Form Validation

#Forms and Inputs#Forms

Timer Controls

#Effect and Lifecycle

Advanced Theme Manager

#State Management#Hooks

useAsync Hook

#Hooks#Data Fetching

MouseTracker

#Component Patterns#State Management

useReducer Implementation

#State Management#Hooks

Event Delegation

Handling API Errors

#Data Fetching#Error Handling

Cache Management

#Data Fetching#Performance

Share State with Context

#Hooks#Context#State Management

Multi-step Form with Persistent State

#State Management#Forms and Inputs#Component Patterns

Performance Monitoring

#Performance#State Management

Modal Dialog with a Portal

#Component Composition

Expose Methods with forwardRef and useImperativeHandle

#Component Composition

Infinite Scroll with IntersectionObserver

Responsive Filtering with useDeferredValue

Optimistic UI Update with Rollback

#State Management

Multi-step Form with Branching Logic

#State Management#Forms and Inputs

Prevent Unnecessary Re-renders with useCallback

#Hooks#Performance#State Management

Dynamic Form Fields with Unique IDs and Submit

#Forms and Inputs#State Management

Connect Four Game

#State Management#Events

Autocomplete / Typeahead Input

#Forms and Inputs

Compound Components: Accordion

#Component Patterns

Advanced Custom Hooks (Very Hard)

#Hooks#State Management