Building Accessible Modals, Drawers, and Popovers in React
How to build accessible modals, drawers, and popovers in React, with focus management, portals, dismissal rules, and the semantics each pattern needs.
Articles
React
React makes it easy to start with a component; the harder work is deciding how that component should behave as the application grows. These articles follow rendering and state across component and API boundaries, with an eye on the trade‑offs that keep a long‑lived codebase understandable.
Building Accessible Modals, Drawers, and Popovers in React. 
Choosing Where State Lives in React: Local State, Context, URL, Cache, or Server. Choosing Where State Lives in React: Local State, Context, URL, Cache, or Server
Choose where React state should live, comparing local state, context, URL state, server data, cache state, mirrored values, and ownership questions.
Using useTransition and useDeferredValue to Keep React Interfaces Responsive. Using
useTransitionanduseDeferredValueto Keep React Interfaces ResponsiveuseTransitionanduseDeferredValueexplained with search, filtering, pending states, and how to keep React interfaces responsive under heavy work.
Profiling React Re‑Renders Before Reaching for useMemo. Profiling React Re‑Renders Before Reaching for
useMemoProfile React re‑renders before adding useMemo, using DevTools, render reasons, prop identity, state placement, context updates, and list strategies.
Stale Closures in React: Why Handlers, Effects, and Timers Read Old State. Stale Closures in React: Why Handlers, Effects, and Timers Read Old State
Stale closures in React explained through renders, handlers, effects, timers, refs, dependency arrays, why callbacks read old state, and how to fix them.
Debugging Hydration Mismatches in React and Next.js. Debugging Hydration Mismatches in React and Next.js
Debugging hydration mismatches in React and Next.js, including common causes, repeatable fixes, and how to stop server and client renders drifting apart.
Mastering Server Components in Next.js. Mastering Server Components in Next.js
Mastering Server Components in Next.js, including client boundaries, data fetching, caching, streaming, and the mistakes that make App Router code messy.
Why Your Next.js App Router Page is Stale: Cache Tags, Revalidation, and CMS Publishing. Why Your Next.js App Router Page is Stale: Cache Tags, Revalidation, and CMS Publishing
Debug stale Next.js App Router pages with cache tags, revalidation paths, CMS webhooks, preview freshness, dependency graphs, and simpler cache contracts.
Pages Router to App Router Migration Risk Checklist. Pages Router to App Router Migration Risk Checklist
A Pages Router to App Router migration checklist for Next.js teams, covering routing, data fetching, caching, metadata, server components, and rollout.
React Developer vs. Next.js Developer: What Actually Changes in Production. React Developer vs. Next.js Developer: What Actually Changes in Production
React developer vs. Next.js developer explained through production concerns: rendering, routing, caching, SEO, deployment, CMS data, and debugging.
Memoisation in JavaScript: Optimising Function Calls. Memoisation in JavaScript: Optimising Function Calls
Memoisation helps JavaScript functions run faster by caching previous results. Here's a clear guide on how and when to use memoisation effectively.
Caching Across React, Next.js and Serverless Applications. Caching Across React, Next.js and Serverless Applications
Compare client‑side React caching, Next.js SSG, ISR and SSR caching, and Redis‑backed caches for reliable serverless data fetching and persistence.
Why JavaScript Pages are Crawled but Not Indexed. Why JavaScript Pages are Crawled but Not Indexed
Why JavaScript pages get crawled but not indexed, covering rendered content, metadata, canonicals, links, noindex rules, quality, and crawl signals.
React SPA to Next.js Migration Checklist for SEO and Indexing. React SPA to Next.js Migration Checklist for SEO and Indexing
A React SPA to Next.js SEO migration checklist for preserving indexing, redirects, metadata, rendered HTML, internal links, crawl paths, and launch confidence.
React's Virtual DOM vs. the Real DOM. React's Virtual DOM vs. the Real DOM
React's virtual DOM describes the UI before reconciliation updates the browser DOM. I explain the costs, list keys and why performance still needs measuring.
Optimising Performance in React with useMemo and useCallback. Optimising Performance in React with
useMemoanduseCallbackOptimise React performance with useMemo and useCallback only where profiling shows expensive calculations, unstable functions, or avoidable re‑renders.
Preventing and Debugging Memory Leaks in React. Preventing and Debugging Memory Leaks in React
Memory leaks in React can cause sluggish performance and excessive memory usage. Here, I explore common causes, how to prevent them, and debugging techniques.
What are Higher‑Order Components in React? What are Higher‑Order Components in React?
Higher‑Order Components (HOCs) in React wrap components to enhance functionality. Here, I explore how HOCs work, common use cases, and when to use them.