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

Oct 18, 2024

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 🚀