This Week In React 205

Next.js, useActionState, Headless, d&d, Web Components, RSCs, Next-Safe-Action, Remix, Zustand, NumberFlow, Atomic-CSS-DevTools, ESLint, BottomSheet, edge-to-edge, Ignite, Metro, ES2025, Node.js, Type

Hi everyone!

This week we have a major Next.js RC release dropping just before Next.js Conf, many diverse releases, and great interactive blog posts.

The React Native world is quite active too, with many great releases from infrastructure packages you probably rely on. I heard v0.76 stable is around the corner!

Node.js 23 is out, and we have 4 new features ready to be standardized in ES2025!

🙏 The newsletter isn't growing as fast as it used to. I'd really appreciate it if you'd recommend it to your friends and colleagues. You can just forward them this email (or the online version link), and they'll decide if it's worth subscribing to. Thanks!

💡 Check this newsletter on Twitter - visual format 🎨

To support me:

• 😘 Recommend the newsletter to your friends: it really helps!

• 💸 Sponsor the newsletter

• 🧵 Retweet the latest Twitter thread

💸 Sponsor​

AG Charts: The best React Charts in the world.

AG Charts is a canvas-based charting library from AG Grid. Initially built to power AG Grids Integrated Charts, AG Charts now has over 1 million npm downloads/month:

• 🆓 Free: Access a range of chart types, including bar, line, scatter, area, and more – completely free, forever.

• 🚀 Fast: Using batch drawing and advanced change detection alongside the offscreen canvas API, AG Charts can easily render hundreds of thousands of data points out of the box

• 📊 Financial Charts: Build interactive financial charts featuring advanced annotations with just 3 lines of code.

• 🏢 Enterprise Features: Upgrade to Enterprise to unlock advanced capabilities such as animations, context menus, crosshairs and more. Try it for free, no trial license required.

Learn More: www.ag-grid.com/charts

⚛️ React​

Next.js 15 RC 2

Months after the first RC, another big one drops just before Next.js Conf, including:

• @next/codemod upgrade: Easily upgrade to the latest Next.js and React versions.

• Turbopack for development: Performance improvements and Next.js 15 stability target.

• Async Request APIs (Breaking): Incremental step towards a simplified rendering and caching model.

• Server Actions: Enhanced security with unguessable endpoints and removal of unused actions.

• Static Indicator: New visual indicator shows static routes during development.

• next/form: Enhance HTML forms with client-side navigation.

• next.config.ts: TypeScript support for the Next.js configuration file.

• instrumentation.js (Stable): New API for server lifecycle observability.

• Development and Build improvements: Improved build times and Faster Fast Refresh.

• Self-hosting: More control over Cache-Control headers.

• ESLint 9

• 💸 Product for Engineers - The magic of small engineering teams

• 👀 React Core PR - Re-land non-blocking prerendering: The prerendering of Suspense siblings (blocking the v19 release) has been reverted due to breakages and is now re-introduced.

• 👀 Next.js PR draft - experimental Request Interceptors: This new feature could complement middleware and address some of its limitations with different tradeoffs.

• 👀 react-beautiful-dnd is now deprecated: Atlassian is now focusing on building “pragmatic drag and drop”.

• 🗓️ React Summit US - 🇺🇸 New-York - 19 & 22 December - Hurry and grab your ticket to the conference as prices are about to go up ! And don’t forget your discount with code “TWIR”.

• 📜 The True Nature of useActionState: An interactive article that points out the API design similarities between useReducer and useActionState. It refactors an in-memory todo app using useReducer to use persistent/async storage. React 19 makes it convenient to turn an existing reducer async and move it to the server.

• 📜 Headless, boneless, skinless & lifeless UI: Adam Argyle attempts to classify different React UI abstraction libraries more precisely than just “headless”.

• 📜 Drag to Select: This awesome interactive article explains how to implement a complex item selection UX in React, including various edge cases to consider such as user scrolling while dragging.

• 📜 A Future for Web Components Without Shadow DOM: Jenna (RadixUI) shares interesting insight on Web Components from the perspective of a React design system dev. I thought Declarative Shadow DOM was required for SSR, but customized built-ins and custom attributes (proposal) might be better alternatives.

• 📜 The Big "Server Waterfall Problem" with RSCs: Kent explains it’s still possible to have waterfalls when using RSCs, but server-side waterfalls are less problematic than client-side waterfalls. The tension between query co-location and props drilling is not going away with RSCs.

• 📜 How to prevent re-render in React with Tailwind CSS: Adding data attributes at the top of the DOM tree could help reduce statefulness in deeply nested components. An interesting technique, often used for theming, not only for Tailwind users.

