Tag: React
37 posts
-
Finding and Fixing Slow React Renders: memo, useMemo, useCallback, Code Splitting and Profiling
Measure React re-renders with DevTools and the Profiler API, then fix them with React.memo, useMemo, useCallback, virtualization and code splitting.
-
React from Usage to Internals: Fiber Reconciliation, Diffing, Hooks and Concurrent Rendering
React from everyday APIs to internals: Fiber reconciliation, key-based diffing, hooks on fibers, automatic batching, transitions, Suspense, streaming SSR and what React 19 changed.
-
Playwright Component Testing | React, Vue, Svelte, MSW & CI
Mount UI components in real browsers with Playwright CT: experimental CT packages, Vite bundling, mount fixture, MSW router, screenshots, sharding.
-
Jest in Practice: Matchers, Async Tests, Mocks, Snapshots and Coverage in CI
Hands-on Jest guide: matchers, async tests, mocks, React Testing Library, snapshots, coverage thresholds, runner architecture, and CI patterns.
-
Schema Validation with Yup: Strings, Numbers, Objects, Arrays, Conditional and Async Rules
Schema-based validation with Yup: basic schemas, required and optional fields, string, number, object and array rules, conditional and async validation, and TypeScript use with forms.
-
shadcn/ui in Practice: Owning Copied Components, Tailwind v4 Theming, asChild and Forms
What shadcn/ui's copy-in model means for updates, CLI init and add, Tailwind v4 CSS-variable theming, Radix accessibility, asChild and react-hook-form + zod.
-
Building Components in Isolation with Storybook: Stories, Args and Controls, Decorators, Docs and Tests
Component-driven development with Storybook: writing stories, component states, args and controls, decorators, addons, documentation, interaction testing and deployment.
-
Data Fetching with SWR: Revalidation, Mutations, Dependent Requests and Infinite Loading
Fetch data in React with SWR: cache keys, revalidation on focus, optimistic mutations, conditional and dependent requests, infinite loading and Next.js.
-
TanStack Query v5 in Practice: Query Keys, staleTime vs gcTime, Mutations and SSR Hydration
How TanStack Query v5 behaves: query keys as dependencies, staleTime vs gcTime, isPending vs isLoading, invalidation, optimistic rollback and SSR hydration.
-
tRPC: End-to-End Type Safety Without Codegen, and Where the Types Stop Protecting You
How tRPC shares types between a TypeScript server and client through inference, how to set up routers, context, and auth middleware in Next.js, and the gaps: Dates arriving as strings, runtime validation, batching, versioning, and non-TypeScript clients.
-
React Router for SPAs: Nested Routes, Loaders and Actions, Error Boundaries and Protected Routes
Client-side routing in React with React Router: basic and nested routes, navigation, URL params, data loaders, form actions, error handling, and protected routes.
-
Testing React Components Like a User: Queries, user-event, Async Tests, Context and Hooks
Testing React components with React Testing Library: choosing queries, simulating user events, async testing, forms, context providers, custom hooks, and accessibility checks.
-
Modern Redux with Redux Toolkit: Slices, Typed Hooks, Thunks, RTK Query and Entity Adapters
Complete Redux Toolkit guide for React. Learn slices, reducers, async thunks, RTK Query, and building scalable Redux applications with best practices.
-
Full-Stack React with Remix: Loaders, Actions, Nested Routes, Validation and Optimistic UI
Building full-stack web apps with Remix: server-side loaders, form actions, nested routes, error handling, validation, database access, authentication and optimistic UI.
-
Preact as a 3KB React Alternative: Hooks, Signals, preact/compat and Where It Differs
Building fast web apps with Preact: core concepts, hooks, React compatibility via preact/compat, Signals, routing, server-side rendering, and the differences from React that matter.
-
MobX for React State: Observables, Computed Values, Actions, Reactions and Multiple Stores
Managing React state with MobX: observables, computed values, actions, reactions, a shopping cart example, multiple stores, and best practices.
-
Mocking APIs with MSW: Handlers for the Browser and Node Tests, Runtime Overrides and GraphQL
Mocking APIs at the network level with Mock Service Worker: defining handlers, browser and Node.js setup, using MSW in tests, runtime handler overrides, GraphQL, and an e-commerce example.
-
Immutable Updates with Immer: produce, Curried Producers, Patches and Redux
Writing immutable state updates with Immer: produce, array operations, curried producers, patches, return values, React and Redux integration, and performance notes.
-
Atomic State in React with Jotai: Derived, Async and Write-Only Atoms, Families and Provider Scope
Managing React state with Jotai's atomic model: primitive, derived, async and write-only atoms, atom families, utilities, a todo app, and provider scoping trade-offs.
-
Styling React with Emotion: css Prop vs styled, Theming, SSR and How It Compares to Tailwind
Style React apps with Emotion. Covers the css prop, styled components, theming, keyframes, global styles, server-side rendering, and performance tips.
-
Zustand in React and TypeScript: Stores, Selectors, persist/devtools/immer and Next.js SSR
Manage React state with Zustand: typed stores, selectors that avoid re-renders, persist, devtools and immer middleware, and store setup for Next.js SSR.
-
Vite for Frontend Projects: Config, Env Variables, Assets, HMR, Plugins and Library Mode
Using Vite for modern frontend development: project structure, vite.config.ts, environment variables, asset handling, HMR, plugins, library mode and multi-page apps.
-
Vitest in Practice: Setup, Mocking Pitfalls, React Component Tests and Coverage
Set up Vitest in a Vite project, understand why vi.mock is hoisted and how vi.hoisted fixes it, keep mocks from leaking between tests, test React components with Testing Library, and run coverage in CI.
-
Zod for Runtime Validation in TypeScript: Schemas, Inferred Types, Transforms and Integrations
Validate runtime data in TypeScript with Zod: infer types from schemas, transform input, handle errors, and use it with React Hook Form and tRPC.
-
React Hooks Pitfalls: Stale Closures, Effect Loops, Fetch Races and Useless Memoization
Why hook bugs happen: stale closures, effect loops, fetch races, and memoization that does nothing, explained through the render model, with fixes and the Strict Mode behavior that exposes them.
-
Tailwind CSS v4 in Practice: Utilities, Responsive Layouts, State Variants, Dark Mode and Themes
Style UIs with Tailwind CSS v4: utilities, responsive breakpoints, flex and grid, state variants, dark mode, CSS theme tokens, and cn() for conditional classes.
-
Next.js App Router: Server Components, Server Actions, Streaming and Parallel Routes
How the Next.js App Router works: file conventions, the server/client boundary, secure Server Actions, streaming, and parallel and intercepting routes.
-
Next.js Performance: Measure First, Then Images, Bundle Splitting, Caching and Core Web Vitals
Speed up Next.js by measuring with the bundle analyzer first, then optimizing images, splitting bundles, tuning App Router caching, and fixing LCP, CLS and INP.
-
MUI v6 in React: Layout, the sx Prop, Custom Themes, Dark Mode and DataGrid
Building React UIs with MUI (Material UI) v6: core and layout components, the sx prop, custom themes and dark mode, dialogs, Autocomplete and DatePicker, and DataGrid tables.
-
Desktop Apps with Electron: Main vs Renderer, Secure Preload IPC, Auto-Update and Packaging
Build cross-platform desktop apps with Electron. Covers main/renderer processes, IPC, native APIs, auto-update, performance optimization, and distribution.
-
Building on Firebase: Firestore Data Modeling, Security Rules, Auth and Cloud Functions
Building production apps with Firebase: Firestore data modeling and real-time listeners, security rules, authentication patterns, Cloud Storage, Cloud Functions, and cost control.
-
React Animations with Framer Motion: Variants, Gestures, Exit and Layout Animations
Animating React UIs with Framer Motion: transitions, variants, gesture animations, AnimatePresence exit animations, page transitions in Next.js, layout animations, and performance tips.
-
Realtime Backends with Convex: Schemas, Queries vs Mutations, Actions and React Hooks
How Convex works: reactive queries, transactional mutations, why actions exist, indexes vs filter, auth checks, file uploads, and scheduling side effects.
-
Chakra UI in React: Layout Primitives, Theming, Dark Mode and Accessible Components
Chakra UI v3 in React: style props and layout, Field with React Hook Form, createSystem tokens and recipes, dark mode via next-themes, and removed v2 APIs.
-
Building an Admin Dashboard with Ant Design: Forms, Tables and Theming
Ant Design v5 admin screens in React: Form instances and rules, typed Table columns, server-side paging, design tokens, and static message pitfalls.
-
Forms with React Hook Form: register, Zod Validation, Controller and Field Arrays
Building fast forms with React Hook Form: register and handleSubmit, validation, Zod integration, watch and control, Controller for custom inputs, and dynamic field arrays.
-
React useMemo and useCallback: When to Use Them
When useMemo and useCallback actually pay off in React: expensive computations, stable references for memo children, effects and Context values, dependency-array pitfalls, and verifying with the Profiler.