Vite Steps Up for React Builds
Vite’s reputation for speed is well earned, largely because it leans on esbuild. Created by Evan You, it’s not tied to Vue, and a detailed guide from NARUHODO walks through wiring it up for React projects. For developers tired of slow dev servers and rebuild cycles, it’s worth a look.
Structuring a React App for Scale
Tania Rascia offers an opinionated take on project organization that emphasizes clarity. Highlights include the use of @ import aliases, which simplify imports and play nicely with monorepo setups. The guide also draws a clear line between global components and reusable ones, as well as between views and pages. A possible refinement is splitting components into three tiers: library components (design-focused, no global state), project components (business logic and state), and pages (routing).
React 18: What’s Still Missing
Benny Powers isn’t shy about calling out React’s continuing lack of support for <web-components />. It’s a fair point — web components excel in certain areas, and React does too. Closer integration would benefit both, but for now, developers are left to bridge the gap themselves.
How React Won Over Its Critics
There’s some irony in the timing: a podcast featuring Shawn Wang and Pete Hunt explores React’s rise to dominance. The central thesis, as the show puts it: “How React overcame its haters: by listening.” A useful historical counterpoint to the criticisms in the link above.
Compound Components: A Flexible Pattern
Ichoku Chinonso covers the compound component pattern, which is ideal for building interfaces from smaller, specialized parts — think Tabs composed of TabBar, Tab, and TabPanels. The model offers flexibility, logical imports, and more predictable usage. The pattern has been around for a while; Ryan Florence discussed it in 2017, and Kent Dodds documented it with hooks. Its conceptual roots may go deeper into computer science, but the practical benefits for React apps are clear.
Debugging the Rehydration Nightmare
Josh Comeau tackles a bug that has plagued many developers: React appearing to break the DOM during hydration. Symptoms range from properly nested JSX showing up in the wrong parent elements to the browser acting as if tags were never closed. The culprit is a mismatch between server-rendered HTML and client-side rendering. The fix involves ensuring both render the same structure — and there’s some simple trickery to get there, which Comeau explains in detail.
