React SME Cookbook

Sections

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

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

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

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

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

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

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

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

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

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

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/React Components

React Components

29 pages in this section.

1

Component Choice Workflow

Decision Checklist Workflow Planning

2

Button Component Interactive Tailwind

3

Modal Dialog Overlay Component

4

Card Container Layout Component

5

Accordion Collapsible Disclosure Component

6

Tabs Navigation Panel Component

7

Toast Notification Alert Snackbar

8

Dropdown Menu Popover Navigation

9

Tooltip Popover Hover Accessibility

10

Input Form Text Field Component

11

Avatar Profile Image Component

12

Badge Label Status Tag

13

Skeleton Loading Placeholder Component

14

Sidebar Navigation Layout Drawer

15

Breadcrumb Navigation Routing Component

16

Pagination Navigation Table List

17

Textarea Form Multi Line Text Input

18

Select Dropdown Form Picker

19

Checkbox Form Toggle Boolean

20

Radio Radio Group Form Selection

21

Switch Toggle Boolean Form

22

Label Form Accessibility Text

23

Slider Range Input Numeric

24

Toggle Group Segmented Control Button Group Selection

25

Separator Divider Line HR

26

Aspect Ratio Responsive Image Video

27

Scroll Scrollbar Overflow Container

28

Popover Popup Floating Panel

29

Alert Banner Notification Message