React Foundations

The fundamentals that separate React developers who ship from React developers who fight their own codebase. This series doesn't hold your hand through JSX syntax — it starts where most tutorials stop: data fetching patterns, component composition, state architecture, rendering behavior, and the decisions that compound over time. Every article leads with the wrong assumption most developers carry, then corrects it with a working example and a decision rule you can apply today.

Alex Chen

•

20 posts

Posts in this series

Sort by:

How to Build a Component Library with Proper Versioning

Building a component library is easy. Building one that other developers can depend on — with proper exports, peer dependencies, versioning, and a changelog — is not. This is the complete setup that gets it right from day one.

Strict Mode in React 18: What It Breaks and Why That's Good

React 18's strict mode double-invokes effects by design. Most developers disable it when it starts breaking things. That's the wrong response — the break is a signal, not a false alarm. Here's what strict mode actually does and why every bug it surfaces is a real bug.

How to Manage Global State Without a Library

You don't always need Zustand or Redux. Before reaching for a state management library, understand what the platform gives you — useSyncExternalStore is React's built-in primitive for subscribing to any external store. Here's how to use it to build a lightweight global state system from scratch.

The Render Props Pattern Is Not Dead — Here's Where It Still Wins

Hooks replaced most render props use cases in 2019. Most — not all. There are three scenarios where render props still outperform hooks and compound components. Here's what they are and how to implement them cleanly.

Why React.memo Doesn't Always Help (And When It Does)

Wrapping a component in React.memo and finding it still re-renders on every parent render is one of the most common React performance frustrations. The fix is almost always the same — and it has nothing to do with memo itself.

Building a Fully Accessible Modal from Scratch in React

Most modal implementations look right but fail accessibility checks. Focus trapping, scroll locking, ARIA attributes, and keyboard handling — each one is a trap for the unwary. Here's a complete implementation that gets all four right, including the iOS Safari scroll lock bug nobody warns you about.

React Reconciliation Explained: What the Diffing Algorithm Actually Does

Most React developers have a working mental model of the virtual DOM. Most of those mental models are imprecise enough to cause real bugs. Here's what React's diffing algorithm actually does — and the two heuristics that explain why key, memo, and component type all matter.

How to Lazy-Load Components the Right Way (And Avoid the Trap)

React.lazy and Suspense are the right tools for code splitting in React — but lazy-loading the wrong things creates waterfalls that hurt more than they help. Here's the granularity rule that makes code splitting actually improve performance.

Compound Components: The Design Pattern That Changed How I Build UIs

Most component APIs grow boolean props until they're unreadable. Compound components are the pattern that stops that from happening — by making the component's structure part of its API. Here's how it works and when to reach for it.

TypeScript Generics in React: The Patterns You'll Use Every Week

TypeScript generics in React feel intimidating right up until the moment they don't. The syntax is the hard part — the patterns themselves are straightforward once you see them three or four times. Here are the five you'll reach for every week.

Showing 1 - 10 of 20 posts