📨 #223: TanStack, React Router, React-Scan, Bun, Next.js, INP, Storybook | State of RN, Nitro Views, Reanimated, Gesture Handler, Screens, AWS-LC, QuickPush, Metro | TC39, CSS, TypeScript, Observables...
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 deferandRegExp.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".
As always, thanks for supporting us on your favorite platform:
- 🦋 Bluesky
- ✖️ X / Twitter
Ne manque pas le prochain email !
💸 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
useIsomorphicLayoutEffectpattern. - 📜 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)
Ne manque pas le prochain email !
💸 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.
- 💸 PostHog - How we built mobile replay (and why it took so long)
- 📜 How to build Custom Tabs with Expo Router UI
- 🗓️ App.js Conf - 🇵🇱 Kraków - 28-30 May. Don't miss your chance to grab your tickets and benefit from an exclusive 15% discount using the code "TWIR".
- 📦 Nitro 0.23 - Nitro Views: A new convenient and perfomant way to integrate native Swift / Kotlin views into React Native apps. Requires 0.78+ and New Arch.
- 📦 Reanimated 3.17 - Edge-to-Edge, LAB color space, animate
boxShadow: Support for RN 0.78 coming in 3.17.1 soon. - 📦 React Native Boost - A powerful Babel plugin that automatically optimizes React Native apps: Apply safe AST micro-optimizations to boost performance, like using faster native Text/View components instead of the RN JS wrappers.
- 📦 AWS-LibCrypto: RN bindings to Rust AWS lib, with FIPS certification from the US government.
- 📦 Screens 4.8 - Android 16 KB page size
- 📦 Screens 4.9 - RN 0.78
- 📦 Gesture Handler 2.24 - RN 0.78, Android 16 KB page size support
- 📦 QuickPush - A lightweight macOS menu bar utility for quickly testing Expo push notifications
- 📦 Metro 0.81.2 - Package exports to clearly define public API surface, perf, experimental flags
- 🔨 VSCode Extension for React Native Directory: Find and install the right RND packages directly from your IDE.
- 🎥 Simon Grimm - Your own iOS Widget in 12 Minutes
- 🎙️ RNR 322 - Building React Native Libraries With Builder Bob
- 🎙️ Rocket Ship 61 - Shipping Successful AI Apps with Your Average Tech Bro
🔀 Other
- 👀 Chromium - Intent to ship Observables API in Chrome 135
- 🎮 Anchoreum - A game for learning CSS Anchor Positioning: I didn’t expect Anchor Positioning to be as powerful. It’s in Interop 2025 and likely to land in all browsers this year, so now is a great time to learn!
- 📜 TC39 Advances 3 Proposals to Stage 4: RegExp Escaping, Float16Array, and Redeclarable global eval vars
- 📜 Extreme Server-Side Rendering: Keeping the connection alive, a server can stream updates continuously to the client. The author implemented a Flappy Bird game relying on this technique, without any JS.
- 📜 Testing Web Authentication (WebAuthn): TIL you can leverage Chrome DevTools features in Playwright.
- 📜 Speeding up the JavaScript ecosystem - Rust and JavaScript Plugins
- 📜 A Million Little Secrets - Deconstructing the “Whimsical Animations” landing page
- 📜 Subverting control with weak references
- 🎥 TypeScript types can run DOOM: Just 🤯.
🤭 Fun
See ya! 👋
Ne manque pas le prochain email !
