Frontend
Hooks, rendering, composition, and the boundaries that keep product UIs operable.
React · Next.js · TypeScript · 7 published · 23 in the review queue. Written by Al Beltran.
Frontend
The React Compiler Is a Purity Contract, Not a Speed Hack
React Compiler only pays off if render stays pure. Memo soup is not the same contract. Here is what I change in components before I trust automatic memoization.
Frontend
Next.js `'use cache'` Is a Commit, Not a Faster Fetch
Cache Components in Next.js look like a performance flag. They are a freshness contract: what is cached, who invalidates it, and what the user is allowed to see stale.
Interview Lab
React Interview Questions, With the Reasoning
A compact React interview set: hooks, rendering, state, and architecture — with what interviewers are actually scoring.
Frontend
A Mental Model for React Hooks That Survives Production
Treat hooks as subscriptions to render, not lifecycle methods with new names. The model that prevents stale state and mystery effects.
Container queries, :has(), and nested CSS removed a generation of JavaScript measuring hacks. The remaining work is restraint: not every layout needs a new primitive.
Client-rendered apps solved a 2015 shipping problem. They also shipped empty shells and waterfalls. Server Components are a boundary tool, not a rewrite religion.
When the tab can run serious GPU work, the architecture question is not 'can we?' It is 'should this run next to the user's passwords, and what is the fallback?'
Planned notes stay unpublished until they are written and reviewed. Titles are listed so the topic map is complete. They are not pages.
useEffect Dependencies: Fix the Warning Without Hiding the Bug
Why the exhaustive-deps warning exists, when a ref is the right escape, and when you actually wanted an event handler.
troubleshooting · intermediate · medium priority
React State vs Refs: What Should Trigger a Render
A comparison of useState and useRef for values that must, or must not, update the UI.
comparison · intermediate · medium priority
Composition Over Prop Drilling in Product UIs
How to pass UI slots instead of threading ten props through a card that does not care.
architecture · intermediate · medium priority
The key Prop Is a Reconciliation Contract
What React does with keys, why index keys break forms, and how lists should identify rows.
educational · beginner · medium priority
When memo, useMemo, and useCallback Earn Their Keep
Measure first. Then memoize the expensive child or the unstable callback that actually invalidates a list.
problem-solving · intermediate · medium priority
React Server Component Boundaries That Stay Honest
Where the server tree ends, why "use client" at the root undoes the model, and how to keep data close to markup.
architecture · intermediate · medium priority
Error Boundaries That Fail a Widget, Not the Magazine
How to isolate a broken widget, what boundaries cannot catch, and what to show the user.
problem-solving · intermediate · medium priority
Controlled vs Uncontrolled Forms in React
When to own every keystroke, when the DOM can hold the value, and how validation should sit on the boundary.
comparison · intermediate · medium priority
Context, Props, or a Store: Pick the Smallest Bus
A decision guide for passing data in React without inventing a global store for a tooltip.
architecture · intermediate · medium priority
Concurrent React Features You Can Use Without a Rewrite
Transitions, deferred values, and what actually changes for a product engineer.
educational · intermediate · medium priority
What to Test in a React UI (and What to Leave Alone)
Test the user-visible contract. Skip implementation details that break on every rename.
educational · intermediate · medium priority
Typing React Component Props Without Ceremony
Props, children, discriminated variants, and the types that keep a design system honest.
educational · intermediate · medium priority
When List Virtualization Is Worth the Complexity
Virtualize long, stable lists. Do not virtualize a 20-row settings page.
problem-solving · intermediate · medium priority
Suspense for Data Fetching: The Boundary Is the Feature
How fallback trees work, where they leak layout, and when a plain loading flag is clearer.
architecture · intermediate · medium priority
Designing Custom Hooks That Do One Job
Extract a hook when two components share behavior, not when you want a shorter file.
architecture · intermediate · medium priority
Effects vs Events: Stop Putting Clicks in useEffect
User actions belong in handlers. Effects synchronize with external systems.
educational · intermediate · medium priority
Accessible Interactive Widgets in React
Focus, keyboard, names, and the dialog patterns that fail first in a custom UI.
educational · intermediate · medium priority
React Bundle Size: Split the Route, Not the Atom
Where dynamic import helps, where it adds waterfalls, and how to read a bundle report.
problem-solving · intermediate · medium priority
State Machines for UI That Has More Than Two Modes
When a boolean soup should become explicit states, even without a library.
architecture · intermediate · medium priority
Stale Closures in React, Diagnosed
The interval, the subscription, and the handler that saw last week's props.
troubleshooting · intermediate · medium priority
Portals and Overlays Without Trapping Focus in the Wrong Tree
When to portal a modal, how stacking contexts fight you, and what to restore on close.
educational · intermediate · medium priority
Strict Mode Double Rendering Is a Feature. Treat It Like One.
Why development mounts twice, which effects are unsafe, and how to make setup idempotent.
troubleshooting · beginner · medium priority
A Product UI Architecture That Stays Editable
Page, feature, primitive. Keep data fetching near the route and keep primitives dumb.
architecture · senior · medium priority