📨 #292: Octane, TanStack, StableRef, Next.js, Canvas UI, Reassure, CSS-in-JS | Workers, SafeAreaView, backgroundImage, WebGPU, VisionCamera, React Navigation, Canvas Kit, Nitro | TC39, Web Vitals, Playwright, Webpack, npm

Hi everyone, Seb and Jan here 👋!

This week we have an interesting React challenger, keeping its mental model but compiled ahead of time. Also various major announcements from the TanStack side.

On the mobile side, we have interesting RN 0.87 PRs to look at, discussions around workers / worklets, a WebGPU/Skia integration, and React Navigation 8 / Screens 5 progress.

Last week, many proposals progressed during a TC39 meeting. npm is going to scan for malware at publish time. Core Web Vitals will now measure SPA soft navigation.

Let's dive in!

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

• 🦋 Bluesky
• ✖️ X / Twitter
• 👔 LinkedIn
• 👽 Reddit

Ne manque pas le prochain email !

People always ask how I keep up to date, it's This Week In React.

Jack HerringtonPrincipal Engineer - Youtuber

💸 Sponsor

Ship AI generated code safely with Meticulous.

Claude writes your code. Claude reviews your code. Claude fixes the review comments. And somehow, you're the one getting paged at 2am when it breaks in prod.

Fortunately, top AI-driven teams like Dropbox, Notion, LaunchDarkly, and Wiz rely on Meticulous to run 1000s of e2e UI tests autonomously, covering every user flow, edge case, role and permutation. Built by ex-Palantir engineers, Meticulous gives you near-exhaustive coverage in weeks, without any developer effort. 

It works like magic in the background:

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

Check it out - and see why one engineering leader at Dropbox said that “once we started using Meticulous, we couldn’t imagine working without it.”

⚛️ React

Octane – React's programming model, compiled

Dominic Gannaway – former React/Svelte team member, creator of Inferno – unveiled his new project, Octane, as a successor to Inferno.

It keeps React’s programming model, but compiles Hooks, Suspense, and Actions ahead of time. It improves performance, removing the Virtual DOM and using native browser events. You don’t need to respect the rules of hooks or to maintain dependency arrays manually. You can use it with JSX/TSX, but it also supports TSRX to improve your developer experience.

This looks like a quite serious React challenger using the same mental model, already receiving contributions from maintainers of popular project. It comes from day 1 with integrations for libraries such as TanStack, React Three Fiber, Lynx, StyleX, NativeScript, and more.

• 💸 Sentry - Stop logging everything. Learn what's worth capturing and how to structure it properly.
• 👀 Next.js docs preview - Offline support - With experimental.useOffline enabled, Next.js will no longer throw when the network is down, keeping requests pending with a retry.
• 🗓️ React Advanced London - 🇬🇧 London - 23 & 26 Oct. First speakers announced: TanStack Maintainer, Engineer at Vercel, Apollo TypeScript Client maintainer & more. All in a historic ex-brewery. Get 10% off with code "TWIR".
• 📜 TanStack - We Stopped Using RSC on TanStack.com - Tanner explains why the TanStack website adopted RSC in the first place, keeping heavy dependencies like the Shiki syntax highlighter on the server. But the maths change if the heavy libraries become smaller: it’s better to use SSR, ship a small lib once and render multiple times on the client than to render each blog post on the server and ship an RSC/Flight payload. To achieve better performance with SSR, TanStack had to introduce 2 new deliberately small projects: TanStack Markdown and TanStack Highlight, available in alpha. In TanStack Start, you can freely decide to use SSR or RSC when it makes sense.
• 📜 Making Referential Stability a Type - A really cool idea to tag memoized values directly in the type system with Stable<T>. With stableref/react, you can enforce APIs to use memoized values and get compilation errors if props or dependency array elements are not memoized.
• 📜 Experimenting with RSCs for Performance and UX in Next.js - 3 Next.js 16.3 experiments to keep work on the server: pagination via ?page=, a search field that keeps focus while results stream, JSX from actions.
• 📜 How to find a Next.js memory leak in production - 3 memory leaks in Next.js and how to spot each in heap snapshots. These have recently been fixed by Dan Abramov for v16.3.
• 📜 The state of zero-runtime CSS-in-JS, mid-2026 - A recent field map of compile-time CSS-in-JS covering Vanilla-Extract, Panda CSS, StyleX, next-yak, Linaria, dx-styles.
• 📜 How to Think in Remix UI Instead of React - A pragmatic intro to Remix v3 from a React perspective. Components run once, return a render closure, and you re-render with this.update(). This gives you more control than React hooks, but requires more boilerplate.
• 📜 The Absolute State of Management - Alex Russel argues React's state management libs don't manage state; they only propagate it with pub/sub. Real state management needs time and ordering: CRDTs, sync engines, vector clocks.
• 📦 Canvas UI - Creative components based on WebGPU and HTML-in-canvas - A cool project for creative work. Framework-agnostic, coming with first-class React integration.
• 📦 TanStack Table v9 beta.58 - Support Cell Selection and Keyboard Navigation
• 📦 React Router 8.3 - RSC Entry Updates
• 📦 Reassure 1.6 - Performance testing for React and React Native - Stability measures
• 📦 Astryx 0.1.8 & 0.1.9
• 🎥 Jack Herrington - TanStack is Doing What? - Stream announcing TanStack changes with guests. TanStack now has a new look, a design system, and a lead designer.
• 🎥 Shruti Kapoor - React Debugging with Performance Tracks

