Skip to main content

Learning path

React learning path: everything to study, topic by topic

Comprehensive React assessment covering component fundamentals, hooks, advanced patterns, state management, performance optimization, and expert-level internals including concurrent features and server components.

Short answer

To learn React, work through 6 modules and 35 topics in the order they build on each other. It starts with Component Fundamentals, then moves on to Hooks & State and Advanced Patterns. Use the map as a checklist, or measure your level and study only what is missing.

6
modules
35
topics
45
min to assess

What you will study

Topics are grouped by module. Open one to see its objectives and key concepts.

1 · Component Fundamentals5 topics
  • JSX & Rendering

    JSX syntax, expressions in JSX, React.createElement, virtual DOM basics, rendering lifecycle

    Objectives

    • Write valid JSX
    • Understand the relationship between JSX and React.createElement

    Key concepts

    • JSX syntax
    • expressions in JSX
    • React.createElement
    • virtual DOM
    • ReactDOM.render
    • fragments
    • JSX vs HTML differences
  • Props & State

    Component props, prop types, default props, state basics, lifting state up, immutability

    Objectives

    • Differentiate props from state
    • Implement data flow between components

    Key concepts

    • props
    • prop types
    • default props
    • state
    • lifting state up
    • immutability
    • unidirectional data flow
    • children prop
  • Event Handling

    Synthetic events, event handlers, event binding, form events, event delegation in React

    Objectives

    • Handle user interactions correctly
    • Understand synthetic event system

    Key concepts

    • synthetic events
    • onClick
    • onChange
    • onSubmit
    • event.preventDefault()
    • event pooling
    • passing arguments to handlers
  • Conditional Rendering & Lists

    Conditional rendering patterns, list rendering with keys, key prop importance, fragment usage

    Objectives

    • Render content conditionally
    • Render lists with proper keys

    Key concepts

    • ternary in JSX
    • logical && operator
    • if/else patterns
    • Array.map()
    • key prop
    • index as key pitfalls
    • fragments
  • Styling in React

    CSS Modules, Tailwind CSS, styled-components, CSS-in-JS trade-offs, className patterns, and theme systems

    Objectives

    • Apply different styling strategies in React
    • Evaluate CSS-in-JS trade-offs

    Key concepts

    • CSS Modules
    • Tailwind CSS
    • styled-components
    • CSS-in-JS trade-offs
    • Shadcn/UI
    • className patterns
    • theme systems
    • responsive design in React
2 · Hooks & State4 topics
  • useState & useEffect

    State management with useState, side effects with useEffect, dependency arrays, cleanup functions

    Objectives

    • Manage component state with useState
    • Handle side effects correctly with useEffect

    Key concepts

    • useState
    • useEffect
    • dependency array
    • cleanup function
    • stale closures
    • functional updates
    • lazy initialization
  • useContext & useReducer

    Context API basics, useContext hook, useReducer for complex state, dispatch patterns

    Objectives

    • Share state via Context
    • Manage complex state with useReducer

    Key concepts

    • createContext
    • useContext
    • useReducer
    • dispatch
    • action types
    • reducer pattern
    • context + reducer combination
  • Custom Hooks

    Extracting reusable logic into custom hooks, hook composition, naming conventions, testing hooks

    Objectives

    • Extract reusable logic into custom hooks
    • Compose hooks effectively

    Key concepts

    • custom hook extraction
    • hook composition
    • use prefix convention
    • shared stateful logic
    • hook dependencies
    • returning tuples vs objects
  • useRef & DOM Manipulation

    useRef for DOM access and mutable values, forwardRef, useImperativeHandle, focus management

    Objectives

    • Access DOM elements with refs
    • Distinguish ref from state for mutable values

    Key concepts

    • useRef
    • ref.current
    • forwardRef
    • useImperativeHandle
    • DOM access
    • mutable ref values
    • ref vs state
3 · Advanced Patterns6 topics
  • Composition Patterns

    Component composition, children patterns, compound components, slots pattern, inversion of control

    Objectives

    • Design composable component APIs
    • Prefer composition over inheritance

    Key concepts

    • children prop
    • compound components
    • slots pattern
    • inversion of control
    • composition vs inheritance
    • specialization
    • containment
  • Render Props & HOCs

    Render prop pattern, higher-order components, pattern trade-offs, migration to hooks

    Objectives

    • Implement render props and HOCs
    • Know when hooks replace these patterns

    Key concepts

    • render props
    • higher-order components
    • withRouter/connect patterns
    • HOC pitfalls
    • displayName
    • hooks as replacement
  • Error Boundaries

    Error boundary components, componentDidCatch, getDerivedStateFromError, fallback UIs, error recovery

    Objectives

    • Implement error boundaries for graceful error handling
    • Know their limitations

    Key concepts

    • componentDidCatch
    • getDerivedStateFromError
    • fallback UI
    • error recovery
    • error boundary placement
    • limitations (async, events)
  • Code Splitting & Lazy Loading

    React.lazy, Suspense for code splitting, dynamic imports, route-based splitting, prefetching

    Objectives

    • Implement code splitting to reduce bundle size
    • Use Suspense for loading states

    Key concepts

    • React.lazy
    • Suspense
    • dynamic import()
    • route-based splitting
    • component-based splitting
    • prefetching
    • loading states
  • Routing

    Client-side routing with React Router v6, nested routes, dynamic segments, route loaders, and TanStack Router

    Objectives

    • Implement client-side routing with nested and dynamic routes
    • Choose between routing libraries

    Key concepts

    • React Router v6
    • createBrowserRouter
    • nested routes
    • dynamic segments
    • route loaders
    • Tanstack Router
    • navigation guards
    • URL parameters
  • Animation

    Framer Motion, AnimatePresence, CSS transitions in React, GSAP integration, layout animations, and performance

    Objectives

    • Implement animations with Framer Motion
    • Optimize animation performance in React

    Key concepts

    • Framer Motion
    • AnimatePresence
    • CSS transitions in React
    • GSAP with React
    • layout animations
    • gesture animations
    • spring physics
    • performance considerations
