Articles
React, page 2 of 3
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.
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.
Commenting in JSX. Commenting in JSX
Comment in JSX without breaking React parsing, including curly‑brace block comments, why HTML comments fail, and gotchas around rendered output clearly.
Building Custom Hooks in React. 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.
Using Storybook to Document Front‑End Components. Using Storybook to Document Front‑End Components
How Storybook can document front‑end components, states, edge cases, accessibility checks, and design conversations outside the main application.
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.