#505 – May 11, 2025
And pitfalls of ad-hoc data fetching
Robust data fetching architecture for complex apps
6 minutes by Trevor I. Lasn
Trevor discusses the common pitfalls of ad-hoc data fetching in React applications, such as duplicate requests, race conditions, and stale data. He proposes a scalable layered of data architecture approach which separates concerns, making applications easier to maintain and debug while eliminating many common data fetching problems that typically compound as applications grow.
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.
How to add a color scheme toggle in React Router
4 minutes by Sergio Xalambrí
Sergio explains how to implement a color scheme toggle in React Router applications that allows users to choose between light, dark, or system preferences. Rather than using localStorage he recommends using cookies to store user preferences. Sergio's tutorial provides detailed code examples for creating typed cookies with validation, implementing the toggle through a Form component, and applying the chosen scheme by attaching classes to the HTML element.
A custom React hook for watching media query changes
4 minutes by Chris Ferdinandi
Chris presents a custom React hook called `useWatchMatchMedia` that detects media query changes and automatically triggers re-renders. The hook uses `useState` and `useEffect` to monitor media query matches, set the initial state, and listen for changes. Chris includes a practical example of using this hook in a component that displays either a video animation or a static image based on the user's "prefers-reduced-motion" setting, responding dynamically to changes in this preference.
Functional HTML
21 minutes by Dan Abramov
Dan reimagines HTML as a fully programmable, composable system by building it from first principles. He develops a comprehensive architecture featuring Server Tags, Client Tags, and a rich JSON-based interchange format that preserves object data structures. This approach creates full-stack components that encapsulate both client and server behavior while maintaining clean separation of concerns.
When you might need to override the defaults in TanStack Query
3 minutes by Kola Afode
TanStack Query offers aggressive defaults that work well in most cases, but sometimes overriding them makes sense. Kola discusses two common override scenarios: disabling query retries for tests or specific error codes (like 404, 403, 401) to improve efficiency, and adjusting query caching parameters for data that rarely changes or when working with rate-limited APIs.
And the most popular article from the last issue was: