The React Playbook
One long path, not a pile of tips. It starts at an empty folder and ends with a React app in production — and every stop along the way is a real decision you have to make. Read it in order, or jump to the phase you’re fighting with right now.
Start from #1 →Foundation
4 articlesSet the project up so it can grow without collapsing under its own weight.
0112 min readStarting a New React Project in 2026-2027: The Stack I Keep Coming Back To
Every new React project starts with the same question: which tools? After years of watching teams assemble mismatched libraries that fight each other, I stopped choosing independently. This is the coherent stack I now use by default — and why.
0211 min readTypeScript in React: Patterns That Actually Matter
Not a TypeScript tutorial. A focused look at the patterns that eliminate real production bugs in React + TanStack apps — typed API layers, discriminated unions for async state, route param inference, and generic components done right.
0312 min readCode Structure in React: The FSD Version I Actually Use
Flat folders are fine until every feature starts touching routes, queries, forms, permissions, and UI state. Here's the React structure I use when a TanStack app grows past the simple stage without turning FSD into folder theater.
0412 min readError Handling in React: What Users Should See When Things Break
Error handling is not a catch block sprinkled at the end. In a React + TanStack app, it is a product decision: what fails locally, what fails at the route level, what can retry, and what the user needs to do next.
Data & Navigation
4 articlesMove data through the app and let people move through the app.
0513 min readReact Data Fetching with TanStack Query: The Patterns That Keep Apps Calm
TanStack Query is not just a better useEffect. It is the server-state layer of your React app. The hard part is not fetching data — it is designing keys, freshness, invalidation, pagination, and prefetching so the UI stays predictable.
0613 min readRouting with TanStack Router: Treat the URL Like Application State
Routing is not just rendering a page for a path. In serious React apps, the URL carries product state: filters, tabs, pagination, selected records, redirects, and preload decisions. TanStack Router makes that state typed instead of hopeful.
0713 min readReact State Management with Reatom: When useState Stops Being Enough
Most React state doesn't need a library. Then one workflow grows into drafts, derived values, undo, optimistic steps, and cross-component coordination. This is where I reach for Reatom instead of turning TanStack Query into a client-state store.
0811 min readImmutable Data in React: The Rule I Stopped Arguing About
A module I was told not to over-engineer grew into an entire application. Most of what let it survive was boring — and one of the most boring rules was never mutating state in place. Here's how immutability actually works in React, when I reach for Immer, and why I skip Immutable.js.
UI & Forms
4 articlesThe parts users actually touch — styling, components, forms, and charts.
0913 min readStyling React in 2026: How I Actually Choose
Styling is the most argued-about, least reasoned-about decision in a React app. The real question isn't which library looks nicest in a demo — it's which one survives a growing codebase. Here's how I weigh Tailwind, CSS Modules, CSS-in-JS, and zero-runtime options, and where each one earns its place.
1013 min readReact UI Libraries: Who Owns the Styling Decides Everything
Picking a component library feels like picking buttons and modals. It isn't. You're deciding who controls your styling — you or the library — and that single choice shapes how much you'll fight it for years. Here's how I weigh MUI, Ant Design, Radix, and shadcn/ui.
1113 min readForms in React: Where TanStack Form Earns Its Place
Forms are where clean React apps quietly fall apart. Conditional fields, async validation, a submit button that has to know about everything — it adds up fast. Here's why I reach for TanStack Form, where it beats Formik and React Hook Form, and where a form library still can't save you.
1212 min readCharts in React: Who Renders the Pixels
"Just use a chart library" hides a real decision. Do you want charts handed to you, or do you want to control every pixel? That choice — and your data size — decides between Recharts, visx, and raw D3. Here's how I pick, and where charts actually get hard.
Infrastructure
6 articlesAuth, a backend, rendering, a database, hosting, and tests that keep it honest.
1313 min readAuthentication in React: Buy It, and Where the Line Really Is
Auth looks like a login form and turns out to be an architecture decision. Where do tokens live, who guards a route, what happens when the session dies mid-request? Here's why I buy auth instead of building it, and the parts that stay yours no matter what you buy.
1413 min readThe Backend a React Developer Actually Needs to Understand
You don't have to write the server. But the shape of the contract between your React app and the backend — REST, tRPC, or a BFF — decides how much of your frontend is real work versus glue code. Here's the part of the backend that's actually yours.
1513 min readSSR in React: What TanStack Start Actually Changes
Server rendering isn't a performance checkbox — it collapses the wall between frontend and backend into one framework. Here's what SSR really buys you, why the client/server line stops being where you think it is, and where TanStack Start fits next to Next.js.
1612 min readDatabases for React Developers: What Serverless Actually Changed
"Add a database" used to mean provisioning a server, managing connections, and running migrations by hand. Serverless quietly rewrote that whole sentence. Here's what a React developer actually needs to know about picking and using a database in 2026.
1711 min readHosting a React App in 2026: From DevOps Project to Git Push
Deployment used to be a separate discipline — servers, pipelines, a person whose whole job was getting code to production. Modern platforms compressed it into a git push. Here's how to think about hosting a React app, what the tiers actually mean, and where the magic stops.
1813 min readTesting React Without Drowning: What Each Test Actually Buys You
Most testing advice is either "100% coverage" zealotry or "tests slow you down" cynicism. Both miss the point. A test is a trade — effort now for confidence later — and the skill is knowing which trades pay off. Here's how I test React without a brittle suite that everyone hates.
Advanced Topics
7 articlesThe features that turn a project into a product — and the ones people underestimate.
1913 min readAI in a React App: Past the Demo, Into the Product
The demos are intoxicating — a chat box, a streaming response, thirty lines of code and it feels like magic. Then you try to ship it and the hard parts show up all at once: streaming UI, structured output you can trust, state that doesn't fight you. Here's what building AI into a real React app actually takes.
2012 min readReal-Time React: When the Server Has Something to Say
Every data pattern so far has the client asking and the server answering. Real-time inverts that — the server speaks first, and your UI has to be listening. The mistake is treating that live connection as a second, parallel source of truth. Here's how I keep a React app live without ending up with two states that disagree.
2112 min readInternationalization Isn't Translation: What Actually Breaks
Everyone thinks i18n means swapping English strings for a dictionary lookup. That's the 10% that's easy. The 90% is formatting, pluralization, text that changes direction, and language data you can't afford to ship all at once. Here's what internationalizing a React app actually involves once you get past the word 'translation'.
2212 min readPayments in React: The Client Never Decides You Got Paid
Taking a payment looks like a form submission and is nothing like one. The card number is radioactive, the confirmation is asynchronous, and the one thing your React app must never do is believe it got paid because a callback said so. Here's where the real line sits between the browser, your server, and Stripe.
2311 min readTime in React: The Bugs That Only Show Up at 2 AM
Dates look like the most boring data type in your app. They are also the source of the subtlest, most embarrassing bugs — the meeting that shows an hour off, the 'today' that's tomorrow in Tokyo, the date that shifts a day every time you save it. Here's how I stop time from quietly breaking a React app.
2412 min readFile Upload in React: The Input Is Easy, the File Is Not
An upload looks like a one-liner — a file input, a POST, done. Then someone uploads a two-gigabyte video on hotel wifi and the whole illusion collapses. The hard part was never the input. It's moving a large, unreliable blob of bytes from a browser to somewhere it can live. Here's how I actually handle it.
2511 min readSending Email from a React App: A Backend Problem in Disguise
"Just send them an email" is one of those sentences that sounds like a five-minute task and turns into a week. The React part is trivial. The hard part is that email is a deceptively deep backend system with deliverability, templates, and reputation — and none of it belongs in your frontend. Here's where the real work actually is.
Ecosystem
5 articlesWhere React goes beyond the browser — design, docs, desktop, mobile, and 3D.
2611 min readDesign Prototyping for React: Where the Architecture Actually Starts
Most engineers treat the Figma file as a picture to reproduce. That framing is why so many handoffs go badly. A good design isn't a picture — it's the first draft of your component architecture, and the decisions that decide whether your codebase stays sane are made before a single line of React is written.
2711 min readDocumenting Components: The Only Docs That Don't Rot
Every team writes component docs the same way — a wiki page, a screenshot, a table of props — and every team watches them go stale within a month. The problem isn't discipline. It's that the docs live in a different place than the code. The fix is docs that can't drift because they're generated from the component itself.
2811 min readReact on the Desktop: When a Window Beats a Tab
The pitch is irresistible — ship your React app as a real desktop program, same code, native icon in the dock. Electron and Tauri both promise it. But the interesting question isn't 'can I,' it's 'what do I actually gain that a browser tab can't give me,' and the answer decides which tool, and whether you should bother at all.
2912 min readReact Native: What 'Learn Once, Write Anywhere' Really Means
React Native's promise gets misremembered as 'write once, run everywhere' — and that misremembering is why so many web developers hit a wall. The knowledge transfers; the code and the instincts often don't. Here's the honest line between what your React experience buys you on mobile and what it quietly doesn't.
3011 min readReact in 3D: When <div> Becomes <mesh>
The idea that React could render a 3D scene sounds like a stretch — React is for interfaces, 3D is a different universe. Except it isn't a stretch at all, and understanding why closes out this whole series with its central idea: React was never really about the DOM. This is where that finally becomes obvious.
Architecture at Scale
5 articlesThe boundaries, patterns, and decisions that decide whether an app stays readable as it grows.
3111 min readThe shared/ Folder Is Not a Place, It's a Promise
Every codebase grows a shared/ folder, and given enough time every shared/ folder becomes a junk drawer. Not because the team got lazy — because the folder was never given a rule. Here's why it rots, and how to keep it boring.
3210 min readBarrel Files: The Import You Love and the Bundle You Hate
A barrel file makes imports look beautiful and can quietly drag half your app into a bundle that only needed one function. Here's what index.ts actually does, when it earns its place, and when it's a trap wearing a clean interface.
3312 min readThe Direction of the Arrows: Dependencies Are Your Real Architecture
You can draw whatever folder diagram you like. The honest picture of your app is which module imports which — the direction of the arrows. Get that wrong and no folder structure will save you.
3412 min readHow Big Should a Component Be? Composition, Decomposition, and Handing Over Dependencies
Split a component too early and you get a maze of tiny files. Split too late and you get a 600-line monster. The real question isn't size — it's who owns which dependency, and whether the component reaches for it or is handed it.
3511 min readIs Container vs Presentational Dead? What Survived the Hooks Era
The pattern that taught a generation to split 'smart' from 'dumb' components got quietly declared obsolete when hooks arrived. It wasn't. The folder convention died. The idea underneath it is more useful now than ever — including in Server Components.
Component Patterns
4 articlesThe reusable-component techniques that decide whether what you build gets used or quietly rewritten.
3611 min readCompound Components: Designing an API, Not Just a Component
The moment a component grows past a handful of props, you're not writing a component anymore — you're designing an API. Compound components are how you keep that API flexible without drowning it in configuration props.
3711 min readHeadless Components: Give Away the Behavior, Keep None of the Markup
The most reusable UI code I write renders nothing at all. Headless components, render props, and hooks-as-API are three names for one idea: separate what a component does from how it looks — and hand over the behavior without a single opinion about the markup.
3811 min readChanging a Component Everyone Uses: Deprecation, Codemods, and No Big-Bang Rewrites
Writing the new version of a shared component is the easy 10%. The other 90% is the hundred call sites that already depend on the old one — and the fear of touching them. Here's how I change a component everyone uses without a month-long rewrite that breaks the day it lands.
3912 min readKeeping a UI Kit Updated Across Apps: Versioning, Contracts, and Trust
A shared UI kit does not fail because the button component is hard to write. It fails when five applications are afraid to upgrade it. Versioning, contract tests, release channels, and migration paths are what turn a component library from a dependency into a product people can trust.
State & Data at Scale
3 articlesWhere state actually lives, what persists, and how to keep one coherent copy of the truth.
4011 min readlocalStorage Is Not State: Persistence, Hydration, and Tabs That Fight Each Other
localStorage looks like a global variable that survives a refresh. That framing is the bug. Treat it as a persistence layer that mirrors your state — not as the state itself — and the hydration mismatches, stale tabs, and schema breakages mostly disappear.
4112 min readServer State Is a Cache: Normalization, Duplicates, and Invalidation You Can Trust
The same customer shows up in a list, a detail page, and a header badge — three copies of one truth you don't own. Edit one and the others go stale. Here's when to normalize server data into one source of truth, when the query cache is enough, and how to invalidate without nuking everything.
4211 min readOptimistic UI: Updating Before the Server Says Yes
Optimistic UI is a small lie: you show the result before the server confirms it. Done right, the app feels instant. Done wrong, the UI quietly tells the user something that never happened. The difference is entirely in how you roll back.