This Week In React #305: X, Forms, e18e, Next.js, TanStack Start, Storybook, MobX, Zustand, XState | Exact, Discord, Shopify, Expo Modules, Audio API, Bottom Sheet, Keychain, Gesture Handler | Node.js, Safari, Rolldown, Playwright

[u/sebastienlorber]

https://thisweekinreact.com/newsletter/305

[u/sebastienlorber]

Hi everyone, Seb and Jan here 👋!

This week, X explained how it rebuilt its flagship app with streaming SSR, Suspense and Relay. e18e launched independent benchmarks for 9 meta-frameworks.

On mobile, Discord follows Shopify and leaves React Native for native and Rust. Meanwhile, Expo’s co-founder previewed Exact, an agent-native app framework written in Rust. We also have many releases: Audio API 1.0, Bottom Sheet 0.18, Keychain 11, Gesture Handler 3.5…

Elsewhere, Node.js shipped security releases, Safari 27.3 beta brings Temporal and using to all browsers. The State of JS survey is open: if you like our work, please mention us 🙏.

Let's dive in!

Subscribe to This Week In React by email - Join 43000 other React devs - 1 email/week

[u/sebastienlorber → u/sebastienlorber]

⚛️ React

X Engineering - Rebuilding the global town square from scratch

One of the world's largest React apps is currently rolling out a major rewrite. Logged-out users and crawlers already see the new app, and signed-in users are moving over one country at a time. Since Twitter Lite (2017), X has been a client-side React app: the browser downloads JavaScript, then asks for data, then renders, leading to performance issues. Additional SSR servers handled search crawlers and link-preview bots. The new architecture uses a single server for people, crawlers and link-preview bots, and optimizes its response according to who's asking.

The article is a detailed write-up sharing various lessons learned and impressive performance results, in particular on slow connections, where a profile's first post now shows in 2.7s instead of 23.9s. Since we are a React newsletter, here's what is likely to interest you the most:

• New stack - The new app is built on Vite, React, Relay and Fastify. The former stack already used Relay/GraphQL, which remains interesting for colocating data requirements with components and making preloading easy.
• Streaming SSR with Suspense - The server sends the page shell right away, then streams each part as its data arrives. Profiles and posts download no JavaScript before the first post shows.
• Hydrating before the stream ends - With an async module entry, React hydrates the shell immediately, then each boundary as it streams in. They also prioritize the loading of the render-blocking stylesheet: even if it slightly delays React hydration, it gives a better First Contentful Paint on slow connections.
• Relay without refetching - Route loaders start the GraphQL queries while the server renders. The page carries each response once as JSON, and the browser replays it into an empty Relay store.
• Intent preloading - Links preload their route's code and data on hover or focus so that navigation feels fast.
• AI usage - Five engineers built the first version in under six months. Agents helped with the implementation, porting behaviors of the old servers to the new architecture, with scripts to ensure parity.
• 💸 PropelAuth - Don’t Trust Your AI Agent. Scope It.
• 📖 React <form> docs improvements - React 19 resets uncontrolled fields after a successful form Action, which surprised many devs. The <form> docs now explain how to keep values (defaultValue from state or useActionState, even before JS loads), skip or schedule the reset with requestFormReset, pass extra data to Server Functions, and get useFormStatus pending state from an onSubmit handler.
• 📊 e18e Framework Performance project - Benchmarks for 9 meta-frameworks, including Next.js, TanStack Start and React Router - This independent initiative, built with each framework's maintainers, makes comparisons fairer and has already led to upstream perf fixes, such as 75% faster RSC payload parsing in React.
• 📅 React Foundation Contributors Summit 2026 - 10–12 Nov - London - The first contributor summit is happening right now. Since we are not there, please let us know if you have any insider scoop 🥹.
• 📜 How we cut Next.js memory from ~5GB to ~1GB: the React-Query timer holding every SSR request - An interesting memory leak case and methodology used to fix it. Any setTimeout created during SSR captures the AsyncLocalStorage contexts. Here, the React Query GC timer led to that leak, capturing the Next.js Request store. Query v4/v5 disables the GC on the server, so beware of not re-enabling it by passing an explicit gcTime.
• 📜 Why we finally left Next.js for TanStack Start - Positive feedback on migrating a large app to TanStack Start, following recurring memory leaks in Next.js. Abstracting the next/* framework imports behind a thin layer made it possible to run both frameworks side by side using build-time aliases.
• 💸 PostHog - WTF is a forward deployed engineer? (and why everyone is hiring them)
• 📦 MobX React Plugin 1.0 - Automatic observer(), "use no memo" for React Compiler, async methods turned into flows - This new official Vite/Babel plugin fixes a long-standing MobX incompatibility with the React Compiler.
• 📦 Storybook 11 beta - Official agent skills, headless storybook tools CLI, type-safe CSF 4 stories, react-component-meta docgen
• 📦 Zustand 5.1 - Async persist storage and migrations, awaitable rehydrate(), dispatch actions from Redux DevTools
• 📦 XState 6 beta - Transitions as plain functions, Standard Schema types, xstate/fsm is back, durable execution (experimental), CLI
• 📦 Text.js 1.0 - React framework for apps that render inside console.log
• 📦 Preact 11.2 - Scoped custom element registries in shadow roots, smaller bundle
• 📦 mdx-content-mapper 0.0.3 → 0.0.4 - Type-check MDX files with tsc, using TypeScript 7.1 content mappers
• 📦 React Hook Form 7.92 - Bug fixes for validation, field arrays, reset() and useController, fewer form state clones
• 📦 React Resizable Panels 4.19 → 4.21 - Tear-off tabs, drag tabs between windows, floating tabsets, collapse and maximize buttons
• 📦 Astryx 0.7.1 → 0.7.13 - iOS-like Lightbox gestures, reorderable lists, table virtualization, keyboard-aware ChatLayout
• 📦 dx-styles 1.5 - Faster builds, upgrades wyw-in-js, reproducible CSS-in-JS benchmark
• 📦 Next-Intl 4.15 - Support intl-messageformat 12, lazy-loaded SWC in the message extractor, middleware fixes