Skip to main content

πŸ“¨ #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

Β· 13 min read
SΓ©bastien Lorber
Newsletter creator - Docusaurus maintainer
Jan Jaworski
React Native Developer

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!

As always, thanks for supporting us on your favorite platform:

Don't miss the next email!

    πŸ’Έ Sponsor​

    Agents didn’t clear your plate. They piled on reviews

    Agents didn’t clear your plate. They piled on reviews.

    Your agents write PRs in minutes, then eat your afternoon in review. When did β€˜saving time’ start to mean babysitting agents’ work? Meticulous runs thousands of e2e UI tests autonomously, covering every user flow, edge case, role and permutation.

    What you get, with no developer effort:

    • Near-exhaustive coverage on every test run
    • No test creation
    • No maintenance (seriously)
    • Zero flakes (built on a deterministic browser)

    Engineers at Notion save 5 hours per week and feel like they work twice as fast. Check it out, so you can too.

    βš›οΈ React​

    Rebuilding the global town square from scratch

    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.

    Don't miss the next email!

      πŸ’Έ Sponsor​

      Mobile Dev Plugin for Codex and Claude

      Mobile Dev Plugin for Codex and Claude

      Meet Mobile Dev: full mobile tooling inside Codex, Claude, and your favorite ADE.

      Launch and interact with iOS & Android simulators, emulators, and physical devices right in your agent UI. Stream logs, debug issues, and monitor CPU, memory & FPS. Guided performance recordings reveal bottlenecks and highlight potential fixes. Your agent picks the right tools, investigates root causes, and implements fixes using real performance data. It can then re-run tests to verify the improvements. You can also inspect your app’s UI, highlight elements, and prompt your agent to make changes with precise visual context.

      Try Mobile Dev in the ChatGPT Plugin Store.

      πŸ“± React-Native​

      A preview of Exact

      Exact - Agent-native app framework in Rust

      Expo co-founder Charlie Cheever shared a pre-alpha preview of Exact. It's a cross-platform app framework written in Rust, designed for agents to write, run and test apps. You describe the UI in 𝕏 Contract, a new declarative language, and write the logic in TypeScript or Rust. Models have never seen Contract, but it's small and constrained on purpose, so agents learn it quickly. Exact promises near-instant startup, smooth scrolling, edits applied in about 100ms, and the same test running unchanged on web, mobile and desktop.

      Related resources:

      🧡 Discord follows Shopify, leaving React Native for native and Rust

      Another big app is moving away from React Native! Discord is dropping both Electron and React Native, extending its shared Rust core. On desktop, the UI moves to GPUI. On mobile, the Rust core now drives native views.

      It comes only two months after Shopify left React Native, but the approach is quite different. Shopify went back to separate Swift and Kotlin apps, betting that agents make writing the code twice affordable. This week, they explained how they rebuilt the app in 12 weeks with Helix, Reflex and remote dev. With Reflex, a single behavior test suite runs against headless ViewModels, without a simulator, to keep iOS and Android in sync.

      Related resources:

      πŸ”€ Other​

      🀭 Fun​

      I wake up, another company leaves React Native

      See ya! πŸ‘‹


      Don't miss the next email!