Ne manque pas le prochain email !

My favorite resource for keeping up with the React community!

Evan BaconEngineering Manager - Expo

💸 Sponsor

Stop Rebuilding Forms for Every Business Change

Hardcoded forms create a costly cycle: every new field, workflow, validation rule or customer-specific variation becomes another development task, code review and deployment.

SurveyJS breaks that cycle. Developers embed a JSON-powered form builder and reusable form runtime into their React application once. Business teams can then create and update forms through configuration rather than application code.

• Ship new forms faster
• Reduce repetitive frontend work
• Launch form changes without waiting for a release cycle
• Keep full control over your backend, data, security, and branding

Your developers own the platform. Your business teams manage the forms. 🙂

📱 React-Native

• 💸 PostHog - The do's and don'ts of minimum viable product marketing
• 💬 React Native RFC - CSS calc() in React Native - A proposal to add a C++ implementation, so host platforms do not need to be aware of its existence. Aligns more closely with the web, avoiding onLayout and useless render passes.
• 👀 React Native PR - Add SafeAreaProvider, safe-area hooks, and SafeAreaView edges/mode - 2 recent PRs show that SafeAreaView will either be removed from core, or improved to catch up with react-native-safe-area-context features. We are still not sure which PR will be merged; stay tuned.
• 👀 RN Screens 5.0 Alpha - Rewritten Stack implementation, Android based on Material Design 3 - The first release of an upcoming rewrite of RN Screens. The redesign of the Native Stack addresses shortcomings of the v4 model and will be an important piece for React Navigation v8.
• 👀 React Native PR - backgroundImage stable in RN 0.87 - linear and radial gradients will officially work without the need for 3rd-party dependencies.
• 👀 React Navigation PR - v8 will work on Web without React Native Web
• 📖 React Navigation 8 - New docs on Suspense and pending UI
• 📜 From Expo Router to Detour: Deferred deep linking the right way - Standard deep links break at the store boundary, causing an Installation Gap when the app is not installed yet. The solution is to use deferred deep linking to capture user intent and replay it on the app’s first launch.
• 📜 Marc Rousavy just wanted to build react-native libraries but ended up fixing bugs in Apple/Swift compiler... - A compiler bug caused iOS 16 to crash the app in production. The optimizer hoisted a weakly imported constant above its #available guard. Although the issue is real, it was possible to work around it, requiring an upstream compiler fix.
• 📜 Install dev and production side by side with app variants - A guide to setting up app variants for improved dev experience.
• 📜 Why We Did Not Move MMKV Writes to a Worklet: The Serialization Cost
• 💸 ConfigCat - Release React Native Features with Feature Flags, Without Redeploying
• 📦 RN Workers 1.0 Alpha - Separate Hermes runtimes created on a dedicated thread to enable real multithreading. Each worker has its own bundle. Communication between them is using messages via a structured-clone codec. This discussion explain differences with Worklets. Hermes also supports WebWorkers out of the box (unstable) that will be in a public release soon.
• 📦 React Native WebGPU 0.7 - importDevice() - This lets you import the RN Skia Graphite WebGPU device. It’s the foundation for zero-copy interop between the two worlds, letting you use WebGPU textures in Skia efficiently.
• 📦 Skia 2.10 - Migrates from HostObject to JSI NativeState, requires Reanimated v4 - Related: Tzvetan Mikov previously explained why the Hermes team strongly favors JSI NativeState over HostObject.
• 📦 VisionCamera 5.2 - New SkiaCamera controls (zoom, exposure, torch), stretch GPU Resizer mode
• 📦 Nitro 0.36.2 & 0.36.3 - Faster Record<K,V> conversion, RN 0.87 support, drops @FastNative from Sync callbacks
• 📦 Expo Open OTA 3.0 - Self-hosted Expo Updates server with multi-app, rollouts, A/B testing
• 📦 Argent 0.17 - Screen recording tools, pinch gesture, Windows support for Android and Chromium
• 📦 Canvas Kit - A batteries-included 2D canvas framework built on RN Skia
• 📦 React Native Social Auth - Sign in with Google for Android, iOS, Expo
• 📦 Memory Footprint - Measure React Native app's memory footprint on iOS and Android
• 📦 Maestro 2.7 - MCP tool to debug Cloud runs with your AI agent, per-flow debug artifacts
• 📦 Radon 1.18 - Send props, styles, state & errors from element inspector to AI chat context
• 📦 Agent Device 0.20.1 - Vega OS support, broader physical iOS support, secret-safe replay and recording improvements
• 📦 Screen Transitions 3.9 - Teleport-powered handoff and escapeClipping, simplified Boundary API, navigation zoom
• 📦 Sentry 8.20 - iOS screenshot regression fix, Gradle Configuration Cache compatibility
• 📦 Nitro Fetch 1.5.3 - 3x faster streaming via shared URLSession
• 🤖 Maestro CLI 2.7 - MCP for AI Coding Agents
• 🎥 Expo - How to add an iOS Widget to your app
• 🎙️ RNR 368 - RNR Explains: Fabric - A look into how the Fabric renderer works. How it speeds up mobile apps and unlocks concurrent React features.

