Detecting Breakpoints in React Using Chakra UI
Use Chakra UI breakpoints in React with useBreakpoint and ThemeProvider, including responsive interface choices and custom breakpoint configuration.
Articles
React, page 2 of 3
React is a declarative and flexible JavaScript library used for building user interfaces and applications. It allows developers to compose application UIs from reusable components, while providing an accessible route into more complex front‑end development.
Below you will find a subset of articles from my blog specifically about React and related React SPA to Next.js migration. This is an area I have worked with for many years, and it has been a regular subject in my writing. There are forty‑six articles collected together for you below.
Detecting Breakpoints in React Using Chakra UI. 
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.
What is Front‑End Development? What is Front‑End Development?
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 further with sensible maxWidth, quality settings, native lazy loading, GraphQL image data, and avoiding oversized assets 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 while 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.
UseReducer in React. useReducerin React`UseReducer` in React explained clearly, including reducer functions, action objects, complex state updates, and when it is a better fit than `useState`.
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.
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.