Writing

Blog

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

Chapter 1: Introduction

1 article•0% completed

State Management at Scale: What It Actually Means

Part 1•5 min read•State management at scale is not about how many users you have or how many components are in your tree. It is about whether you can still move fast six months from now.

Chapter 2: Anti Patterns

2 articles•0% completed

The Deriving State Anti-Pattern

Part 1•4 min read•Calculating derived values inside useEffect is one of the most common React mistakes. Here is why it causes extra renders, and the simpler fix that belongs right in the render function.

Redundant State and When to Use Refs

Part 2•5 min read•Storing the same data in two pieces of state, or using useState for values that should never trigger a re-render -- these are subtle bugs waiting to happen. Here is how to spot them and fix them.

Chapter 3: State Modeling

2 articles•0% completed

Incidental vs. Accidental Complexity

Part 1•4 min read•Not all complexity is the same. Incidental complexity is the cost of the problem itself -- you cannot eliminate it. Accidental complexity is the cost of your implementation choices -- and you absolutely can.

Modeling Application State with Diagrams

Part 2•5 min read•Entity relationship diagrams, sequence diagrams, and state diagrams are not documentation exercises -- they are thinking tools that reveal the logic your code has to implement before you write a single line.

Chapter 4: Optimizing State

2 articles•0% completed

Best Practices for State Optimization in React

Part 1•6 min read•Events as the source of truth, pure functions, immutability, framework-independent logic -- five principles that keep your state management sane as a codebase grows.

Finite States and Type States in React

Part 2•7 min read•Managing four boolean flags to represent loading, error, success, and idle is a trap. Finite states and discriminated unions collapse invalid combinations before they can happen.

Chapter 5: Formdata Complex State

4 articles•0% completed

Managing Form Data with useActionState

Part 1•7 min read•Managing each form field with its own useState hook adds up fast. The native FormData object and React's useActionState give you a cleaner path -- less state, less boilerplate, and server-side validation that actually works.

useReducer for Complex State Logic

Part 2•8 min read•When a component's state updates start depending on each other, useState turns into a maintenance problem. useReducer centralizes the logic, and combining it with context gives you a lightweight global store without Redux.

Context, the use() Hook, and State Machines

Part 3•1 min read•The use() hook lets you pass context directly instead of wrapping everything in providers. Pair that with a state machine mindset and the way you think about shared state in React shifts entirely.

Beyond Linear Steps: Graph-Based Multi-Step Forms

Part 4•1 min read•A linear array of steps breaks the moment a form needs branching, optional steps, or loops. Modelling the flow as a directed graph is the fix — and it simplifies the code instead of adding complexity.

Chapter 6: External Libraries

2 articles•0% completed

Store vs. Atomic State Libraries

Part 1•6 min read•When built-in React patterns stop scaling, you reach for a library. Redux Toolkit and Zustand give you centralized stores. Jotai and Recoil give you atoms. Here is how to think about which model fits which problem.

XState Store: Event-Driven State in React

Part 2•5 min read•XState Store brings the event-driven model to React state without the full weight of state machines. You define transitions declaratively, select slices to avoid unnecessary re-renders, and dispatch events instead of setting values.

Chapter 7: Data Normalization

2 articles•0% completed

Flattening Nested Data Structures

Part 1•5 min read•Deeply nested state means updating a single item touches the entire tree. Data normalization -- moving from nested arrays to flat maps keyed by ID -- is the fix, and it makes your state updates faster and your code easier to follow.

Undo and Redo with an Event-Driven Reducer

Part 2•6 min read•Undo and redo are hard to bolt on after the fact. When you model state as a sequence of events instead of snapshots, replaying and rewinding the event stack becomes the natural implementation.

Chapter 8: Event Driven

1 article•0% completed

Avoiding Cascading useEffect Hooks

Part 1•9 min read•One useEffect triggers a state update that triggers another useEffect that triggers another. By the time you trace the bug, you have lost an afternoon. An event-driven reducer collapses the chain into a single, traceable flow.

Chapter 9: Advanced Techniques

4 articles•0% completed

URL as State: Managing Form State with Query Parameters

Part 1•1 min read•State stored only in React is lost on refresh, cannot be bookmarked, and breaks the back button. Syncing form state to the URL with nuqs gives you all three for free — and makes your state explicit by default.

Server State Management with TanStack Query

Part 2•1 min read•useEffect-based data fetching piles on: loading flags, error states, cache invalidation, retry logic. TanStack Query handles all of it with a clean API — and the mental model shift from 'fetching' to 'syncing' changes how you think about server state.

useSyncExternalStore: The Right Way to Subscribe to External State

Part 3•1 min read•Manually subscribing to external stores with useEffect leads to race conditions and hydration mismatches in Next.js. useSyncExternalStore is the correct primitive — it is built for exactly this, and it makes the subscription logic half the lines.

Testing Reducers vs. Testing Components

Part 4•1 min read•Testing UI components is brittle — the test breaks every time the markup changes even when the logic is fine. Pull the logic into pure reducers and test those directly. The tests stay stable, and the coverage that matters actually holds.

Chapter 10: Url State

1 article•0% completed

URL as State: Shareable, Bookmarkable, Back-Button-Aware

Part 1•4 min read•useState vanishes on refresh. The URL does not. Using query parameters as the source of truth gives you shareable links, browser history, and zero state loss on navigation -- all without a database.

Chapter 11: Data Fetching

2 articles•0% completed

Data Fetching Without the useEffect Dance

Part 1•5 min read•The useState + useEffect pattern for fetching data is 15 lines of incidental complexity around 1 line of actual work. TanStack Query replaces all of it with a single hook call and adds caching, retries, and deduplication for free.

useSyncExternalStore: Subscribing to External State

Part 2•4 min read•When state lives outside React -- browser APIs, third-party stores, real-time feeds -- useEffect subscriptions can produce race conditions and hydration errors. useSyncExternalStore solves both with one hook.

Chapter 12: Testing

1 article•0% completed

Testing Application Logic with Pure Reducers

Part 1•5 min read•UI tests are valuable but fragile -- they break when the DOM changes, not when logic breaks. A pure reducer is a plain function. Testing it means calling a function with input and asserting the output. No renders, no selectors, no clicking.