#501 – April 13, 2025
Deep dive into real-world case studies from React engineering teams
Advanced React in the Wild
41 minutes by Addy Osmani, Hassan Djirdeh
Addy and Hassan dive deep in exploring real-world case studies from engineering teams that have successfully optimized React and Next.js applications. These projects demonstrate significant gains in Core Web Vitals metrics, balanced rendering approaches, and improved user experiences through strategic technical decisions. They collectively reveal the importance of performance profiling, strategic server/client rendering balance, efficient caching strategies, and accessibility-focused development in creating fast, maintainable, and user-friendly web applications.
Tests are dead. Meticulous AI is here.
sponsored by Meticulous
Meticulous automatically creates and maintains an exhaustive e2e UI test suite that covers every corner of your application – with no developer intervention required whatsoever. Dropbox, Lattice, Bilt Rewards and hundreds of organisations rely on Meticulous for their frontend testing. It is built from the Chromium level up with a deterministic scheduling engine – making it the only testing tool that eliminates flakes.
Under the Hood of React Query: A Deep Dive into Its Internal Mechanics
6 minutes by Rohith Janardhan
This article explores the internal workings of TanStack React Query, a popular library for managing server state in React applications. Rohith breaks down the core implementation, explaining how it uses the Observer pattern to allow components to subscribe to query state changes. Key features examined include the query object structure, deduplication of fetch requests, automatic garbage collection of unused queries, and window focus refetching. A simplified implementation is provided with code snippets to demonstrate how these powerful features work under the hood.
Build the Linkedin "Add experience" form
2 minutes by Corina Udrescu
This challenge invites you to build a dynamic form similar to LinkedIn's "Add experience" feature using TypeScript, react-hook-form, and zod for validation. You will create a form with required fields like job title, company, and start date, plus conditional logic for end dates based on whether the job is current.
React Reconciliation: The Hidden Engine Behind Your Components
11 minutes by Christian Ekrem
In this article Christian explores React's reconciliation algorithm, which is the process by which React efficiently updates the DOM to match component trees. He explains how React determines component identity primarily through element type and position in the tree, with keys providing a way to override position-based comparison. Christian demonstrates how understanding these mechanisms reveals why certain patterns are effective for performance optimization, including proper component composition, state colocation, and avoiding inline component definitions.
React for Two Computers
about 1 hour by Dan Abramov
In this post Dan explores the conceptual foundations of React Server Components by framing them as splitting computations across both time and space. He presents server components as a way to split code between "Early" (server) and "Late" (client) worlds, allowing different parts of a component tree to execute in different environments. His post also explains how tags in JSX represent "potential function calls" that can be executed in different places and times, creating a unified programming model that spans across network boundaries.
And the most popular article from the last issue was: