Outlier · React skill test prep

Make your React
thinking visible.

Prepare for the moments that matter: turning a short prompt into a reliable UI, explaining your choices, and calmly improving working code under a clock.

Start the path ↓Try a timed challenge →

A practical preparation path

Build confidence one skill at a time.

Work through these sessions in order. Each one gives you a concrete signal that you are ready to move on.

  1. 01

    Refresh the React mental model

    45 min

    Be crisp on renders, state snapshots, effects, controlled inputs, keys, and when derived state is unnecessary.

    Ready when: Explain the why before you reach for code.
  2. 02

    Build common interaction patterns

    90 min

    Implement a counter, search/filter UI, form validation, tabs, and async loading states from a blank file.

    Ready when: Turn a prompt into small, testable components.
  3. 03

    Debug with intent

    45 min

    Practice finding stale closures, bad dependencies, mutation, missing keys, and state that belongs in a parent.

    Ready when: Narrate your diagnosis, not just the fix.
  4. 04

    Run a timed rehearsal

    60 min

    Choose one focused build, set a clock, then reserve the final ten minutes for edge cases and a code review.

    Ready when: Finish with working behavior and a clear explanation.

Today's deliberate practice

One prompt. One clean solution.

Use the challenge space as a rehearsal: write the plan, build the smallest complete version, and review it with fresh eyes.

Open a timed challenge →

On test day

A compact operating system.

  • Read the full prompt and name the smallest useful version first.
  • State your plan aloud: data, components, interactions, then edge cases.
  • Start simple; keep state local until a real shared-state need appears.
  • Test empty, loading, error, and rapid-interaction states before time is up.

React exercise library

Read it. Predict it. Build it.

Work through the source material already collected in this project. Every exercise has its own route, the original prompt, and a focused link into the official React documentation.

0 of 46 passedProgress is saved in this browser.

Console reasoning

Quizzes

30 exercises
01React re render 1Not taken02React re render 2 memoNot taken03What does the code snippet to the right output by console.log?Not taken04React re render 4Not taken05Automatic batching 1Not taken06React re render 5 contextNot taken07Suspense 1Not taken08Suspense 2Not taken09React re render 6 ContextNot taken10UseLayoutEffect()Not taken11What does the code snippet to the right output by console.log?Not taken12UseEffectNot taken13UseRefNot taken14Async event handlerNot taken15Memo 2Not taken16Event callbackNot taken17FlushSync()Not taken19Lazy initial stateNot taken20Error BoundaryNot taken21UseEffect() IINot taken22UseState()Not taken23Suspense 3Not taken24UseEffect() timingNot taken25All kinds of effectsNot taken26UseEffect() IIINot taken27UseEffect() timing IINot taken28UseEffect() timing IIINot taken29UseEffect() timing IVNot taken30Error Boundary Once MoreNot taken31UseRef IINot taken

Hands-on implementation

Questions

16 exercises
01The react counter appNot taken02UseTimeout()Not taken03UseIsFirstRender()Not taken04UseSWR() INot taken05UsePrevious()Not taken06UseHover()Not taken07UseToggle()Not taken08UseDebounce()Not taken09UseEffectOnce()Not taken10Phone number inputNot taken11UseFocus()Not taken12UseArray()Not taken13Prox state valtioNot taken14Implement useIsMounted()Not taken15UseClickOutside()Not taken16UseUpdateEffect()Not taken