React
React Native
Node.js
Python
Rust
PostgreSQL
Solana
Claude
AI Agents
Go
Containers
AWS SDKs

React SME Cookbook

Sections

React

React Basics Component Decision Workflow JSX and TSX Components Function Component Syntax Variations Conditional Rendering Lists and Keys Event Handling Forms Refs React Fundamentals Best Practices Highlights Summary

JSX and Elements Components and Props State with useState Effects and Side Effects Refs and DOM Access Context and Composition Lists Keys and Conditionals Forms and Controlled Inputs Custom Hooks Patterns Performance Idioms React 19 APIs TypeScript with React

React Hooks Basics Custom Hooks useEffect Hook useState Hook useContext Hook useReducer Hook useMemo Hook useCallback Hook useRef Hook useId Hook useTransition Hook useDeferredValue Hook useActionState Hook useOptimistic Hook use Hook React Hooks Best Practices Highlights Summary

Custom Hooks: Step-by-Step Guide useDebounce useThrottle useScrollToTop useLocalStorage useMediaQuery useClickOutside useCopyToClipboard useIntersectionObserver useWindowSize useKeyboardShortcut useToggle usePrevious useFetch useInterval useEventListener Highlights Summary

React Patterns Basics Composition Over Inheritance Render Props Higher-Order Components Compound Components Controlled vs Uncontrolled Components State Machines for UI Logic Error Boundaries React Portals Suspense Boundaries Context Patterns React Performance Optimization React Patterns Best Practices Highlights Summary

What's New in React 19 Server Components Server Actions Form Actions use() Hook useOptimistic Ref as Prop Document Metadata Asset Loading React Compiler React 19 Best Practices Highlights Summary

50 React & Next.js Rules 40 Next.js Rules 30 API Rules for Next.js 30 React UX Rules Problem/Solution React & Next.js Architecture Decisions Highlights Summary

React Architecture Decision Checklist React Architecture Gotchas & Common Mistakes React & TypeScript Refactoring Decisions UI Refactor Checklist New React App Audit Checklist React App Red Flags Audit React Audit Quick Glance React & Next.js Architecture Best Practices Migrating a Legacy App to React + Next.js Next.js + React Production Audit Checklist Code-Content Separation Checklist Highlights Summary

Component Choice Workflow Button Modal Card Accordion Tabs Toast Dropdown Tooltip Input Avatar Badge Skeleton Sidebar Breadcrumb Pagination Textarea Select Checkbox Radio Group Switch Label Slider Toggle Group Separator AspectRatio ScrollArea Popover Alert Code Group (Multi-Runtime Tabs)Highlights Summary

React Events Basics Mouse Events Keyboard Events Form Events Focus Events Clipboard Events Drag & Drop Events Touch Events Scroll Events Pointer Events Media & Animation Events React Events Best Practices Highlights Summary

Performance Basics Preventing Unnecessary Re-renders useMemo, useCallback & React.memo React Compiler (React Forget)React DevTools Profiler Detecting & Fixing Memory Leaks Bundle Size Optimization Server Component Performance Suspense & Streaming Performance Image & Font Performance Core Web Vitals Optimization State Management Performance Data Fetching Performance Next.js Caching Deep Dive Performance Audit Checklist Performance Best Practices Highlights Summary

TypeScript + React Basics TypeScript Basics for React Typing Props Typing State Typing Events Typing Refs Typing Context Generics in React Discriminated Unions Utility Types for React Typing API Responses Typing Server Components Typing Route Handlers Strict Mode Patterns Type Narrowing Declaration Files Regular Expressions Reference TypeScript + React Best Practices Highlights Summary

Forms & State

Decision Checklist Forms & Validation Basics Field Logic Discovery Checklist Controlled vs Uncontrolled Inputs Zod Basics Zod Types Zod Transforms Zod Infer React Hook Form RHF + Zod Server Action Forms Form Patterns Basic Form Patterns Complex Form Patterns File Upload Form Error Display shadcn Form Optimistic Forms Form Accessibility useReducer Multi-Step Forms Highlights Summary

SWR Setup and Configuration Basic Data Fetching with SWR Conditional and Dependent Fetching Mutations and Optimistic Updates Pagination with SWR Revalidation Strategies Caching Strategies Error Handling SWR with React Suspense TypeScript with SWR SWR with React Server Components SWR Middleware Highlights Summary