🔀 Other

• 🦋 TC39 advanced Promise.allKeyed, Error.code, Map.take, RegExp Linear Matching, and more - I reply and explain why I’m excited about allKeyed, RegExp Linear Matching, and Composites moving to an interning-based approach (getting closer to the former Records & Tuples proposal).
• 📣 Core Web Vitals - Measuring soft navigations - Measuring SPA soft navigations (page transitions with history.pushState) will be enabled by default in Chrome 151, and integrated into DevTools, the web-vitals package, Lighthouse, PageSpeed Insights, and Real User Monitoring tools.
• 📣 GitHub - npm publish-time malware scanning and dual-use metadata - Newly published packages will be automatically scanned before they become available, introducing a delay of 5-15 minutes between publishing and availability.
• 📊 State of CSS - Survey results
• 📜 ECMAScript Deferred Module Evaluation with import defer - This lazy module evaluation feature is stage 3, already implemented in most tools, and close to becoming part of the standard.
• 📜 Your SPA Is Leaking Memory. Soak Test It - A practical Playwright recipe to catch SPA memory leaks. Loop a user flow, read Chrome's node/listener counts before and after, assert.
• 📦 Playwright 1.62 - New component testing model, AbortSignal, WebP screenshots, isolated retries
• 📦 Webpack 5.109 - Built-in CSS, HTML, TypeScript support enabled by default, Vite-compatible import.meta APIs, asset query suffixes
• 📦 Firefox 153 - Picture-in-Picture, import as text, popover="hint"

🤭 Fun

See ya! 👋