4 · State Management5 topics
  • Context API at Scale

    Context performance pitfalls, context splitting, provider composition, avoiding unnecessary re-renders

    Objectives

    • Scale Context API without performance degradation
    • Split contexts effectively

    Key concepts

    • context splitting
    • provider composition
    • value memoization
    • context selectors
    • re-render prevention
    • provider tree depth
  • Redux / Zustand

    Redux Toolkit, slices, selectors, middleware, Zustand stores, comparing approaches

    Objectives

    • Implement global state with Redux Toolkit or Zustand
    • Choose the right tool

    Key concepts

    • Redux Toolkit
    • createSlice
    • selectors
    • middleware
    • thunks
    • Zustand create
    • store subscriptions
    • immer
  • Server State (React Query / SWR)

    Data fetching with React Query/TanStack Query, SWR, caching, optimistic updates, invalidation

    Objectives

    • Manage server state with React Query/SWR
    • Implement cache invalidation strategies

    Key concepts

    • useQuery
    • useMutation
    • cache invalidation
    • optimistic updates
    • stale-while-revalidate
    • query keys
    • prefetching
    • infinite queries
  • Form State Management

    Controlled vs uncontrolled inputs, React Hook Form, Formik, validation, complex form patterns

    Objectives

    • Build complex forms with proper state management
    • Choose between form libraries

    Key concepts

    • controlled components
    • uncontrolled components
    • React Hook Form
    • Formik
    • validation
    • field arrays
    • form submission
    • error handling
  • Form Libraries

    React Hook Form, register and control, form validation with Zod/Yup, Formik basics, and field arrays

    Objectives

    • Build complex forms with React Hook Form
    • Integrate schema validation with Zod or Yup

    Key concepts

    • React Hook Form
    • register and control
    • form validation (Zod/Yup)
    • Formik basics
    • controlled vs uncontrolled
    • field arrays
    • form state management
    • server-side validation
5 · Performance & Testing4 topics
  • React Profiler & Optimization

    React DevTools Profiler, identifying re-renders, component optimization strategies, why-did-you-render

    Objectives

    • Profile React applications
    • Identify and fix unnecessary re-renders

    Key concepts

    • React Profiler
    • DevTools flamegraph
    • re-render identification
    • component splitting
    • state colocation
    • why-did-you-render
  • Memoization (memo / useMemo / useCallback)

    React.memo, useMemo, useCallback, when to memoize, memoization pitfalls

    Objectives

    • Apply memoization correctly
    • Avoid premature memoization

    Key concepts

    • React.memo
    • useMemo
    • useCallback
    • referential equality
    • dependency arrays
    • premature optimization
    • memo comparison function
  • Testing (RTL / Jest)

    React Testing Library, Jest, user-event, testing hooks, mocking, integration vs unit tests

    Objectives

    • Write tests following RTL best practices
    • Test user interactions not implementation

    Key concepts

    • render
    • screen
    • user-event
    • queries (getBy/findBy/queryBy)
    • waitFor
    • act()
    • mock functions
    • testing custom hooks
  • Accessibility

    ARIA roles, semantic HTML in React, keyboard navigation, screen reader support, a11y testing

    Objectives

    • Build accessible React components
    • Test for accessibility compliance

    Key concepts

    • ARIA roles
    • aria-label
    • semantic HTML
    • keyboard navigation
    • focus management
    • screen readers
    • axe-core
    • eslint-plugin-jsx-a11y
