This Week In React #237: RSC, TanStack, Storybook | Legacy Arch, Hermes N-API | TC39, Import Maps, Vite, Vitest...

#react #reactnative

Hi everyone!

I thought I was on schedule for today's issue, until I realized that Dan Abramov wrote 4 RSC blog posts this week 😂. We also get great releases, including Storybook, LiveStore, Base UI, and the Lingo Compiler is a quite exciting innovation. The community is still processing last week's Remix awakening with many videos and podcasts commenting on the news.

React Native devs were at App.js last week, where the React Native team unveiled their plan to freeze the Legacy Architecture.

The last TC39 meeting was also quite productive, with 3 proposals progressing to stage 4 among other things. We also got various interesting announcements from the Vite ecosystem.

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

💸 Sponsor

Free AI Code Reviews in IDE - VSCode, Cursor, Windsurf

CodeRabbit is the AI code review platform purpose built to speed up code reviews and improve code quality. Integrating seamlessly into git workflows and existing toolchains, it delivers codebase-aware reviews and supports all programming languages.

Now they are excited to deliver AI code reviews directly in VS Code, Cursor, and Windsurf–letting you and your team (vibe) code with confidence and review while keeping in flow.

Even better: code reviews in the IDE are free! That’s right: line-by-line reviews and one-click fixes, all in your IDE at no cost to you.

Install the extension and start vibe checking your code today!

⚛️ React

Storybook 9

Storybook looks set to become the ultimate component testing tool, integrating with Vitest and Playwright, covering:

Interaction tests: Verify functionality by simulating user behavior
Accessibility tests: Detect, diagnose, and fix WCAG violations
Visual tests: Check for appearance bugs down to the pixel
Coverage reports: Understand which code is tested at a glance
Test widget: Click to run a comprehensive test suite

This release also includes:

48% Leaner: Smaller install with optional docs and test packages
Story generation: Tools to write stories automatically
Tag-based organization: Filter and group stories by tag
Story globals: Set context (theme, viewport, locale) at the story level
Frameworks: Major updates for Svelte, Next.js, React Native, and more!

💸 Product for Engineers - What nobody tells developers about documentation
📖 TanStack docs - Migrate from Next.js
🔐 Next.js CVE-2025-48068 - Low-severity vulnerability in the dev server, fixed in v15.2.2
🗓️ React Advanced London - 🇬🇧 London - 28 Nov & 1 Dec. "It's one of my absolute favourite conferences here." — Lenz Weber-Tronic, Apollo GraphQL. 10% off with code "TWIR".
📜 Progressive JSON: Dan uses various analogies to illustrate the difference between different data streaming strategies. The depth-first strategy - used by JPEG, JSON and HTML - streams the data in order and either delay the parsing or creates an arbitrary cutoff point. The breadth-first strategy streams data out-of-order, replacing nested data with placeholders that can be filled later. React Server Components use the breadth-first strategy. Suspense allows to intentionally reveal the UI, decoupled from data reception. A quite interesting post that also exists in video format.
📜 One Roundtrip Per Navigation: Dan gives a comprehensive overview of the tradeoffs of the main React data fetching patterns. Using Server Components is quite similar to composing many Server Loaders into a single one, giving you the performance and co-location benefits of Relay while using vanilla JS code.
📜 RSC for LISP Developers: The ’use client’ directive is similar to LISP quoting, marking a piece of code as data to be evaluated later.
📜 Why Does RSC Integrate with a Bundler?: Server Components need a way to serialize component modules from the server to the client. It’s technically possible to do so without a bundler, but it’s inefficient.
📜 Search Params Are State: Tanner gives good reason for TanStack Router to associate a search params schema with route definitions. This helps improve type-safety, optimizes re-renders, and prevents schema fragmentation.
📜 The Power in Pragmatism: Libraries from the TanStack ecosystem aren’t tied to any rendering framework, but focus on the core ideas.TanStack Start is a flexible framework that adapts to your needs instead of anticipating them.
📜 useSyncExternalStore: Demystified for Practical React Development: A good overview of one of my favorite hooks, including common mistakes.
📜 Directive prologues and JavaScript dark matter: Gives interesting context on various ways to control how JS is interpreted: JSX pragmas, directives, and magic comments.
💸 Join 1,000+ Developers – Learn full-stack web development in The Road to Next, the course for React devs ready to level up.
📦 Lingo Compiler: A free open-source compiler to automatically translate any React app at build time without touching the source code. It processes the React code AST and translates it automatically with LLMs, and even supports hot module replacement. A great innovation with first-class integrations for Next.js, React Router, Remix, and Vite apps. The demo on X is impressive.
📦 LiveStore Beta: The creator of Prisma introduced a new client-centric state management solution with first-class support for React and Expo. Based on SQLite, event sourcing, and reactivity, it can also sync clients through various providers. The landing page is quite cool to check and explains how it all works.
📦 Base UI 1.0 Beta: The upcoming Radix UI contender is now in beta. This release includes new Menubar, NavigationMenu, and ContextMenu components.
📦 Ink 6.0 - React renderer for CLIs - React 19 support
📦 TanStack Query 4.39 - Backport some v5 APIs to v4
📦 Lexical 0.32 - Extensible text editor framework
🎥 Theo - Remix is ditching React (and I think that's a good thing)
🎥 Alem Tuzlak - Remix.run woke up, did it sleep well?
🎥 Ryan Carniato - The 3 Ways JavaScript Frameworks Render the DOM
🎥 React Miami 2025 Platlist
🎙️ This Month in React - Dan explains RSC. Remix v3? React core team WIP?

💸 Sponsor

Build a working reward flow in minutes — with Dynamo

Building loyalty logic from scratch is a pain — infra setup, reward tracking, event triggers, tier rules… it all adds up.

Dynamo is the loyalty engine built for developers: one API, full control, zero gatekeeping. Get hands-on with real SDKs (React + React Native), clear docs, and a live sandbox to test your own reward flows in minutes — no calls, no credit cards, just code.

→ Get sandbox access now.

📱 React-Native

Freezing the Legacy Architecture

The React Native team officially announced their plan to freeze the ~~Old Arch~~ Legacy Arch, so that they can focus all their efforts on the New Architecture. They’ll keep the Legacy Arch usable through security and critical bug fixes, but don't plan to merge new features. They'll eventually remove it an indefinite future, because keeping it around has a maintenance cost.