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

Tags

911 tags across the docs.

Typescript46 Tailwind42 React 1928 Component27 React27 Forms25 Performance24 Hooks22 Best Practices21 Summary18 Custom Hook17 Next.js17 Accessibility16 Server Actions16 Zod16 Zustand16 Swr14 React Patterns13 Server Components13 Shadcn13 Stripe13 Setup12 Examples11 Skills11 SSR11 Basics10 Form10 Loading10 Nodejs10 React Hook Form10 Suspense10 Context9 Navigation9 Patterns9 Testing9 Validation9 API8 Git8 Streaming8 Caching7 Composition7 Layout7 Middleware7 RSC7 App Router6 Architecture6 Async6 Checklist6 Data Fetching6 Fetch6 Playwright6 Responsive6 Revalidation6 State6 Actions5 Aws5 Components5 Custom Hooks5 Eslint5 Formatting5 Hydration5 Icons5 Linting5 Next.js5 Npm5 Types5 useActionState5 V45 Workflow5 Auth4 Cleanup4 CLI4 Configuration4 Controlled4 Dark Mode4 Dropdown4 Error4 Error Boundary4 Errors4 Events4 File Upload4 Generics4 Gherkin4 Input4 Lazy Loading4 Linux4 Mobile4 Mocking4 Modal4 Mutations4 Next Image4 Optimization4 Planning4 Popover4 Production4 Props4 Route Handlers4 Rules4 Scripts4 Scroll4 Theming4 Tree Shaking4 useReducer4 Vitest4 Animation3 Authentication3 Boolean3 Branches3 Button3 Children3 CI3 Client Components3 Compiler3 Container3 Decisions3 Deployment3 DOM3 Drag3 Free Images3 Fundamentals3 Github Actions3 Image3 Install3 ISR3 LCP3 Memo3 Memoization3 Merge3 Metadata3 Not Found3 Pagination3 Pnpm3 Prisma3 Promises3 Providers3 Re Renders3 Rebase3 Ref3 Refactoring3 Refs3 Rendering3 Routing3 Search3 Selectors3 Session3 Sidebar3 Slots3 State Management3 Stock Photos3 Toast3 Toggle3 UI3 Uncontrolled3 Use Client3 Utilities3 Utility3 UX3 Vercel3 Video3 Alert2 Arrays2 Async Components2 Audio2 Automation2 Avif2 Bdd2 Blur Placeholder2 Build2 Bundle Size2 Cache2 Cheatsheet2 Children Pattern2 Ci Cd2 Clipboard2 CLS2 Code Review2 Collapsible2 Command Palette2 Commonjs2 Comparison2 Concurrency2 Conditional2 Conditional Rendering2 Config2 Copy2 Core Web Vitals2 Coverage2 Create Next App2 Data Cache2 Data Transfer2 Database2 Debounce2 Decision2 Devtools2 Dialog2 Docker2 Drag And Drop2 Error Handling2 Esm2 Express2 Fastify2 Fcp2 Feedback2 Focus2 Form Actions2 forwardRef2 generateStaticParams2 Github2 Handlers2 Headers2 Heroicons2 Hover2 Http2 Iframe2 Immer2 Infinite Scroll2 Inputs2 Integration2 Intercepting Routes2 Interval2 Jest2 Keys2 Label2 Layouts2 Link2 Locale2 Logging2 Menu2 Migration2 Msw2 Multi Step2 Next Font2 Nextauth2 Nextjs Data2 NextRequest2 NextResponse2 Nodejs Scripts2 Notification2 Oauth2 Opengraph2 Orm2 Overlay2 Panel2 Parallel2 Parallel Routes2 PaymentElement2 Payments2 Persist2 Placeholder2 Plugins2 Postgresql2 postMessage2 Ppr2 Prefetch2 Prettier2 Pricing2 Profiling2 Progressive Rendering2 Provider2 React Compiler2 React Devtools2 React Events2 React Forget2 React Fundamentals2 React Hooks2 React Performance2 Redirect2 Regex2 Request Memoization2 Resize2 Rest2 Retry2 SaaS2 Scenarios2 Selection2 Seo2 Server Only2 Skeleton2 Sortable2 SSG2 Standalone2 Static Generation2 Status2 Storage2 Store2 Strict2 Stripe CLI2 Styling2 Subscriptions2 Svg2 Syntax2 Synthetic Events2 Tabs2 Tanstack Query2 Testing Library2 Throttle2 Tickets2 Timers2 Tooltip2 Touch2 Transitions2 Tsconfig2 TSX2 TTFB2 Type Guards2 Typescript React2 Unions2 URL state2 Use Server2 useCallback2 useMemo2 useOptimistic2 useRef2 userEvent2 useSearchParams2 Utility Types2 Variable Fonts2 Viewport2 Vscode2 Webp2 Wizard2 Worktrees2 Zero Js2 3D Secure1 69 Rules1 A11y1 Abort1 Abort Controller1 Accordion1 Act1 AI1 Aliases1 Ambient1 Animations1 Annual1 Anthropic1 Anti Patterns1 Api Client1 Api Design1 Api Testing1 Appearance API1 Aria1 Arrow Functions1 Aspect Ratio1 Assertion1 Assertions1 Async Iterators1 Audit1 Auth Js1 Authjs1 Auto Memoization1 Automatic Memoization1 Avatar1 Axe1 Axios1 Babel1 Babel Plugin1 Badge1 Banner1 Bash1 Beginner1 Billing1 Biome1 Bisect1 Blur1 Blurhash1 Breadcrumb1 Breakpoints1 Bugs1 Bundle Budgets1 Button Group1 Cache Invalidation1 Cache Provider1 Callbacks1 Canvas1 Card1 CardElement1 Catch All1 Chalk1 Chat1 Checkbox1 Checkout1 Cherry Pick1 Classes1 Click1 Click Outside1 Client Boundary1 Closures1 Cloud Functions1 Cmdk1 Code Splitting1 Code Style1 Color Scheme1 Colors1 Combining1 Command1 Complex State1 Component Testing1 Compound Components1 Computed1 confirmPayment1 Conflicts1 Constraints1 Contact1 Container Queries1 Containers1 Context Menu1 Controller1 Cookies1 Countdown1 createContext1 Cross Origin1 CSR1 Css First Config1 Css Variables1 Cucumber1 Curated1 Cursor1 Custom Checkout1 Custom Icons1 Custom Render1 Custom Scrollbar1 Custom Utilities1 Customer Portal1 Cut1 d.ts1 Dashboard1 Data Table1 Date Fns1 Dates1 Debugging1 Decision Checklist1 Declaration1 Declined1 Deduplication1 Default1 Default Export1 Deferred Rendering1 Delay1 Delimiter1 Dependency Injection1 Dependent1 Derived State1 Disclosure1 Discriminant1 Discriminated Unions1 Dismiss1 Dispatch1 Divider1 Dnd Kit1 Document1 Documentation1 Dom Access1 Drag Drop1 Draw1 Drawer1 Drop1 Dynamic Fields1 Dynamic Holes1 Dynamic Imports1 Dynamic Rendering1 Dynamic Routes1 E2e1 Ec21 Ecs1 Edge Runtime1 Editor1 Editorconfig1 Effects1 Eks1 Elements1 End To End1 Enums1 Env1 Environment1 Environment Variables1 Error States1 Error Tsx1 Event Listener1 Event Listeners1 Eventemitter1 Exhaustive1 Extensions1 Extract1 Fallback1 Fargate1 Favicon1 Feather1 Fetching1 Field Arrays1 Field Errors1 File Conventions1 Filetree1 Filtering1 Find1 findBy1 Finite State1 Flags1 Flaky Tests1 Flame Chart1 Flexbox1 Floating1 Focus Management1 Focus Trap1 Font Awesome1 Form Events1 Form Validation1 Forms In Dialogs1 Forms Validation1 Fragments1 FS1 Full Route Cache1 Fullstack1 Function As Child1 Function Declaration1 generateMetadata1 Generators1 Gesture1 Git Hooks1 Gitignore1 Glob1 Global Error1 Global Types1 Gotchas1 Gray Matter1 Grep1 Grid1 Guide1 Happy Dom1 Head1 Headless1 Heap Snapshot1 Higher Order Component1 Hoc1 Hookform1 Hotkey1 HR1 Husky1 I18n1 Ids1 Image Optimization1 ImageResponse1 Images Icons1 Immutable1 Infer1 Inline Errors1 INP1 Inquirer1 Installation1 Interaction1 Interactions1 Interactive1 Interactivity1 Interceptors1 Interfaces1 Interleaving1 Intermediate1 Internationalization1 Intersection Observer1 Invocation1 Is1 Javascript1 jest.mock1 Jsdom1 JSX1 Jwt1 Keyboard1 Keyboard Events1 Keydown1 Keyframes1 Kubernetes1 Lambda1 Large Datasets1 Lifecycle1 Lighthouse1 Lighthouse Ci1 Line1 Lint Staged1 Linting Formatting1 Linux Cli1 List1 Lists1 loadStripe1 Local Storage1 localStorage1 Locators1 Lodash1 Login1 LQIP1 Lts1 Lucide1 Macos1 Manual1 Map1 Markdown1 Matchers1 Material1 Mdx1 Media1 Media Query1 Memory Leaks1 Message1 Message Bus1 MessageEvent1 Meta1 Mistakes1 Mobile First1 Modals1 Modular1 Module Augmentation1 Modules1 Monitoring1 Monorepo1 Monthly1 Motion1 Mouse1 Mouse Events1 Multi Line1 Multiple Root Layouts1 Mutable1 Mutable Values1 Mutation1 Mysql1 N Plus One1 Named Export1 Narrowing1 Navigator1 Nested Layouts1 Networking1 New Features1 Next Auth1 Next Bundle Analyzer1 Next Headers1 Next Intl1 Next Navigation1 Next Public1 Next Response1 Next Start1 Nextjs Patterns1 Nextjs Rendering1 Nextjs Routing1 Nextjs Setup1 Nginx1 Node1 Node Modules1 Notifications1 noUncheckedIndexedAccess1 Null Key1 Numbers1 Numeric1 Nvm1 Objects1 Offset1 Og Image1 Oklch1 Omit1 Onchange1 Onload1 Onsubmit1 Openai1 Openrouter1 Optimistic1 Optimistic Ui1 Optimistic Update1 Optimistic Updates1 Optional Catch All1 Ora1 Organization1 Outline1 Output1 Overflow1 Overview1 Package Json1 Package Manager1 Page1 Page Object Model1 Pagespeed1 Palette1 Params1 Parse1 Parsing1 Partial1 Partial Prerendering1 Paste1 Pattern Matching1 PaymentIntent1 Pen1 Pending State1 Pending Ui1 Persistence1 Pexels1 Pick1 Picker1 Pinch1 Pipe1 Pipes1 Pixabay1 Pm21 Pointer1 Polling1 Polly1 Popup1 Portal1 Pre Commit1 Preconnect1 prefetchDNS1 Preinit1 Preload1 Preloading1 Preprocess1 Presigned Url1 Preview1 Previous1 Problems1 Processes1 Products1 Profile1 Profiler1 Profiler Api1 Progressive Enhancement1 Progressive Loading1 Promise.all1 Promise.allSettled1 Protected Routes1 Pub Sub1 Pull Requests1 Queries1 Query String1 Radio1 Radio Group1 Range1 Rate Limit1 React Cache1 React Icons1 React Libraries1 React Query1 React Testing Library1 Record1 Recovery1 Recurring1 Redirects1 Reducer1 Redux1 Ref Callbacks1 Referential Equality1 Refine1 Reflog1 Register1 Regular Expressions1 Render1 Render Props1 renderHook1 Request Context1 Request Response1 Requirements1 Resolver1 Reusability1 Reuse1 revalidatePath1 revalidateTag1 Review1 Rewrites1 Robots1 Rollback1 Root Layout1 Route1 Route Cache1 Route Groups1 Route Interception1 Router Cache1 RPC1 Rust1 S31 safeParse1 Safety1 Satisfies1 SCA1 Schema1 Screen1 Screen Reader1 Screenshots1 Scripting1 Scroll Position1 Scrollbar1 Search Params1 Secrets1 Segmented Control1 Select1 Selector1 Self Hosting1 Self Service1 Separator1 Serialization1 Server1 Server Client Boundary1 Server Component1 Server Rendering1 Serverless1 Sessions1 sessionStorage1 setInterval1 Shallow1 Shared Ui1 Shell1 Shortcut1 Shortcuts1 Side Effects1 Signature Verification1 Signup1 Sitemap1 Slices1 Slider1 Slug1 Snackbar1 Snapshots1 Soft Navigation1 Solid1 Solutions1 Sonner1 Sorting1 Splitting1 Sqlite1 Ssml1 Stack1 Starter1 Stash1 State Colocation1 State Machine1 State Ownership1 Static Shell1 Sticky Header1 Strategy1 strictNullChecks1 String Matching1 Strings1 Structured Data1 Subsets1 superRefine1 Svgr1 Swipe1 Switch1 SWRConfig1 Sysadmin1 Table1 Tag1 Tailwind V41 Tanstack Table1 Team Settings1 Templates1 Ternary1 Test Cards1 Testing Pyramid1 Testing Trophy1 Text1 Text Field1 Text Input1 Text To Speech1 Textarea1 Theme1 Tiers1 Time1 Timer1 Title1 Toggle Group1 Transform1 Transition1 Translations1 Trials1 Troubleshooting1 Ts Node1 Tts1 Turborepo1 Tutorial1 Twitter Card1 Type Check1 Type Safety1 Typed Forms1 Typing1 Unsplash1 Use1 useContext1 useEffect1 useElements1 useForm1 useFormStatus1 usePathname1 User Experience1 useRouter1 useState1 useStripe1 useSWR1 useSWRInfinite1 useSWRMutation1 Variant1 Variants1 Version Control1 vi.mock1 Visual Regression1 waitFor1 Waterfall1 Web Fonts1 Web Vitals1 Webhooks1 Why Did This Render1 Window1 Window Size1 Windows1 Workspaces1 Wrapper1 Xstate1 Yield1