6 · Expert React11 topics
  • React Internals (Fiber / Reconciliation)

    Fiber architecture, reconciliation algorithm, virtual DOM diffing, commit phases, scheduler

    Objectives

    • Explain Fiber architecture
    • Understand reconciliation and diffing algorithms

    Key concepts

    • Fiber nodes
    • reconciliation
    • virtual DOM diffing
    • commit phase
    • render phase
    • work loop
    • priority lanes
    • scheduler
  • Concurrent Features (Suspense / Transitions)

    Concurrent rendering, useTransition, useDeferredValue, Suspense for data fetching, streaming SSR

    Objectives

    • Leverage concurrent features for better UX
    • Understand priority-based rendering

    Key concepts

    • concurrent rendering
    • useTransition
    • useDeferredValue
    • Suspense for data
    • streaming SSR
    • selective hydration
    • priority-based rendering
  • Server Components

    React Server Components, client vs server boundaries, 'use client'/'use server', streaming, RSC payload

    Objectives

    • Architect applications with Server Components
    • Understand the server/client boundary

    Key concepts

    • React Server Components
    • use client directive
    • use server directive
    • server/client boundary
    • RSC payload
    • streaming
    • zero-bundle-size components
  • Compiler & Build Optimization

    React Compiler (React Forget), automatic memoization, build optimization, bundle analysis, tree shaking

    Objectives

    • Understand React Compiler optimizations
    • Optimize build output for production

    Key concepts

    • React Compiler
    • automatic memoization
    • bundle analysis
    • tree shaking
    • dead code elimination
    • module federation
    • build optimization
  • Meta-Frameworks

    Next.js App Router, server actions, Remix loaders, Astro islands, file-based routing, and deployment strategies

    Objectives

    • Architect applications using React meta-frameworks
    • Compare framework trade-offs

    Key concepts

    • Next.js App Router
    • server actions
    • static vs dynamic rendering
    • Remix loaders
    • Astro islands
    • file-based routing
    • API routes
    • deployment strategies
  • Portals & Advanced Patterns

    createPortal, modal patterns, Suspense boundaries, startTransition, useDeferredValue, and concurrent patterns

    Objectives

    • Use portals for rendering outside the DOM hierarchy
    • Apply concurrent React patterns effectively

    Key concepts

    • createPortal
    • modal patterns
    • tooltip positioning
    • Suspense boundaries
    • startTransition
    • useDeferredValue
    • flushSync
    • concurrent patterns
  • React Compiler & Concurrent Features

    Understanding React 19's compiler, automatic memoization, concurrent features (useTransition, Suspense), and rendering model

    Objectives

    • Explain what the React Compiler does and when it correctly elides manual memoization
    • Identify tearing scenarios in concurrent rendering and apply appropriate mitigation strategies

    Key concepts

    • React Compiler
    • automatic memoization
    • useTransition
    • useDeferredValue
    • Suspense boundaries
    • concurrent rendering
    • tearing prevention
  • Advanced State Architecture

    Designing scalable React state architectures using Zustand, Jotai, Valtio, or atomic state patterns for complex applications

    Objectives

    • Design a state architecture that minimizes re-renders and scales across a large application
    • Evaluate atomic state libraries against Redux-style stores for a given problem shape

    Key concepts

    • atomic state
    • Zustand slices
    • Jotai atoms
    • Valtio proxy
    • state normalization
    • derived state
    • subscription optimization
    • state machines (XState)
  • React Performance Profiling at Scale

    Using React DevTools Profiler, useMemo/useCallback audit, virtualization strategies, and bundle analysis to eliminate React bottlenecks

    Objectives

    • Use React DevTools Profiler flame charts to identify costly render paths
    • Apply virtualization and memoization audit techniques to eliminate bottlenecks in large lists and complex trees

    Key concepts

    • React Profiler
    • flame charts
    • commit phases
    • memo audit
    • windowing (react-window)
    • bundle analysis
    • hydration performance
    • Interaction to Next Paint
  • Server Components & Streaming Architecture

    Building React Server Component architectures with streaming, partial hydration, and server/client composition patterns

    Objectives

    • Design a component tree that correctly places server/client boundaries to maximize RSC benefits
    • Implement streaming SSR with Suspense to progressively deliver content and improve TTFB

    Key concepts

    • React Server Components
    • 'use client' directive
    • streaming SSR
    • Suspense for data
    • partial hydration
    • client-server boundary
    • serialization constraints
  • React Native Cross-Platform Patterns

    Building cross-platform React Native applications: shared codebases, platform-specific optimizations, and native module bridges

    Objectives

    • Design a shared React Native codebase that handles platform-specific UI and behavior without forking logic
    • Explain the React Native New Architecture (JSI, Fabric, TurboModules) and its performance implications

    Key concepts

    • New Architecture (JSI)
    • Fabric renderer
    • TurboModules
    • platform-specific files
    • Hermes engine
    • CodePush
    • Expo managed vs bare workflow

Levels: Junior, Mid, Senior, and Expert

Explain it in your own words

Graded by AI · no account · 1 question

No options to guess from: you write, the AI grades against the topic's rubric and tells you what level your answer reads at.

0 / 600

Already studying React?

The assessment measures topic by topic, and your plan skips what you already know.

Measure my level

Open to read. An account is only needed to be measured.

Frequently asked questions

Where should I start studying React?

Start with Component Fundamentals: JSX & Rendering, Props & State, and Event Handling. The map orders topics by what they depend on, so each one prepares the next.

How long does a full React assessment take?

A full assessment of this path takes about 45 minutes. Study time depends on where you start; a diagnostic shows which topics you can skip.

Do I need an account to use this page?

No. The map, objectives and key concepts are open. You only need an account to be measured, get your gap by topic and receive a plan.