This Week In React #223: TanStack, React Router, React-Scan, Bun, Next.js, INP, Storybook | State of RN, CSS, Observables...

#react #reactnative

Hi everyone!

This week we have:

React: A good mix of content and many community articles, but no major announcements.
React Native: The 2024 survey results are out, infra libraries now support RN 0.78, and Nitro Views have been released!
Other: Several TC39 proposals are progressing—my favorites are import defer and RegExp.escape().

I'm trying something new, let me know if you like the intro to be split by section like above.

Check our partner StrapiConf - 🇫🇷 Paris - 13 May. Strapi is a popular headless CMS in the React ecosystem, and like me, it's French 🥐! Get a 10% discount with code "TWIR".

💡 Subscribe to the official newsletter to receive an email every week!

💸 Sponsor

React-admin: The Open-Source Framework for B2B apps

React-admin is the go-to framework for building B2B apps—because let’s be real, nobody dreams of writing yet another CRUD screen. Here’s why thousands of developers swear by it:

🔌 Backend Agnostic: Connects to any API—because commitment issues aren't just for relationships.
🧩 200+ Building Blocks: More pre-built components than your project has TODOs.
🛠 Complete Customization: If you don’t like it, change it. We won’t take it personally (*wipes away tears*).
💻 Great Developer Experience: Makes you feel like a coding rockstar, minus the groupies (unless you count rubber ducks).

With 7 years in production and 1 million daily users, react-admin is a sure bet. So why don’t you try it out yourself?

⚛️ React

💸 AI coding benchmarks for backends
👀 React Explorer - Turns your React site into an interactive visualization
📖 Deno docs - Build an app with TanStack and Deno
🗓 React-Summit - 🇳🇱 Amsterdam - 13 & 17 June. CFP is closing soon on March 2! Last chance to submit your talks for a top-tier tech audience.
📜 How Preply improved INP on a Next.js application (without React Server Components and App Router): A deep dive into this Core Web Vital metrics and various things Preply tried to improve it, using a data-driven approach.
📜 Avoiding Server Component Waterfall Fetching with React 19 cache(): You can use React.cache() to deduplicate requests and preload data as soon as possible to avoid request waterfalls. This works but creates an implicit coupling. I’d prefer a more explicit model, hoisting all requests and passing promises down as props.
📜 Armin's TanStack Router Notes: Documents challenges encountered while trying to determine whether Sentry could adopt TanStack Router.
📜 There’s no such thing as an isomorphic layout effect: A possible interpretation of the story behind the useIsomorphicLayoutEffect pattern.
📜 Debouncing in React Router v7: Interesting technique relying on clientLoader
📜 How to Download a file from a React Router route: With/without dynamic params, with/without JS.
📜 Shadcn Registry: A Better Way to Manage Your UI Components
📜 Throwing vs. Returning Redirects in React Router
📜 Functional programming in React
📜 React Performance: Common Problems & Their Solutions
📜 Making Next.js Apps Faster: A Practical Performance Guide Beyond Next.js
📜 Progressive forms with server actions
📦 Create TanStack Router App 0.4 - Add-ons, SolidJS support, MCP support
📦 React Scan 0.2 - Slowdown notifications, explanations and pre-generated prompts to fix them
📦 React Scan Chrome Extension
📦 Storybook 8.6 - Storybook Test improvements
📦 React Admin 5.6 - Black & white theme
📦 Bun 1.2.3 - Built-in React support with hot-reloading, React init template
🔨 Laravel Starter Kits: Include a new official React 19 + Inertia 2 starter kit.
🔨 Remix Epic Stack update - Passkeys, Helmets, and more!
🎥 Jack Herrington - Fix Your Slow React App With React-Scan
🎥 Syntax - Should You Use Signals with React?
🎥 Cosden - Combining React Query With Server Components (Next.js)

💸 Sponsor

Tests are dead - Meticulous is here

Meticulous creates and maintains an exhaustive suite of e2e ui tests with zero developer effort.

Dropbox, Bilt Rewards, Lattice and hundreds of engineering organizations rely on Meticulous for their frontend testing.

This quote from the CTO of Traba sums the product up best: "Meticulous has fundamentally changed the way we approach frontend testing in our web applications, fully eliminating the need to write any frontend tests. The software gives us confidence that every change will be completely regression tested, allowing us to ship more quickly with significantly fewer bugs in our code."

This post from our CTO, who formerly led a large engineering group at Palantir, sets out the context of why exhaustive testing can double engineering velocity.

📱 React-Native

State of React Native 2024 - Survey Results

The survey results are out and I’m super proud that among all the React Native resources, this newsletter got the highest positivity score. Thank you ❤️!

I can’t summarize the whole survey, but here are a few things I discovered:

61% of RN devs came from React (web)
iOS and Android remain the most common RN targets, but the Web also has a 22% market share
Libraries with the most positive sentiment are: Reanimated, TanStack Query, Zustand, React Navigation, Expo Router, Skia.
No clear winner in terms of styling. Devs like the built-in APIs such as StyleSheet and inline styles.