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.
Articles
React, page 3 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, whilst 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‑seven articles collected together for you below.
Class vs. Functional Components in React. 
The React Context API: When to Use It and When Not to. The React Context API: When to Use It and When Not to
The React Context API explained with Provider and Consumer examples, prop drilling trade‑offs, shared app state, and when context is not the right answer.
Leveraging JavaScript Frameworks for Efficient Development. Leveraging JavaScript Frameworks for Efficient Development
JavaScript frameworks streamline development with reusable components, state management, and optimised rendering. Here, I compare React, Vue.js, and Angular.
Integrating CMSes with HTML, CSS, and JavaScript. Integrating CMSes with HTML, CSS, and JavaScript
Integrating CMSes with HTML, CSS, and JavaScript enables dynamic, flexible content management. Here, I explore best practices, performance tips, and SEO.
React Error Boundaries Explained. React Error Boundaries Explained
React error boundaries explained with fallback UI, componentDidCatch(), getDerivedStateFromError(), logging, placement strategy, and what they cannot catch.
React Portals Explained. React Portals Explained
React Portals explained with modals, overlays, and tooltips, including DOM placement, event bubbling, accessibility concerns, and when portals help.
React Fragments Explained. React Fragments Explained
React Fragments explained through empty tags, keyed fragments, semantic markup, unnecessary wrapper divs, grouped list output, and layout side effects.
JavaScript Essentials for Freelance Web Developers. JavaScript Essentials for Freelance Web Developers
This guide explores JavaScript essentials for freelance web developers. It covers fundamental concepts, practical examples, and tips for mastering JavaScript.
Rendering Lists in React and Why Keys Matter. Rendering Lists in React and Why Keys Matter
Render lists in React with stable keys, avoiding index and random‑key bugs, preserving component state correctly through filtering, sorting, and reordering.
Controlled vs. Uncontrolled Components in React. Controlled vs. Uncontrolled Components in React
Controlled vs. uncontrolled components in React explained with form examples, refs, validation trade‑offs, and why each approach suits different jobs.
Lifting State up in React. Lifting State up in React
Lifting state up in React explained clearly, including shared state, single sources of truth, child callbacks, and when moving state higher helps.