Building Custom Hooks in React
Building custom hooks in React explained with reusable stateful logic, naming rules, composition examples, and why hooks share logic rather than state.
Articles
Guides, page 16 of 22
The guides are the practical part of this archive: working explanations for a specific web development problem, written to show the decision as well as the answer. The subject varies, but the aim is consistent: enough context to use the technique sensibly rather than copy it blindly.
Building Custom Hooks in React. 
What is a Static Site Generator? What is a Static Site Generator?
Static site generators explained in plain English, including how they compare with SSR, ISR and modern framework rendering choices.
Static Generation vs. Server‑Side Rendering in Next.js. Static Generation vs. Server‑Side Rendering in Next.js
Compare static generation and server‑side rendering in Next.js through freshness, request‑time data, performance, SEO, operational cost, and page intent.
Automatically Generate urllist.txt from sitemap.xml. Automatically Generate
urllist.txtfromsitemap.xmlUsing PHP it is quick and easy to automatically generate your urllist.txt sitemap from your sitemap.xml file (for example, using gatsby‑plugin‑sitemap).
Throttling vs. Debouncing in JavaScript: Managing Event Frequency. Throttling vs. Debouncing in JavaScript: Managing Event Frequency
The differences between throttling and debouncing in JavaScript, including practical TypeScript code examples. Optimise event handling and improve performance.
Understanding Element Dimensions in JavaScript: Width and Height. Understanding Element Dimensions in JavaScript: Width and Height
Measure element dimensions in JavaScript with clientWidth, offsetWidth, getBoundingClientRect(), innerWidth, outerWidth, and responsive layout cautions.
Using CSS Custom Properties for Shared Design Values. Using CSS Custom Properties for Shared Design Values
useReducer in React. useReducerin ReactuseReducerin React explained clearly, including reducer functions, action objects, complex state updates, and when it is a better fit thanuseState.
Dynamic Routes in Next.js. Dynamic Routes in Next.js
Dynamic routes in Next.js explained with
[slug]pages, route params, nested segments, and why file‑based dynamic routing simplifies content‑driven sites.
301 vs. 307 Redirects. 301vs.307RedirectsCompare 301 and 307 redirects clearly, including permanence, browser behaviour, SEO impact, cache handling, temporary moves, and when each status code fits.
JavaScript’s Math.random(). JavaScript's
Math.random()JavaScript Math.random() explained beyond the basics, including pseudo‑random generation, browser history, ranges, array indexes, and randomness limits.
useRef in React. useRefin ReactUse useRef in React for DOM access, focus management, mutable values, previous values, integration work, and cases where refs should not replace state.
React Hooks: Modern State Management. React Hooks: Modern State Management
React Hooks, introduced in React 16.8, bring state and lifecycle features to functional components. Here, I explore how they work and why they matter.
Why forEach Does Not Wait for async Callbacks. Why
forEachDoes Not Wait forasyncCallbacksSee why forEach() ignores promises returned by async callbacks, then choose sequential for...of or concurrent Promise.all() with clear failure handling.
Class vs. Functional Components in React. Class vs. Functional Components in React
Class and functional components are key to React development. In this article I explore differences, advantages, and when to use each in modern React apps.
Advanced Techniques for Responsive Web Design. Advanced Techniques for Responsive Web Design
Discover advanced responsive web design techniques with CSS Grid,
clamp(), container queries, and JS enhancements for performance‑optimised, adaptive sites.
Custom _app and Custom _document in Next.js. Custom
_appand Custom_documentin Next.jsCustom
_appand_documentin the Next.js Pages Router: shared layout, application setup and server‑rendered HTML, with historical Next.js 8 examples.
The JavaScript Event Loop: A Beginner’s Guide. The JavaScript Event Loop: A Beginner's Guide
The JavaScript event loop manages asynchronous tasks in a single‑threaded environment. I explore how it works with the call stack, task queue, and microtasks.