Home Blog React
React

React Tutorials & Guides

Modern React guides covering hooks, Next.js App Router, TypeScript, state management and testing. React 18+ patterns for production applications.

Hooks Next.js TypeScript Performance Testing State
🗺 Learning Path
1Hooks
2Custom Hooks
3State Management
4TypeScript
5Next.js
6Performance
7Testing

Hooks & Core Patterns

Hooks

React Hooks Complete Guide: useState, useEffect & More

useState, useEffect, useRef, useMemo, useCallback, useReducer, useTransition and rules of hooks.

Read guide →
Custom Hooks

React Custom Hooks: Build Reusable Logic

useFetch, useLocalStorage, useDebounce, useClickOutside, useIntersectionObserver and testing hooks.

Read guide →
Context API

React Context API: Patterns and Performance

Context + useReducer, splitting contexts, avoiding re-render pitfalls and compound components.

Read guide →
useReducer

useReducer Deep Dive: Complex State Patterns

useReducer vs useState, TypeScript discriminated union actions, Context+Reducer store, Immer and async state machines.

Read guide →
Error Handling

React Error Boundaries: Production Error Handling

Class boundaries, react-error-boundary library, async errors, Suspense pairing and Sentry integration.

Read guide →

State Management

State Overview

React State: Redux Toolkit, Zustand and React Query

Local vs global state decisions, Redux Toolkit, Zustand, TanStack Query and when to use each.

Read guide →
Zustand

Zustand Guide: Lightweight Global State

create() store, selectors, async actions, TypeScript, devtools+persist+immer middleware and slice pattern.

Read guide →
Redux Toolkit

Redux Toolkit: Modern Redux with RTK Query

configureStore, createSlice, createAsyncThunk, typed hooks, RTK Query with cache tags and optimistic updates.

Read guide →
Jotai

Jotai: Atomic State Management Guide

Atoms, derived atoms, writable atoms, async atoms, atom families, atomWithStorage and Jotai vs Zustand.

Read guide →

Data Fetching

TanStack Query

TanStack Query v5: Server State Management

useQuery, useMutation, cache invalidation, optimistic updates, useInfiniteQuery and Next.js HydrationBoundary.

Read guide →
SWR

SWR: Stale-While-Revalidate Data Fetching

useSWR, global config, conditional fetching, mutation, optimistic updates, infinite loading and TypeScript.

Read guide →
Forms

React Forms: React Hook Form and Zod Validation

RHF register/handleSubmit, Zod schema validation, dynamic fields, file uploads and loading states.

Read guide →

Server Components & Concurrent React

RSC

React Server Components: Architecture Guide

Server vs client components, async data fetching, streaming with Suspense, composition patterns and caching.

Read guide →
Suspense

React Suspense & Concurrent Features

React.lazy, use() hook, data fetching with Suspense, streaming SSR and parallel Suspense patterns.

Read guide →
Transitions

useTransition and useDeferredValue Guide

Concurrent rendering mental model, isPending patterns, tab switching, deferred lists and Next.js Server Actions.

Read guide →

Next.js

Next.js

Next.js 14 Complete Guide: App Router

App Router vs Pages Router, Server Components, Server Actions, data fetching and ISR.

Read guide →
App Router

Next.js App Router: File Conventions Deep Dive

layout/page/loading/error/not-found, nested layouts, route groups, parallel routes and intercepting routes.

Read guide →
ISR

Next.js ISR: Incremental Static Regeneration

Time-based revalidation, on-demand revalidation with revalidateTag/revalidatePath, PPR and cache exports.

Read guide →
API Routes

Next.js API Routes and Server Actions

Route Handlers, GET/POST/PUT/DELETE, NextRequest/NextResponse, Server Actions, Zod validation and file uploads.

Read guide →
Middleware

Next.js Middleware: Auth, Security and Edge Logic

matcher config, JWT auth guard, role-based access, security headers, geolocation, A/B testing and rate limiting.

Read guide →
SEO

Next.js SEO: Metadata, Sitemap and Open Graph

Metadata export, generateMetadata, OG images with ImageResponse, JSON-LD structured data and robots.txt.

Read guide →
Images

Next.js Image Optimization and Core Web Vitals

next/image, priority prop, sizes prop, fill layout, remote patterns, blur placeholder and AVIF vs WebP.

Read guide →
Authentication

Next.js Authentication with Auth.js (NextAuth v5)

OAuth providers, credentials, session management, protected routes with middleware and RBAC.

Read guide →

Performance & Build Tools

Performance

