React's Reconciliation Algorithm Explained
React's reconciliation algorithm updates the UI by comparing the virtual DOM with the previous state. I explore how it works and why it improves performance.
Articles
React, page 2 of 4
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.
React's Reconciliation Algorithm Explained. 
Component APIs Before React Hooks Settled. Component APIs Before React Hooks Settled
A retrospective on React component APIs before hooks settled, covering render props, higher‑order components, context, classes, and migration judgement.
Understanding Transient Props in styled-components. Understanding Transient Props in
styled-componentsUse transient props in
styled-componentsto keep styling‑only props out of the DOM, clean React output, and support safer component migration work.
Introducing Seeded Randomisation into an SSR Gatsby Project. Introducing Seeded Randomisation into an SSR Gatsby Project
Add seeded randomisation to an SSR Gatsby project, keeping content order deterministic across builds whilst still rotating destination‑style content.
Dynamic Navigation with React Router. Dynamic Navigation with React Router
Why We Use an Empty Dependency Array in React's useEffect Hook. Why We Use an Empty Dependency Array in React's
useEffectHookUnderstand the empty dependency array in React's
useEffect, including after‑commit setup, cleanup, remounts, development checks and reactive dependencies.
Unravelling JavaScript: Commonly Misunderstood Methods and Features. Unravelling JavaScript: Commonly Misunderstood Methods and Features
A tour of commonly misunderstood JavaScript features, from sort(), slice(), splice(), split(), Math.random(), parseInt(), isNaN(), typeof, and more.
JavaScript’s % Operator: Remainder and Modulo. JavaScript's
%Operator: Remainder and ModuloUnderstand JavaScript's remainder operator, how it differs from modulo for negative numbers, and how to wrap array indices safely with TypeScript examples.
Detecting Breakpoints in React Using Chakra UI. Detecting Breakpoints in React Using Chakra UI
Use
useBreakpointValueandChakraProviderin Chakra UI 1.8 to respond to screen sizes in React, with custom breakpoints and server‑rendering caveats.
React vs. Vue vs. Angular. React vs. Vue vs. Angular
Compare React, Vue, and Angular across ecosystem, learning curve, state, templates, team fit, SEO concerns, and how to choose a front‑end framework.
How to Choose a React Developer. How to Choose a React Developer
Hiring a React developer is about more than matching keywords. This guide looks at fundamentals, judgement, and what good front‑end signals look like.
Front‑End Web Development: A Beginner’s Introduction. Front‑End Web Development: A Beginner's Introduction
Front‑end web development explained through HTML, CSS, JavaScript, UI work, browser behaviour, back‑end integration, and what front‑end developers do.
React: Functional, Class, and Pure Components. React: Functional, Class, and Pure Components
Compare React functional, class, and pure components, including reusable component design, presentation boundaries, legacy patterns, and when each fits.
Removing p Tags from Contentful List Items. Removing
pTags from Contentful List ItemsOne of the quirks of rendering Rich Text from Contentful is that list items come wrapped in paragraph <p> tags. Fortunately, this is a simple one to resolve.
Rendering CMS Rich Text Safely in Gatsby and React. Rendering CMS Rich Text Safely in Gatsby and React
Render CMS rich text safely in Gatsby and React with node mapping, link handling, embeds, headings, validation, and failure‑safe fallbacks.
Rendering Contentful Rich Code Snippets in Gatsby. Rendering Contentful Rich Code Snippets in Gatsby
Contentful rich text and Gatsby work well together until code snippets enter the picture. This guide shows how to render inline and block code cleanly.
Optimising gatsby-image Even Further. Optimising
gatsby-imageEven FurtherOptimise gatsby‑image with sensible maxWidth and quality settings, GraphQL image data, and selective use of the native loading attribute in Gatsby.
Use Greater‑Than and Less‑Than Symbols in JSX. Use Greater‑Than and Less‑Than Symbols in JSX
Render greater‑than and less‑than symbols in JSX safely, using strings or HTML entities whilst avoiding parser confusion and awkward React output.