Index
All topics
Every tip and best-practice guide, grouped the way the menu is. Filter by keyword or group, and pick up anything marked in progress.
Getting Started1
Topics31
- Project StandardsReact project standards: folder structure, feature boundaries, naming, component layout, ESLint and Prettier, pre-commit hooks, CI and docs.15 min read
- Maintainable ArchitectureSeparate UI, state, services and converters in React features: paths for god components, API churn, feature folders and wrong dependencies.8 min read
- Large Project StructureHow to structure a large React project with feature folders, clear boundaries, and import rules that stay maintainable as the team grows.2 min read
- Accessibility & SemanticsBuild accessible React apps with semantic HTML: landmarks, headings, buttons, forms, alt text, ARIA, focus management and accessibility testing.13 min read
- Styling & UI LibrariesChoose a React styling stack: Tailwind, CSS Modules, tokens, headless UI, component kits and icons, with pickers for goals and needs.4 min read
- Ecosystem & npm librariesBest React libraries for forms, data fetching, testing, and UI: a 2026 baseline stack plus need-based matching.7 min read
- Books & ReadingCurated React and software engineering books, courses and docs, with reading paths, problem matching and advice for applying what you read.6 min read
- Proficiency with HooksMaster React Hooks with study paths, symptom matching, mental models, and a practical FAQ for useState, useEffect, memoization and custom hooks.25 min read
- State Management FundamentalsChoose where React state should live: local UI state, Context, reducers, server caches, and external stores, with decision paths for production apps.20 min read
- Where Should State Live?Decide where React state should live: local UI state, lifted state, Context, reducers, server caches, or an external store.2 min read
- Context vs ZustandCompare React Context and Zustand: when Context is enough, when a store reduces re-renders, and how to choose for production apps.2 min read
- State Management Anti-PatternsAvoid the derived state anti-pattern in React: when to compute values during render, when to use useMemo, and when to store state.5 min read
- Loading, Error, Empty StatesPractical React patterns for loading, error, and empty UI states so users always know what is happening and what to do next.1 min read
- React Forms & ValidationReact forms with practical validation: controlled inputs, inline errors, accessibility, and when to validate on the client vs the server.2 min read
- Data Fetching & CachingSoonIn progress. This guide is being written.
- AI with React Best PracticesSoonIn progress. This guide is being written.
- React Rendering StrategiesChoose React rendering strategies for each route: CSR, SSR, SSG, ISR, and Server Components, with practical defaults.5 min read
- SSR, SSG, ISR, or CSR?Decide when to use SSR, SSG, ISR, or CSR in React and Next.js apps, with a practical table and checklist tied to product constraints.2 min read
- Server vs Client ComponentsReact Server Components vs Client Components: what runs where, when to add "use client", and how to keep bundles small.2 min read
- How React Renders on the ServerWhat React does on the server: the Fizz and Flight renderers, the RSC payload, what "use client" really means, and how Suspense streams HTML.11 min read
- Update Content Without RedeployingWhy a content edit can need a redeploy in React and Next.js, and how SSR, ISR, revalidation and cache invalidation let content change without one.19 min read
- Performance & OptimizationReact performance hub for production apps: separate load vs runtime, pick LCP or INP, then open bundle, waterfall, re-render, or JS deep dives.6 min read
- Why Parent State Re-renders ChildrenWhy a Parent state update can re-render a Child even when its props are unchanged: Render Phase, Fiber, reconciliation, bailout, and Commit Phase.8 min read
- Stop Unnecessary Re-rendersStop costly React re-renders: paths for context blast and unstable props, symptom matching, memo rules and when not to optimize.3 min read
- Eliminating Async WaterfallsEliminate React async waterfalls: parallel awaits, N+1 fixes, route-level fetching, path and smell matchers.4 min read
- Bundle Size OptimizationMeasure and shrink the JavaScript your React app ships: code splitting, tree shaking, lighter libraries, Server Components, third-party scripts and budgets.11 min read
- Deployments & ChunkLoadErrorWhy open tabs can crash with a ChunkLoadError after a React deployment, why refreshing fixes it, and how to deploy so existing users keep working.14 min read
- JavaScript Performance PatternsJavaScript performance patterns in React: combine loops, lazy init, stable selectors, cut render allocations, with path and cost matchers.4 min read
- NX Introduction & ArchitectureNx monorepo paths for greenfield, migration, slow CI and boundaries: thin apps, library types, affected builds and module rules.4 min read
- Automated TestingVitest and React Testing Library as the React default, with Playwright for critical E2E, plus strategy paths and smell matching for brittle suites.7 min read
- Next.js SEO ChecklistNext.js SEO checklist: titles, descriptions, canonicals, Open Graph, sitemap, robots, and JSON-LD for App Router and Pages Router.2 min read
React Frameworks5
- Frameworks & Build ToolsReact frameworks compared: Next.js, Remix, Vite, Astro, Expo, and Nx, with paths for SEO sites, SPAs, and monorepos.4 min read
- React NativeSoonIn progress. This guide is being written.
- Next.jsNext.js basics for React teams: why people choose it, where to learn it, and curated resources for going deeper.2 min read
- RemixSoonIn progress. This guide is being written.
- Alternate React StacksSoonIn progress. This guide is being written.