← Back to React overview

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

1. 41 Performance Optimization A practical guide to making React apps fast: memoization, virtualization, code splitting, the Profiler, and the patterns that actually matter in production. 9 min read →
2. 42 useRef Hook Learn how useRef works in React — DOM access, persisting values across renders, and common patterns that avoid unnecessary re-renders. 5 min read →
3. 43 Context vs Redux A practical comparison of React Context and Redux: rendering model, performance, devtools, and concrete heuristics for picking the right tool. 5 min read →
4. 44 Error Boundaries How to build resilient React apps with Error Boundaries: what they catch, what they miss, and how to design fallback UI that actually helps users. 5 min read →
5. 45 RHF Controlled Understand the difference between controlled and uncontrolled inputs in React, when to use each, and how to combine them with refs and form libraries. 4 min read →
6. 46 Key Prop Understand what the React key prop actually does, how it drives reconciliation, and why a bad key choice causes mysterious state and animation bugs. 4 min read →
7. 47 Memoization When memoization actually helps in React: the difference between React.memo, useMemo, and useCallback, and how to avoid memoizing for no reason. 5 min read →
8. 48 Modal Patterns Build accessible, composable modals and overlays in React using portals, focus traps, and headless primitives — with pitfalls around scroll lock, stacking, and a11y. 4 min read →
9. 49 Portals Learn how React portals work, when to use them, and how to build accessible modals that escape parent overflow and z-index traps. 4 min read →
10. 50 Render Props vs Hooks Compare render props and hooks as two ways to share reusable logic in React, with examples, mental models, and guidance on which pattern fits modern codebases. 4 min read →
11. 51 RSC Explained A practical guide to React Server Components: how they differ from client components, the rendering model, streaming, and when to reach for each. 5 min read →
12. 52 RSC vs Client Understand the boundary between Server and Client Components in React, when to use each, and how data, state, and bundles flow between them. 4 min read →
13. 53 XState in React Learn how XState brings finite state machines to React, eliminating impossible UI states with explicit transitions, guards, and a predictable mental model for complex flows. 4 min read →
14. 54 Colocation A practical guide to deciding where state belongs in a React app, with patterns for lifting, colocating, and splitting state for performance and clarity. 4 min read →
15. 55 Suspense How React Suspense works for data fetching: boundaries, the use() hook, streaming, and how to design loading states that do not feel janky. 5 min read →
16. 56 SuspenseList Coordinate multiple Suspense boundaries with SuspenseList to control reveal order and loading states, reducing layout shift and chaos during streamed data fetching. 4 min read →
17. 57 Tailwind Components Build a maintainable React component library on top of Tailwind CSS using variants, slots, and class merging — without losing the speed that made Tailwind appealing. 4 min read →
18. 58 RTL Practices Practical guidance for writing maintainable, user-focused tests with React Testing Library, including queries, async patterns, and smart mocking. 4 min read →
19. 59 Zustand vs Redux Compare Zustand, Redux Toolkit, and React Context for state management. Learn when each shines, their trade-offs, and how to pick the right tool. 4 min read →
20. 60 App vs Pages Router Compare the Next.js App Router and Pages Router: routing, data fetching, layouts, server components, and how to decide for new and existing projects. 5 min read →