← all languages

React

156 problems13 sections📅 2026 curriculum

Learn React by typing real components and hooks.

Build React fluency by typing the patterns you ship: functional components, useState and useEffect, custom hooks, context, and clean JSX. Every snippet is real component code, and an AI tutor walks each line — why an effect's dependency array matters, when a ref beats state — so the mental model and the keystrokes land together.

Progress0 / 156 solved · 0/13 sections

best wpm

0

avg wpm

0

accuracy

0%

runs

0

level

1

rating

1000

▶ Start / Continue See details & error analysis →

Run React on your machine

1. Install the toolchain

npm create vite@latest my-app -- --template react-ts

2. Save your code as App.tsx, then compile & run

cd my-app && npm install && npm run dev

Official install docs ↗

progress by section

1Fundamentals0/5start →

A component Props useState Rendering lists useEffect

2Components & JSX0/14start →

Returning an element Function component Self-closing tags className Fragment JSX with attributes Rendering a component Children prop Default vs named export Expressions in JSX Nesting components Typed props interface Conditional attributes Returning a list

3Props0/12start →

Destructuring props Typed props interface children as ReactNode Default prop values Optional props Readonly props Function props Prop drilling Key prop on lists Spreading props Render prop Discriminated-union props

4State0/15Unlock →

useState with a boolean useState with a number useState with a string Multiple state variables Resetting state Toggling a boolean useState with an array useState with an object Updating arrays immutably Controlled input state Derived state Functional updates Lazy initial state Updating objects immutably State with a typed union

5Effects0/12Unlock →

useEffect basics Dependency array Run on change Run once with []Cleanup function Syncing to props Timers with cleanup Effect vs event Why deps matter Subscribe and unsubscribe Debounce with a timeout Fetching data

6Lists & Rendering0/12Unlock →

Conditional with &&Rendering a list Conditional with ternary Early return Empty states Rendering object fields Showing and hiding Keys from ids List of components Rendering values safely Fragment in a list Nested lists

7Refs0/10Unlock →

Ref to a DOM node Focus an input Mutable value Scroll into view Uncontrolled input useRef vs useState Ref as a prop Interval id in a ref Measure an element Previous value

8Context0/12Unlock →

Consume with useContext Create a context Default value Avoiding prop drilling Theme context Nested providers Context plus useState Typed context Updating context A useTheme hook No built-in selector Split state and dispatch

9useReducer0/10Unlock →

useReducer counter Passing dispatch down Action creators Immutable updates Lazy initialization Todo list reducer Typed state and actions useReducer vs useState Reducer plus context Exhaustive never check

10Custom Hooks0/14Unlock →

useCounter useToggle Rules of hooks Tuple vs object return Composing hooks useDebounce usePrevious useWindowSize A generic hook useInterval useLocalStorage useMediaQuery useOnClickOutside useFetch

11Performance0/12Unlock →

When NOT to memoize useMemo dependency array Stable keys React.memo a component useMemo for derived values Avoid inline object props Profiling with <Profiler>Referential equality useCallback for stable callbacks List virtualization concept lazy plus Suspense memo plus useCallback

12Forms & Events0/14Unlock →

Controlled input Reset a form Submit with preventDefault Controlled textarea and select Controlled checkbox and radio Disable submit until valid Parse a number input Typed onChange event Form state as one object Validation and error message Uncontrolled with FormData One handler, many fields Debounced search input useActionState (React 19)

13Patterns0/14Unlock →

Children composition Conditional rendering List with empty state Lifting state up Container and presentational Controlled vs uncontrolled Custom-hook extraction Slot pattern via props Context provider pattern Render props Compound components Error boundary Higher-order component Prop getters