• 📜 How to Use Next-Safe-Action for Your Server Actions: Shows how to enhance Next.js Server Actions with Zod params validation, an access control middleware, normalized error management and React-Query integration.

• 📦 Zustand 5.0 - No new feature, but twice smaller

• 📦 Number Flow - A React component to transition, format, and localize numbers

• 📦 Atomic-CSS-DevTools: This Chrome extension adds a dev tool panel for debugging atomic CSS rules as if they were not atomic. Works with Tailwind, StyleX, Panda…

• 📦 Remix 2.13 - Stabilizes lazyRouteDiscovery, data, singleFetch, flushSync, viewTransition

• 📦 React Router 6.27 - Stable dataStrategy, patchRoutesOnNavigation, flushSync, viewTransition

• 📦 ESLint-Plugin-React-Hooks 5.0 - Support for ESLint 9

• 📦 Astro 4.16 - Concurrent Builds

• 📦 Just-Styled - Dead simple CSS-in-JS library for React 19+

• 🎥 Alem Tuzlak - How React Router v7 became type-safe!

• 🎥 Sam Selikoff - Building a Reusable Component that Animates on Scroll

• 🎙️ Syntax 833 - Next Gen Fullstack React with TanStack

💸 Sponsor​

WorkOS: Modern Identity Platform for B2B SaaS

With WorkOS you can start selling to enterprises with just a few lines of code.

🔐 WorkOS AuthKit supports a complete user management solution along with SSO, SCIM, RBAC, & FGA.

🏗️ The APIs are flexible, easy-to-use, and modular. Pick and choose what you need and integrate in minutes.

🎨 Design and user experience are everything. From the quality of our documentation to how your users onboard, we remove all the unnecessary complexity for developers.

✨ AuthKit is free up to 1 million MAUs and includes bot protection, MFA, RBAC, & more.

🤝 WorkOS is trusted by hundreds of leading startups like Perplexity, Vercel, & Webflow.

Get started with WorkOS 🚀

📱 React-Native​

• 💸 Expo Starter Kit - Fully Featured Starter Kit to Ship Mobile Apps Faster for iOS, Android, and Web

• 🐦 Expo DOM Components on macOS demo: This could offer a way for Electron/Tauri desktop apps (WebView) to incrementally migrate to native in the future.

• 👀 React Native PR - Fix cursor issue in iOS controlled components (NewArch): The major text input issue Dan reported last week has been fixed for the new architecture.

• 👀 React Native Docs - Pure C++ Turbo Native Modules

• 🗓️ RNLConf - 🇬🇧 London - 14 & 15 November - Get a 10% discount with code “TWIR”. Alex Hunt, Charlotte Isambert, Cedric Van Putten and Charlie Cheever will give a talk !

• 📜 Introducing the OMH Cloud Storage Module

• 📜 Build a daily workout tracker with Clerk, Convex, and Expo

• 📜 Manage notifications in a WebView with React Native

• 📦 react-native-edge-to-edge - Lets Android app content flow beneath system bars: Important infrastructure library supported by Expo, particularly useful for Android 15+.

• 📦 Bottom Sheet 5.0 - RNGH v2, web support, dynamic sizing, FlashList integratio,

• 📦 Metro 0.81 - scheduled for RN 0.76, fileSystemLookup, onClose

• 📦 Ignite 10.0 - Infinite Red's battle-tested React Native starter: This new version comes with Expo prebuild, dark mode, Expo Router, MKKV, i18next, RNTL and more.

• 📦 react-native-bootsplash 6.2 - Kotlin rewrite, better handling of translucent bars

• 📦 react-native-permissions 5.0 - iOS 18 limited contact permission, permission escalation, drop older versions

• 📦 react-native-fast-confetti - Based on Skia Atlas

• 🎥 Expo - Universal App Tutorial Series - How to build your first React Native app

• 🎥 Catalin Miron - Custom Animated tabs

• 🎥 Simon Grimm - Is this the Expo Competitor? (One)

🔀 Other​

• 👀 TC39 - Updates from the 104th meeting: 14 proposals progressed, 4 of them reached stage 4 and ready to land in ES2025!

• 👀 Companion Windows: Explainer from Google working on a web feature that could be the missing piece for MPAs, allowing them to preserve the state of dynamic widgets while navigating

• 📜 Introducing Express v5: A New Era for Node.js Framework: v5.0 has been published a few weeks ago, and we now have an official blog post with a list of breaking changes, also explaining why v5 is still not tagged as latest.

• 📦 Node.js 23.0 - require(ESM) enabled by default

• 📦 TypeScript 5.7 Beta - New checks, es2024 lib/target, relative path rewriting, perf

• 📦 srvx - Universal Server API based on web platform standards, works with Deno, Bun Node.js

🤭 Fun

See ya! 👋