Zustand Setup and Basic Usage Store Design Patterns Selectors and Performance Async Actions Slice Pattern Zustand Middleware Persist Middleware Immer Middleware TypeScript with Zustand Context vs Zustand Zustand with Next.js Testing Zustand Stores Redux DevTools Integration Highlights Summary

Next.js

Basic Next.js Setup Next.js + Tailwind v4 + shadcn/ui create-next-app CLI Flags Next.js + Prisma + PostgreSQL Next.js + Auth.js v5 Next.js + MDX Documentation Site Next.js in a Turborepo Monorepo Next.js SaaS Starter Deploy Next.js on EC2 / Standalone Server Deploy Next.js on ECS / EKS (Containers)Next.js Setup Best Practices Highlights Summary

App Router Basics Layouts Dynamic Routes Route Groups Loading & Error Handling Middleware Intercepting Routes Parallel Routes Navigation Next.js Routing Best Practices Highlights Summary

Next.js Data Basics Data Fetching in Server Components Server Actions Revalidation Streaming & Suspense Caching Search Params Cookies & Headers Parallel Promises & Promise.all Async Generators & Iterators Centralized Fetch Utility with SWR Centralized Fetch Utility with Axios Next.js Data Best Practices Highlights Summary

Server Components Client Components Composition Patterns Static vs Dynamic Rendering Partial Prerendering (PPR)Image Optimization Font Optimization Next.js Rendering Best Practices Highlights Summary

Authentication Patterns API Route Handlers Environment Variables Error Handling Testing Next.js Apps Deployment SEO and Metadata Internationalization (i18n)Next.js Patterns Best Practices Highlights Summary

Libraries & APIs

Vercel AI SDK Prisma ORM dnd-kit Drag and Drop AWS SDK S3 AWS SDK Lambda AWS SDK Polly Lodash Utilities date-fns Date Manipulation TanStack Query (React Query)NextAuth.js / Auth.js v5 React Libraries Best Practices Highlights Summary

postMessage Fundamentals Intermediate postMessage Patterns Advanced postMessage Patterns postMessage Security Highlights Summary

Getting Started with Stripe Stripe Checkout Sessions Payment Intents (Custom Payment Flow)Payment Element & Card Element Subscriptions Stripe Webhooks Customer Portal Stripe React Hooks Stripe with Server Actions Building a Pricing Page Error Handling & Edge Cases Testing Stripe Integration Highlights Summary

Styling & UI

Tailwind CSS v4 Setup Tailwind Examples Tailwind Utilities Grid Examples Responsive Design Dark Mode Animations Custom Utilities Tailwind Colors Highlights Summary

shadcn/ui Setup Button Dialog Form Data Table Command Toast Sidebar Highlights Summary

Lucide React Icons React Icons Heroicons Next.js Image Optimization Unsplash API Pixabay API Pexels API Custom SVG Icons in React Image Placeholders & Loading Favicons & OG Images Images & Icons Best Practices Highlights Summary

Testing & Quality

Vitest Setup with Next.js Jest Setup with Next.js React Testing Library Fundamentals Testing React Components Testing Custom Hooks Mocking in Tests Testing Forms Testing Async Behavior Testing Context & State Management Testing Server Components & Actions Playwright E2E Setup Playwright E2E Patterns Advanced Playwright Testing Strategy & Best Practices Testing Best Practices Highlights Summary

Gherkin Form Decision Checklist Gherkin to Code Filetree Example Gherkin to Deploy Pipeline Highlights Summary

Hydration & SSR Error Scenarios State & Re-render Bug Scenarios Data Fetching Bug Scenarios Routing & Navigation Error Scenarios Form & Input Bug Scenarios API Integration Error Scenarios Layout & CSS Issue Scenarios Debouncing & Throttling Bug Scenarios Refactoring Example Scenarios Code Review Refactor Snippets Highlights Summary

ESLint Setup for Next.js Essential ESLint Rules ESLint Plugins Prettier Setup ESLint + Prettier Integration Biome (ESLint + Prettier Alternative)Husky & lint-staged (Pre-commit Hooks)EditorConfig & VS Code Settings TypeScript Strict Mode & Compiler Checks Linting in CI/CD Linting & Formatting Best Practices Highlights Summary

