how we got here, and where state lives now
Frontend & React
How React state management got here and where it is now. I build apps like Clarity Health Project and MetaCaddie, and where state lives decides how they feel to use. These articles trace how the ideas changed.
start here: 2-part series
React state, then and now
All 4 articles
- 7 min readThe ESM Mess: JavaScript's Module System Is Still Broken and Here's WhyES Modules have been the supposed future of JavaScript for nine years. Only 9-27% of the ecosystem has adopted them. What's really going on, and how to survive until the ecosystem commits.
- 5 min readReact Tooling 2024: Stop Using the Wrong Shit20+ React apps built this year. What works, what's a waste of time, and why you're probably overengineering.
- 7 min readStop Using Optional Props: Why Discriminated Unions Make Better React ComponentsOptional props feel flexible until they ship a runtime error to production that TypeScript should have caught at compile time. The pattern that prevents it.
- 9 min readReact State Management & Clean SPA ArchitectureRedux, Zustand, Recoil, Context API. Most React apps use the wrong one for the wrong reasons. What each tool is for, when SSR changes the calculus, and how to pick without a fight.
Common questions
How do I fix ERR_REQUIRE_ESM in a CommonJS project?
Replace the require() call with await import() inside an async function. Everything calling it then has to be async. Do that in enough places and you have started an unplanned, untested partial migration.
Should I migrate my CommonJS Node.js project to ESM?
Not for the sake of it. Migrate when a package you need has gone ESM-only and blocks you. Don't set "type": "module" over scattered untouched CJS files and call that a migration.
How should I set up a new Node.js project with ES Modules?
Set "type": "module" in package.json and use .js extensions, not .mjs. Use a bundler like Vite, esbuild, or Rollup for anything beyond simple scripts. Configure TypeScript with "module": "ESNext" and "moduleResolution": "bundler".
Is a .js file treated as ESM or CommonJS in Node?
It depends on the "type" field in the nearest package.json. .mjs is always ESM and .cjs is always CommonJS. The same .js file can behave differently depending on which directory it lives in.