How much React do you already have?

• ○Project setup & JSXcoming soon

  Setting up a project with Vite (or Create React App) · JSX syntax, expressions, and rules (single parent, className, self-closing tags)

• ○Components & compositioncoming soon

  Function components, composition, and file structure

• ○Propscoming soon

  Passing data, destructuring, children, default values

• ○State with useStatecoming soon

  State with useState

• ○Events & conditional renderingcoming soon

  Event handling (onClick, onChange, synthetic events) · Conditional rendering (ternary, &&, early return)

• ○Lists with .map() and keyscoming soon

  Lists with .map() and the key prop

• ○Controlled formscoming soon

  Controlled forms and inputs

• ○useEffect basicscoming soon

  useEffect basics — fetching data, dependency array, cleanup

• ○Lifting state up & basic stylingcoming soon

  Lifting state up and passing callbacks down · Basic styling: CSS modules, inline styles, Tailwind

✅ Checkpoint: you can build a small app (forms, a list, a fetch call) from a blank Vite project without copying a tutorial.

• ○useRefcoming soon

  useRef — DOM access and mutable values that don't trigger re-renders

• ○Context APIcoming soon

  useContext + Context API for cross-tree state

• ○useReducercoming soon

  useReducer for complex state transitions

• ○Custom hookscoming soon

  Custom hooks and the rules of hooks

• ○Effects in depthcoming soon

  Component lifecycle in the hooks mental model; effect timing and stale closures

• ○React Routercoming soon

  React Router: routes, nested routes, params, navigation, protected routes

• ○State architecturecoming soon

  Lifting vs. colocating state; prop drilling and how to avoid it

• ○Memoisationcoming soon

  Memoization: useMemo, useCallback, React.memo, and when not to use them

• ○Error boundaries, portals & keys in depthcoming soon

  Error boundaries · Portals · Fragments and keys in depth (reconciliation basics)

• ○Data fetching patternscoming soon

  Data fetching patterns: loading/error states, abort controllers, race conditions

• ○Forms at scalecoming soon

  Forms at scale — React Hook Form or Formik, plus validation (Zod/Yup)

• ○State management librariescoming soon

  State management libraries — Zustand, Redux Toolkit, or Jotai

• ○Server state with TanStack Querycoming soon

  Server state — TanStack Query (caching, invalidation, optimistic updates)

• ○Testing Reactcoming soon

  Testing: React Testing Library, Vitest/Jest, user-event

• ○TypeScript with Reactcoming soon

  TypeScript with React: typing props, hooks, generics in components

✅ Checkpoint: you can build a routed, tested app with a real data-fetching library and explain every re-render in it.

• ○Reconciliation & Fibercoming soon

  Reconciliation and the Fiber architecture; how re-renders actually propagate

• ○Concurrent featurescoming soon

  Concurrent features: useTransition, useDeferredValue, startTransition

• ○Suspense & code splittingcoming soon

  Suspense for data fetching and code splitting (React.lazy)

• ○Server Componentscoming soon

  Server Components vs. Client Components (RSC boundary, "use client")

• ○Server Actionscoming soon

  Server Actions and useActionState / useFormStatus / useOptimistic

• ○The use() hookcoming soon

  use() hook for promises and context

• ○Rendering strategiescoming soon

  SSR, SSG, ISR, streaming, and hydration (typically via Next.js or Remix)

• ○Effect timingcoming soon

  useLayoutEffect vs. useEffect, and useInsertionEffect

• ○useSyncExternalStorecoming soon

  useSyncExternalStore for external store subscriptions

• ○Refs in depthcoming soon

  useImperativeHandle and forwardRef (note: ref-as-prop in React 19)

• ○Advanced component patternscoming soon

  Advanced patterns: compound components, render props, headless components, controlled/uncontrolled hybrids, provider composition

• ○Performance workcoming soon

  Performance work: profiling with React DevTools, virtualization (TanStack Virtual), bundle analysis, avoiding unnecessary renders · Code splitting and lazy loading strategies

• ○Accessibilitycoming soon

  Accessibility: focus management, ARIA, keyboard navigation

• ○Design systemscoming soon

  Building a design system / component library

• ○Advanced TypeScript with Reactcoming soon

  Advanced TypeScript: polymorphic components, discriminated union props, generic constrained components

• ○Architecture at scalecoming soon

  Monorepos, module federation, micro-frontends

• ○Custom rendererscoming soon

  Writing custom renderers or understanding react-reconciler (rare, but the deepest layer)

✅ Checkpoint: you can profile a slow tree in React DevTools, explain the client/server component boundary, and defend a component-library API with tradeoffs.