Tooling & Workflow

Node.js Scripts Basics Installing Node.js and npm pnpm vs npm Running Node.js Scripts in JavaScript Running TypeScript Scripts ESM vs CommonJS Modules ESLint for Node.js Scripts Utility Script Patterns EventEmitter Patterns Making HTTP Servers Node.js Scripts Best Practices Highlights Summary

React 19 Mastery Skill Next.js Routing Deep Dive Skill Next.js Data Fetching Skill Next.js Rendering Strategies Skill TypeScript React Patterns Skill Zustand State Management Skill Custom Hooks Crafting Skill Forms & Validation Expert Skill Tailwind v4 + shadcn/ui Skill Vercel React Best Practices Skill Node.js Scripts Expert Skill Highlights Summary

Essential Git Commands Merging & Rebasing Merge Conflict Resolution Checklist Git Worktrees Intro Git Worktree Examples GitHub CLI Git Utilities Git Configuration Highlights Summary

Sysadmin Essentials Search & Regex Node.js Developer Commands Shell Productivity Linux CLI Best Practices Highlights Summary

Onboarding Devs Checklist

/

/

© 2026 @csjcode|SystemsArchitect.io: Cloud Systems Tools|Terms

An independent, unofficial educational resource. Not affiliated with, endorsed, or sponsored by the brand/trademark maintainers/owners.

This site is in beta testing and may have inaccuracies or errors.

All code examples are generic for learning and for a dev/test environment only. No warranty is provided to users. See terms.

Search Documentation

Search across all documentation pages

React SME Cookbook

Cookbook-style documentation and cheatsheet for React 19, Next.js, TypeScript, and the modern frontend stack. Each topic includes a recipe, working example, deep dive, gotchas, and alternatives.

🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥

React Fundamentals

12 pages

React Basics, Component Decision Workflow, JSX and TSX, Components, Function Component Syntax Variations, Conditional Rendering, Lists and Keys, Event Handling, ...

12 pages

JSX and Elements, Components and Props, State with useState, Effects and Side Effects, Refs and DOM Access, Context and Composition, Lists Keys and Conditionals, ...

17 pages

React Hooks Basics, Custom Hooks, useEffect Hook, useState Hook, useContext Hook, useReducer Hook, useMemo Hook, useCallback Hook, useRef Hook, useId Hook, ...

17 pages

Custom Hooks: Step-by-Step Guide, useDebounce, useThrottle, useScrollToTop, useLocalStorage, useMediaQuery, useClickOutside, useCopyToClipboard, ...

14 pages

React Patterns Basics, Composition Over Inheritance, Render Props, Higher-Order Components, Compound Components, Controlled vs Uncontrolled Components, ...

12 pages

What's New in React 19, Server Components, Server Actions, Form Actions, use() Hook, useOptimistic, Ref as Prop, Document Metadata, Asset Loading, ...

7 pages

50 React & Next.js Rules, 40 Next.js Rules, 30 API Rules for Next.js, 30 React UX Rules, Problem/Solution, React & Next.js Architecture Decisions, ...

React Architecture

12 pages

React Architecture Decision Checklist, React Architecture Gotchas & Common Mistakes, React & TypeScript Refactoring Decisions, UI Refactor Checklist, ...

React Components

31 pages

Component Choice Workflow, Button, Modal, Card, Accordion, Tabs, Toast, Dropdown, Tooltip, Input, Avatar, Badge, Skeleton, Sidebar, Breadcrumb, Pagination, ...

Forms & Validation

20 pages

Decision Checklist, Forms & Validation Basics, Field Logic Discovery Checklist, Controlled vs Uncontrolled Inputs, Zod Basics, Zod Types, Zod Transforms, ...

13 pages

React Events Basics, Mouse Events, Keyboard Events, Form Events, Focus Events, Clipboard Events, Drag & Drop Events, Touch Events, Scroll Events, Pointer Events, ...

17 pages

Performance Basics, Preventing Unnecessary Re-renders, useMemo, useCallback & React.memo, React Compiler (React Forget), React DevTools Profiler, ...

12 pages

