Writing

Blog

Writing on system design, React, web performance, and the craft of building software.

Chapter 1: Introduction

1 article•0% completed

Why React Hooks Exist: The Problem They Were Built to Solve

Part 1•3 min read•Class components had three problems that grew worse over time: logic scattered across lifecycle methods, stateful logic impossible to reuse, and components that were hard to understand. Hooks are the answer to all three.

Chapter 2: Use State

3 articles•0% completed

useState Under the Hood: How React Stores State in a Linked List

Part 1•4 min read•useState is not magic. React stores every hook call in a linked list on the fiber node, and that is why the rules of hooks are not arbitrary — they are load-bearing. Here is exactly how it works.

Stale Closures in React: Why useState Gives You the Wrong Value

Part 2•1 min read•A stale closure captures state from a previous render and never lets go. It is the most common useState bug, and understanding why it happens makes it impossible to miss.

React State Batching and Functional Updates: What Changes in React 18

Part 3•1 min read•React 18 batches all state updates by default — not just inside event handlers. That changes how you reason about multiple setState calls, and functional updates are the safe way to depend on previous state.

Chapter 3: Use Reducer

2 articles•0% completed

useReducer Deep Dive: Actions, Dispatch, and the Reducer Pattern

Part 1•3 min read•useReducer is not just useState with extra steps. It enforces an explicit event-action model that makes state transitions auditable, testable, and easy to reason about as complexity grows.

useState vs useReducer: How to Choose and When to Switch

Part 2•2 min read•useState is fine until it is not. The signal to switch to useReducer is not the number of state values — it is when the next state depends on multiple previous values, or when the same state can change for more than one reason.

Chapter 4: Use Effect

3 articles•0% completed

useEffect Is Not a Lifecycle Hook: The Synchronization Model

Part 1•3 min read•Every mental model based on componentDidMount, componentDidUpdate, and componentWillUnmount leads to bugs with useEffect. The correct model is synchronization — effect runs to sync your component with the outside world.

The useEffect Dependency Array: Every Rule and Why It Exists

Part 2•1 min read•The dependency array is not a performance optimization — it is a correctness contract. Every value the effect reads from the component scope must be in it. Here is what breaks when that contract is violated and how the linter enforces it.

useEffect Cleanup and Race Conditions: Why Your Fetch Is Broken

Part 3•3 min read•Every effect that starts an async operation needs a cleanup function to cancel it. Without one, the component can set state after it unmounts, or an older request can overwrite a newer one. Here is the exact pattern that fixes it.

Chapter 5: Use Layout Effect

1 article•0% completed

useLayoutEffect vs useEffect: When Paint Timing Actually Matters

Part 1•3 min read•useEffect fires after the browser paints. useLayoutEffect fires before it. For most things, the difference is invisible — but for DOM measurement and position-dependent UI, it is the difference between a flicker and a clean render.

Chapter 6: Memoization

2 articles•0% completed

useMemo Under the Hood: What Gets Memoized and What Does Not

Part 1•1 min read•useMemo caches a computed value between renders. It does not make your app faster for free — it trades computation cost for memory cost and comparison work. Knowing when that trade makes sense separates useful memoization from cargo-culting.

useCallback: Stable References, Memoized Children, and When Not to Bother

Part 2•1 min read•useCallback returns a stable function reference between renders. By itself that does nothing for performance — it only pays off when combined with React.memo on a child that receives the function as a prop. Here is the complete picture.

Chapter 7: Use Ref

2 articles•0% completed

useRef Beyond DOM Nodes: Mutable Values Without Re-renders

Part 1•3 min read•useRef returns a mutable container whose .current property you can change without triggering a re-render. DOM access is just one use case. The other — storing mutable values that should persist across renders but not drive the UI — is equally important.

useImperativeHandle: Exposing a Custom API from a Child Component

Part 2•3 min read•forwardRef passes a ref to a child so the parent can access its DOM node directly. useImperativeHandle goes further — it lets the child decide exactly what the parent can do with that ref, hiding internal implementation details.

Chapter 8: Use Context

2 articles•0% completed

useContext Internals: How Context Propagates Without Props

Part 1•3 min read•useContext reads the nearest matching Provider value above it in the tree and subscribes to changes. Understanding how React finds that value, and what triggers re-renders, is the foundation for using context correctly.

Context Performance Pitfalls: Why Every Consumer Re-renders and How to Fix It

Part 2•3 min read•Every component that calls useContext re-renders whenever the context value changes — even if it only uses one small slice of that value. This is the most common context performance bug, and there are three patterns to fix it.

Chapter 9: Use Sync External Store

1 article•0% completed

useSyncExternalStore: The Right Way to Subscribe to External State

Part 1•3 min read•Before useSyncExternalStore, subscribing to an external store in a React component caused tearing — different parts of the tree reading different versions of the store in the same render. This hook exists to fix that, and it is the right foundation for any custom store.

Chapter 10: Concurrent Hooks

2 articles•0% completed

useTransition: Keeping React Responsive During Expensive State Updates

Part 1•2 min read•useTransition marks a state update as non-urgent so React can interrupt it if something more important comes in. That is the key to UIs that stay responsive while heavy work is running — without debouncing, throttling, or moving logic off-thread.

useDeferredValue: Deferring Renders Without Blocking Input

Part 2•3 min read•useDeferredValue gives you a stale copy of a value that React can update lazily. It is the consumer-side equivalent of useTransition — useful when you cannot wrap the state update itself but still need to deprioritize an expensive downstream render.

Chapter 11: Use Id

1 article•0% completed

useId: Stable IDs That Survive SSR Hydration

Part 1•2 min read•Generating IDs with Math.random() or a counter breaks SSR because the server and client produce different values, causing a hydration mismatch. useId solves this by generating an ID that is deterministic on both sides.

Chapter 12: React 19 Hooks

3 articles•0% completed

useActionState: Form Actions and Progressive Enhancement in React 19

Part 1•1 min read•useActionState connects a form action function to component state so you get pending, error, and result states for free — without manually tracking them with useState. It is built for Server Actions but works with any async function.

useOptimistic: Instant UI Updates Before the Server Responds

Part 2•1 min read•useOptimistic lets you show an optimistic version of state immediately while the real async operation is still in flight. When it resolves, React reconciles. If it fails, React rolls back. No manual undo logic required.

The use() Hook: Reading Promises and Context Inside Components

Part 3•1 min read•use() is not a hook in the traditional sense — it can be called conditionally. It reads a Promise or a Context value and integrates with Suspense so the component suspends until the value is ready. It replaces a class of patterns that required awkward effect-based workarounds.

Chapter 13: Custom Hooks

2 articles•0% completed

Building Custom Hooks: The Rules, the Pattern, and What Not to Abstract

Part 1•1 min read•A custom hook is just a function whose name starts with use and that calls other hooks. The naming convention matters — it is what makes the linter enforce hook rules inside it. The harder question is when abstraction into a custom hook is actually worth it.

Custom Hook Patterns: useDebounce, useLocalStorage, usePrevious, and More

Part 2•1 min read•The best custom hooks solve one well-scoped problem and hide the lifecycle complexity that comes with it. Walking through four production-grade patterns shows what that looks like in practice and what separates a good hook from a leaky abstraction.