React Performance: Memoization and Code Splitting

React.memo, useMemo, useCallback, React.lazy/Suspense, virtualization, Profiler and bundle analysis.

Read guide →
Code Splitting

React Code Splitting and Lazy Loading

React.lazy, Suspense, named export patterns, route-based splitting, prefetching and bundle analysis.

Read guide →
Vite

Vite Guide: Fast React Development

vite.config.ts, path aliases, env vars, key plugins (react-swc, svgr), Vitest and CRA migration steps.

Read guide →
Tailwind CSS

Tailwind CSS Guide: Utility-First Styling

Setup for Next.js/Vite, dark mode, custom theme, cva+clsx+tailwind-merge, shadcn/ui and Tailwind v4.

Read guide →
React Router

React Router v6: Complete Routing Guide

createBrowserRouter, nested routes, loaders, actions, lazy routes, protected routes and useSearchParams.

Read guide →

TypeScript & Testing

TypeScript

React with TypeScript: Complete Type Safety Guide

Component props typing, event handlers, generics, forwardRef, discriminated unions and strict mode.

Read guide →
Testing

React Testing Library: Unit and Integration Testing

Queries, user-event, async testing, MSW for API mocking, coverage and CI integration.

Read guide →
Playwright

Playwright E2E Testing for React Apps

Role locators, Page Object Model, global auth, API mocking with route(), visual comparisons and CI setup.

Read guide →
Zod

Zod Schema Validation: Forms and API Responses

Schema definition, React Hook Form + zodResolver, API response validation, discriminated unions and custom validators.

Read guide →
MSW

MSW: API Mocking for Tests and Development

REST and GraphQL handlers, browser Service Worker setup, Vitest integration, error simulation and Storybook.

Read guide →
Storybook

Storybook 8: Component-Driven Development

CSF3 stories, argTypes controls, decorators, play() interaction tests, a11y addon and Chromatic visual regression.

Read guide →

UI, Animation & Styling

Framer Motion

Framer Motion: Animations in React

motion components, variants, AnimatePresence, layout animations, gestures, useScroll parallax and LazyMotion.

Read guide →
Accessibility

React Accessibility: ARIA and Focus Management

Semantic HTML, ARIA attributes, focus trapping, keyboard navigation, live regions and axe-core testing.

Read guide →
Dark Mode

Dark Mode: Theme Switching with CSS Variables

CSS variable tokens, useTheme hook, system preference detection, FOUC prevention, next-themes and Tailwind dark mode.

Read guide →
CSS Styling

CSS Modules, Styled-Components and Emotion

Scoped CSS Modules, dynamic styled-components, Emotion css prop, ThemeProvider and styling approach comparison.

Read guide →
Atomic Design

Atomic Design: Component Architecture Patterns

Atoms, molecules, organisms, templates and pages — folder structure, feature-based architecture and barrel exports.

Read guide →
Recharts

Recharts: Data Visualization in React

BarChart, LineChart, AreaChart, PieChart, ComposedChart, custom tooltips, dark theme and real-time updates.

Read guide →

Advanced Patterns

Patterns

Compound Components and Render Props

Context-based compound components, TypeScript generics, render props pattern, headless hooks and Accordion.

Read guide →
HOC

HOC Patterns: withAuth, withLoading and Compose

HOC anatomy, withAuth, withLoading, withErrorBoundary, withLogging, TypeScript generics and compose utility.

Read guide →
Refs

Refs and forwardRef: DOM Access Patterns

useRef for DOM and values, callback refs, forwardRef with TypeScript, React 19 ref-as-prop and useImperativeHandle.

Read guide →
Portals

React Portals: Modals and Tooltips Outside the DOM

createPortal, modal with focus management, tooltip positioning, toast system and SSR guard pattern.

Read guide →
Virtualization

Infinite Scroll and Virtualization

react-window FixedSizeList/Grid, TanStack Virtual with dynamic heights, IntersectionObserver infinite scroll.

Read guide →
Drag and Drop

dnd-kit: Drag and Drop in React

DndContext, useDraggable/useDroppable, SortableContext with arrayMove, Kanban board and accessibility announcements.

Read guide →
File Upload

File Upload: Progress, Dropzone and S3

XHR progress events, react-dropzone, file validation, multi-file upload, S3 presigned URLs and Server Actions.

Read guide →
Tables

TanStack Table v8: Sorting, Filtering and Pagination

Column definitions, sorting, global/column filters, pagination, row selection, column visibility and server-side.

Read guide →

DevOps & Deployment

i18n