Basic Next.js Setup, Next.js + Tailwind v4 + shadcn/ui, create-next-app CLI Flags, Next.js + Prisma + PostgreSQL, Next.js + Auth.js v5, ...

Next.js Routing

11 pages

App Router Basics, Layouts, Dynamic Routes, Route Groups, Loading & Error Handling, Middleware, Intercepting Routes, Parallel Routes, Navigation, ...

14 pages

Next.js Data Basics, Data Fetching in Server Components, Server Actions, Revalidation, Streaming & Suspense, Caching, Search Params, Cookies & Headers, ...

Next.js Rendering

9 pages

Server Components, Client Components, Composition Patterns, Static vs Dynamic Rendering, Partial Prerendering (PPR), Image Optimization, Font Optimization, ...

Next.js Patterns

10 pages

Authentication Patterns, API Route Handlers, Environment Variables, Error Handling, Testing Next.js Apps, Deployment, SEO and Metadata, ...

TypeScript + React

19 pages

TypeScript + React Basics, TypeScript Basics for React, Typing Props, Typing State, Typing Events, Typing Refs, Typing Context, Generics in React, ...

13 pages

SWR Setup and Configuration, Basic Data Fetching with SWR, Conditional and Dependent Fetching, Mutations and Optimistic Updates, Pagination with SWR, ...

14 pages

Zustand Setup and Basic Usage, Store Design Patterns, Selectors and Performance, Async Actions, Slice Pattern, Zustand Middleware, Persist Middleware, ...

React Libraries

12 pages

Vercel AI SDK, Prisma ORM, dnd-kit Drag and Drop, AWS SDK S3, AWS SDK Lambda, AWS SDK Polly, Lodash Utilities, date-fns Date Manipulation, ...

5 pages

postMessage Fundamentals, Intermediate postMessage Patterns, Advanced postMessage Patterns, postMessage Security, Highlights Summary

Stripe Payments

13 pages

Getting Started with Stripe, Stripe Checkout Sessions, Payment Intents (Custom Payment Flow), Payment Element & Card Element, Subscriptions, Stripe Webhooks, ...

12 pages

Lucide React Icons, React Icons, Heroicons, Next.js Image Optimization, Unsplash API, Pixabay API, Pexels API, Custom SVG Icons in React, ...

16 pages

Vitest Setup with Next.js, Jest Setup with Next.js, React Testing Library Fundamentals, Testing React Components, Testing Custom Hooks, Mocking in Tests, ...

Testing: Gherkins

5 pages

Gherkin Form Decision Checklist, Gherkin to Code, Filetree Example, Gherkin to Deploy Pipeline, Highlights Summary

Scenarios - Defects

11 pages

Hydration & SSR Error Scenarios, State & Re-render Bug Scenarios, Data Fetching Bug Scenarios, Routing & Navigation Error Scenarios, Form & Input Bug Scenarios, ...

Linting & Formatting

12 pages

ESLint Setup for Next.js, Essential ESLint Rules, ESLint Plugins, Prettier Setup, ESLint + Prettier Integration, Biome (ESLint + Prettier Alternative), ...

Tailwind CSS v4

10 pages

Tailwind CSS v4 Setup, Tailwind Examples, Tailwind Utilities, Grid Examples, Responsive Design, Dark Mode, Animations, Custom Utilities, Tailwind Colors, ...

9 pages

shadcn/ui Setup, Button, Dialog, Form, Data Table, Command, Toast, Sidebar, Highlights Summary

Node.js Scripts

12 pages

Node.js Scripts Basics, Installing Node.js and npm, pnpm vs npm, Running Node.js Scripts in JavaScript, Running TypeScript Scripts, ESM vs CommonJS Modules, ...

12 pages

React 19 Mastery Skill, Next.js Routing Deep Dive Skill, Next.js Data Fetching Skill, Next.js Rendering Strategies Skill, TypeScript React Patterns Skill, ...

9 pages

Essential Git Commands, Merging & Rebasing, Merge Conflict Resolution Checklist, Git Worktrees Intro, Git Worktree Examples, GitHub CLI, Git Utilities, ...

6 pages

Sysadmin Essentials, Search & Regex, Node.js Developer Commands, Shell Productivity, Linux CLI Best Practices, Highlights Summary

1 page

Onboarding Devs Checklist

🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