← Back to React overview

Hand-written tutorials, ordered as a recommended learning path.

1. 21 Compound Components Build flexible, composable React components using the compound components pattern with Context, implicit state sharing, and controlled inversion. 6 min read →
2. 22 Error Boundaries Production Production-grade Error Boundary patterns for React apps including granular placement, retry logic, error reporting, and integration with Suspense and routing. 6 min read →
3. 23 HOCs vs Hooks Compare Higher-Order Components and hooks in React with side-by-side examples, migration strategies, and guidance on when each pattern still makes sense. 6 min read →
4. 24 RSC Architecture Practical architecture patterns for React Server Components including composition strategies, data flow boundaries, and migration approaches for production apps. 7 min read →
5. 25 State Machines useReducer Implement finite state machines using only React's useReducer hook: explicit states, guarded transitions, and elimination of impossible UI states without libraries. 8 min read →
6. 26 Suspense Orchestration Master advanced React Suspense patterns including nested boundaries, SuspenseList coordination, transition integration, and skeleton architecture for complex UIs. 6 min read →
7. 27 RTL Advanced Advanced testing patterns with React Testing Library including custom render wrappers, async flows, portals, context-heavy components, and integration testing. 7 min read →
8. 28 useOptimistic Learn React's useOptimistic hook for optimistic UI updates: how it works, when to use it, rollback strategies, and real-world patterns with Server Actions. 6 min read →
9. 29 useTransition Advanced Go beyond basic useTransition usage with patterns for search, navigation, tab switching, and priority-based rendering in React concurrent mode. 6 min read →
10. 30 Reconciliation Internals Understand React's virtual DOM, the reconciliation algorithm, fiber architecture, key-based diffing, and how React decides what to update in the real DOM. 7 min read →
11. 31 React Compiler Understand how the React Compiler works, what automatic memoization means, and how it eliminates the need for useMemo, useCallback, and React.memo. 6 min read →
12. 32 Concurrent Features Master React's concurrent rendering features including useTransition, useDeferredValue, and strategies for keeping your UI responsive. 6 min read →
13. 33 Context Performance Solve React Context performance problems with provider splitting, value memoization, selector patterns, and smart composition strategies. 5 min read →
14. 34 Testing Custom Hooks Learn how to test custom React hooks using renderHook from React Testing Library, covering state, effects, async behavior, and context. 6 min read →
15. 35 Error Boundary Patterns Master error boundary patterns in React including granular boundaries, recovery strategies, logging, and the react-error-boundary library. 5 min read →
16. 36 Server Functions Learn how Server Functions with 'use server' let you call backend logic directly from React components without building API routes. 5 min read →
17. 37 Suspense & use() Hook Learn how to use React's Suspense boundaries and the use() hook to handle async data fetching with elegant loading and error states. 5 min read →
18. 38 useActionState Hook Learn how to use React's useActionState hook to manage form submissions, pending states, and server responses with clean, declarative code. 5 min read →
19. 39 List Virtualization Learn how to render thousands of items efficiently using react-window for list and grid virtualization in React applications. 5 min read →
20. 40 Zustand Guide Learn Zustand, the minimal React state management library with no boilerplate, built-in selectors, and a hook-based API. 6 min read →