Internationalization with react-i18next

Translation JSON, useTranslation hook, plurals, Trans component, language switching, Next.js locale routing and lazy-loaded namespaces.

Read guide →
PWA

Progressive Web Apps with Vite PWA

Web App Manifest, vite-plugin-pwa, Workbox caching strategies, offline UI, install prompt, push notifications and Background Sync.

Read guide →
Micro-Frontends

Micro-Frontends with Module Federation

Webpack 5 Module Federation, host/remote/shared concepts, async bootstrap, TypeScript declarations and Vite federation.

Read guide →
Monorepo

Turborepo: React Monorepo Setup

pnpm workspaces, turbo.json pipeline, shared packages, TypeScript path inheritance, remote caching and CI integration.

Read guide →
Docker

Docker: Containerizing React Apps

Multi-stage Dockerfile for Vite and Next.js, Nginx SPA config, runtime env vars, Docker Compose with health checks and multi-platform builds.

Read guide →
CI/CD

GitHub Actions CI/CD for React

Parallel lint/test/e2e jobs, Docker build to GHCR, Cloudflare Pages previews, Vercel deploy and AWS ECS with OIDC.

Read guide →
React Native

React Native Code Sharing Strategies

Platform file resolution, shared hooks and stores, Solito navigation, Tamagui universal UI and Expo Router web output.

Read guide →

Integrations & APIs

WebSocket

WebSocket: Real-Time React Apps

useWebSocket with exponential backoff, typed events, WSProvider context, TanStack Query integration, SSE and presence tracking.

Read guide →
Socket.io

Socket.io: Typed Real-Time Communication

Typed server/client events, SocketProvider, chat room with rooms, typing indicators, auth middleware and reconnect strategy.

Read guide →
Stripe

Stripe Payments in React

PaymentElement, Checkout Sessions, subscriptions, webhook verification, Server Actions and Next.js secure payment flow.

Read guide →
Maps

Maps: Mapbox and Leaflet in React

react-map-gl markers and popups, GeoJSON clustering, react-leaflet setup, MarkerClusterGroup and Mapbox Geocoding API.

Read guide →
PDF

PDF Generation with @react-pdf/renderer

Document/Page/View primitives, StyleSheet Flexbox, invoice template, custom fonts, PDFDownloadLink, BlobProvider and server-side rendering.

Read guide →
OpenAI

OpenAI Integration: AI-Powered UI Features

Vercel AI SDK, useChat streaming hook, tool calling, DALL-E image generation, embeddings, RAG pattern and secure API key handling.

Read guide →
Feature Flags

Feature Flags: A/B Testing and Rollouts

OpenFeature SDK, LaunchDarkly integration, custom flag provider, A/B testing pattern, percentage rollouts and kill switches.

Read guide →

Advanced & Internals

3D

Three.js: 3D Graphics with React Three Fiber

Canvas setup, useFrame animation, lighting and textures, OrbitControls, GLTF models, post-processing effects and GPU instancing.

Read guide →
External Stores

useSyncExternalStore: External Store Integration

Subscribe to browser APIs (online, window size, media query, scroll), building a mini Zustand-style store and SSR snapshots.

Read guide →
Performance

Million.js: Hyper-Optimized Virtual DOM

Block-based vDOM, block() API, auto compiler mode, Million Lint, optimized For list rendering and when to use Million vs React default.

Read guide →

State, Data & Patterns

useReducer

React useReducer: Complex State Management Patterns

Action type patterns, async actions, combined reducers, state machines, useReducer with Context, and TypeScript discriminated unions.

Read guide →
Compound Components

React Compound Components and Render Props Patterns

Context-based compound components, Accordion, Tabs, render props, children as function, prop getter pattern, and TypeScript types.

Read guide →
Framer Motion

React Framer Motion: Animations and Transitions Guide

motion components, variants, stagger, gestures, AnimatePresence, layout animations, scroll-linked effects and performance tips.

Read guide →
TanStack Query

React TanStack Query: Server State and Caching Guide

useQuery, useMutation, query keys, cache invalidation, pagination, infinite queries, optimistic updates, and Next.js hydration.

Read guide →
Zustand

React Zustand Guide: Lightweight Global State

Store creation, selectors, async actions, slice pattern, devtools + immer + persist middleware, outside-React access and TypeScript.

Read guide →
Next.js App Router

Next.js App Router: Layouts, Loading and Error UI

File conventions, nested layouts, loading.tsx streaming, error.tsx boundaries, Server vs Client Components, data fetching, and metadata API.

Read guide →