This Week In React #211 : React Router, Next.js, Rslib, React-Scan, Screens, Edge-to-Edge, RN 0.77 RC, Legend List, Rapier...

Hi everyone!

It's another great week for React with exciting releases, notably React Router 7 and Vite 6. TanStack nearly steals the show!

The React Native ecosystem is not left behind with 0.77 in RC, Legend List, Screens... and a quite exciting Wasm-based innovation.

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

💸 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

React Router 7.0

As planned, Remix features have been brought to React Router, and the full-stack framework features are now powered by a Vite plugin. There are also new features related to routing, type safety, and route pre-rendering. Remix v2 users are invited to upgrade to React Router v7: it should be easy after turning on the future flags. Now that this great milestone has been completed and the team can fully focus on the next wave of innovation, we can't wait to hear the next Michael Jackson Remix.

💸 PostHog - How we built mobile replay (and why it took so long)
👀 React Core PR - Add moveBefore Experiment: The React team is looking to support the upcoming DOM API Node.moveBefore() in the reconciler after Chromium announced its intent to ship it. Unlike insertBefore(), this new API can preserve the state of the moved DOM elements such as iframes and video players.
👀 Next.js PR - CSS inlining: New experimental.inlineCss option might improve your site’s First Contentful Paint score, in particular for sites using atomic CSS like Tailwind.
📜 The AutoScrollList Component: This interactive article implementing a chat UI shows how useRef + useEffect can be simplified by a simple ref callback. Also shares a little-known but important lesson: “Don't use memoization for correctness, use it only for perf!”
📜 Why TanStack Start is Ditching Adapters: TanStack Start is coming, and Tanner can fully focus on its innovative features. Instead of creating a long list of host-specific adapters, he saved time and delegated this annoying task to Vinxi, Nitro, and H3.
📜 Loading Data with TanStack Router: A 2-part series using TanStack Router with/without React-Query. Both can be used together. Prefetching queries in loaders can avoid waterfalls.
📜 Thoughts on What RSC Means for SPAs: Daishi outlines the possible benefits of RSCs for regular SPAs. This speaks directly to my next project: integrate RSCs into Docusaurus, a React static site generator.
📜 Existential React questions and a perfect Modal Dialog: Great article starting from a simple dialog component, incrementally adding more requirements until reaching the perfect abstraction.
📜 The anatomy of a React Island: A pragmatic approach to incrementally adopt React in existing codebases.
📜 The use cache Directive Deep Dive in Next.js: A well-presented article about the new Next.js 15 features, including an interactive demo.
📜 Feature-based React Architecture: Good component composition patterns can help decouple components by feature without introducing request waterfalls.
📜 Astro Patterns - React Love: 2 interactive examples using React Context with Astro.
📜 Currency handling in React
📦 Vite 6.0: An important release for React framework authors looking to support multiple module graphs (client, SSR, RSC) through the new Environment API.
📦 Ariakit 0.4.14 - Combobox / Select performance improvements: Apparently, using too many useSyncExternalStore hooks (in list items) can cause overhead, and “merging” them into a single one improved performance.
📦 React Aria - November 20 releases - Disclosure, ToggleButtonGroup, Menu improvements
📦 Preact 10.25 - Stricter element types, improve reconciliation for unkeyed elements
📦 Rslib 0.1 – Intuitive library development tool, including support for React libs
📦 Meteor.js 3.1 - Node 22, Express 5, MongoDB driver 6, core and DX improvements
🎥 Alem Tuzlak - React Router v7 Is Here - Should You Upgrade Now?
🎥 Dev Leonardo - TanStack Start: A Full-Stack React Framework but Client-First
🎥 Theo - JavaScript runs on literally everything now
🎙️ Syntax 850 - Manage State in JavaScript Like a Pro!

💸 Sponsor

Unleash Document Superpowers in Your React Apps!

Attention React enthusiasts: PSPDFKit is now Nutrient! 👋 We may have a new name, but our Web SDK is the same best in class choice you've come to rely on for viewing, annotating, and editing PDFs and other document types.

🏎️ Get started quickly with a free trial and extensive documentation
⏱️ Save time developing by leveraging the slick built-in UI and Baseline-UI, our new design system
🛠️ Leverage extensive APIs for processing and customization
🆘 Make use of our support and solution engineering team to get help from domain experts

We've got you covered on all platforms from mobile to backend.

Want to work on challenging problems and have impact on hundreds of applications? Check out our open positions such as Senior Frontend Developer.

📱 React-Native

Introducing React Native Screens 4.0.0

The library used by React Navigation and Expo Router was released a few weeks ago, and the promised release blog post is finally online, presenting the highlights visually through various videos: