React Coding Challenges

Show and Hide Details

#State Management

Counter Component

#State Management

Character Counter

#Forms and Inputs

Greeting Form

#Forms and Inputs

Live Search Filter

#Forms and Inputs

Todo List Manager

#State Management

Controlled Input Field

#Forms and Inputs#Forms#State Management

Render a List with Keys

#Render Prop Patterns#Component Patterns

Custom useToggle Hook

Change the Box Color

#Events#State Management

Event Delegation

Component Composition: Children and Slots

#Component Patterns

Refactor to Props

#Events#Component Patterns#State Management

Build a Reusable Input Component

#Component Composition

Build a Reusable Button Component

#Component Composition

Build a Reusable Drawer Component

#Component Composition

Image Carousel

#State Management#Component Composition

Progress Bar Component

#Component Composition#State Management#Forms and Inputs

Theme Switcher with CSS Variables

#State Management#Hooks

Checkbox Group

#Forms and Inputs

Reveal on Hover

Add Items to a List

#State Management

Remove Items from a List

#State Management

Lift State Up

#Component Patterns

Sync the Page Title

#Effect and Lifecycle

Fetch Data on Mount

#Effect and Lifecycle#Data Fetching

Memoize a Slow Calculation

#Hooks#Performance

Form Validation

#Forms and Inputs#Forms

Countdown Timer

#Effect and Lifecycle

Shopping Cart State

#State Management

useAsync Hook

#Hooks#Data Fetching

Render Props: Mouse Tracker

#Component Patterns#State Management

usePrevious Hook

Shopping Cart with useReducer

#State Management#Hooks

Paginated Data Fetching

Update Nested State

#State Management

Undo and Redo History

#State Management

Theme Context

#Context#State Management

Error Boundary with Fallback UI

#Error Handling

Handling API Errors

#Data Fetching#Error Handling

Cache Management

#Data Fetching#Performance

Focus an Input with a Ref

Share State with Context

#State Management#Context#Hooks

Dynamic Form Fields with Unique IDs

#State Management#Forms and Inputs

Multi-step Sign-up Form

#State Management#Component Patterns#Forms and Inputs

Controlled RadioGroup

#Component Composition

Build a Reusable Tabs Component

#Component Composition

Build a Tic-Tac-Toe Game

#State Management

Canvas Sketch Pad

#Component Composition#Events

Temperature Converter

#Forms and Inputs#State Management

Prevent Unnecessary Re-renders

#Performance#State Management

Build a Clock

#State Management#Effect and Lifecycle

Multiple Contexts

#State Management#Context

Persist State with useLocalStorage

Debounce a Search Input with useDebounce

Expose focus() and clear() Through a Ref

#Component Composition

Optimistic UI Update with Rollback

#State Management

Star Rating

#Component Composition

Multi-step Form with Branching Logic

#Forms and Inputs#State Management

useInterval Hook

Custom Hooks on a Shared Store

#Hooks#State Management#Context

Stable Callbacks for Memoized Rows

#Hooks#Performance#State Management

Connect Four Game

#Events#State Management

Fix the Data Fetching Race Condition

Modal Dialog with a Portal

#Component Composition

Infinite Scroll with IntersectionObserver

Fix a Laggy Search Filter

Compound Components: Accordion

#Component Patterns

Autocomplete / Typeahead Input

#Events#Forms and Inputs#Data Fetching