web

28 posts

Posts in this series

Sort by:

CSS Cascade Layers: The Feature That Finally Fixes Specificity Wars

Specificity conflicts with third-party CSS, utility classes, and component styles are one of the most frustrating parts of scaling a CSS codebase. @layer doesn't just help — it fundamentally changes how the cascade works. Here's the mental model and the setup that makes it click.

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.

Showing 1 - 10 of 28 posts