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

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

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

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

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

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 Decision Checklist React Architecture Gotchas & Common Mistakes React & TypeScript Refactoring Decisions UI Refactor Checklist

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)

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

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

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

Forms & State

Decision Checklist Forms & Validation Basics 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

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

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

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

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

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

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

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

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

postMessage Fundamentals Intermediate postMessage Patterns

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

Styling & UI

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

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

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

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

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

Form & Input Bug Scenarios Refactoring Example Scenarios

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

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

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

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

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

/

/

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

Search Documentation

Search across all documentation pages

React SME/Tags/Avif

#Avif2 pages

Pages tagged Avif across 2 sections.

Next.js Rendering

Image Optimization

Image & Font Performance

Related tags

Lazy Loading Next Image Webp