This Week In React 287

Fragment ref, React Compiler, StyleX, React Router, cnfast, Base UI, Remotion, React Aria | Reanimated, Widgets, VisionCamera, Test Renderer, Worklets, Legend List, Metro, Boost | Vite, Astro, TypeScr

Hi everyone, Seb and Jan here 👋!

This week, we’re shining a spotlight on the upcoming React Fragment ref feature. We also have React Compiler updates, StyleX community discussions and a boring React Router release.

On the React Native side, Renimated gets CSS pseudo-selector support and widget libraries gain momentum. VisionCamera unlocks new real-time processing capabilities with impressive demos.

Let’s dive in!

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

• 🦋 Bluesky

• ✖️ X / Twitter

• 👔 LinkedIn

• 👽 Reddit

Dominik DorfmeisterWeb Developer - React-Query maintainer

💸 Sponsor

React Native Devs Are Sleeping on TV 

You’ve optimized for mobile. Maybe tablet. But the big screen might feel intimidating. Amazon Devices Builder Tools (ADBT) for AI gives your agent (Claude, Cursor, Kiro) Fire TV context for onboarding, performance debugging, and crash analysis, so you can resolve blockers and ship apps for Fire TV faster.

⚛️ React

React Docs - <Fragment ref>

In an upcoming version of React, the ref prop will expose a new FragmentInstance type that lets you interact with the fragment first-level children, unlocking new composition patterns. This exciting feature has just been documented more exhaustively, including 5 example use cases to get inspired from.

This feature is already available in canary, has gone through extensive testing in production, and is likely scheduled for React v19.3.

Note that React Native will also get a similar feature (draft docs PR). I don’t know if React / React Native will have full feature parity, but it’s clear that this will enable cross-platform usage on at least a subset of these APIs.

• 💸 SVAR React Gantt Chart - Try React Gantt component for project scheduling with dependencies, critical path, and resource planning

• 👀 Bun PR - React Compiler integration - The upcoming Bun 1.4 should come with a bun build --react-compiler flag that runs the React Compiler in Rust, up to 20x faster than the Babel variant.

• 🐦 The React Compiler in Rust removed from Rolldown/Vite - The React Compiler in Rust needs to be integrated natively into Oxc to maximize performance, rather than shipped as a plugin. Unfortunately, this increased the binary size too much for all Rolldown/Vite users, so the integration has been temporarily withdrawn while it gets slimmed down.

• 📜 Moving Linear from styled‑components to StyleX - The Linear team has been looking to adopt an alternative to Styled Components (in maintenance mode). They settled on StyleX for its static extraction, minimal runtime, strong encapsulation, deterministic style resolution, ecosystem, developer and agent experience. They use an incremental migration strategy using AI and codemods.

• 📜 How an Underrated Refactor Saved 90% Memory Usage - TanStack Table v9 significantly reduced memory usage for large tables by migrating row object methods to shared prototypes.

• 📜 Waku’s Unique Feature: Slices - A short intro to Slices, a unique Waku feature inspired by Gatsby, easy to understand and yet quite powerful.

• 📜 How We Cut Slow Responses by 80% Migrating to Next.js App Router - The leading italian classifieds marketplace upgraded from the Pages Router to the App Router, using an incremental side-by-side strategy

• 📜 Component Communication Patterns in React Applications

• 💸 Sentry - Join Simon Grimm as he triages a real React Native crash live in production using replays, logs, and Seer

• 📦 React Router 8.0 - Turns v8 future flags on, ESM-only, upgrades React/Vite/Node min versions - This release is “boring” on purpose to make the upgrade easy. It essentially enabling by default behavior changes that were previously released as opt-in future flags in v7. React Server Components are still being worked on and unstable.

• 📦 cnfast - Fast drop in replacement for clsx + tailwind-merge - Tailwind users, maybe this hasn’t crossed your mind, but using tailwind-merge means you’ve added a quite slow runtime CSS-in-JS layer to your React app. This new project is a 4x faster alternative, although it remains a bottleneck.

• 📦 StyleX 0.19 - Inline atomic styles, ESLint 10 compatibility, expands shorthand autofixes

• 📦 Base UI 1.6 - OTPField stable, Drawer improvements, Combobox perf, docs redesign, many fixes

• 📦 Remotion 4.0.464 - Composable effects for canvas-based components

• 📦 React Aria 1.19 - Autocomplete @mentions, support Popover position relative to cursor

• 📦 React Hook Form 7.80 - useFieldArray({disabled}), perf improvements

• 📦 ForesightJS 4.0 - Predicts user intent based on mouse/keyboard inputs - First-class React integration

• 📦 PolyCSS - CSS 3D engine for the DOM, with React bindings

• 🎥 Lucas Barake - React Hooks Are Just a Linked List

• 🎥 Simeon Griggs - Next.js 16.3 got good (if you care)

• 🎙️ Señors at Scale - Newsletters with Sebastian Lorber: RSS Curation, Acquisition, RSC - I give you a glimpse behind the scenes of this newsletter!

Addy OsmaniHead of Chrome DX - Google

💸 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-Native

• 💸 PostHog - We put PostHog in Slack and now everyone’s an engineer

• 📜 Building a Video Call App with Filters - A deep dive from Margelo into using VisionCamera and WebRTC to build a communication app with real-time image processing. The demos are impressive and clearly push the limits of what we can do in React Native today.

• 📜 Writing Custom Renderers for React - The maintainer of React Native Testing Library had to create a custom renderer after React v19 deprecated its own React Test Renderer. He explains how he did so, and how the React Native reconciler differs from the DOM reconciler.

• 📜 iOS widgets and Live Activities are stable in Expo SDK 56

• 📜 How to apply professional design principles in AI app development

• 💸 Drizz - Test your React Native app visually with AI. No locators, no flaky selectors, one suite for both platforms

• 📦 Reanimated 4.5 - CSS Animations pseudo-selectors, <SharedTransitionBoundary>, Core Animation for shadow/background/border - You can now use :hover, :active, and :focus in your CSS animations the same way you would in a browser.

• 📦 Voltra 2.0 - Rewrite from Expo Modules to Turbo Modules, now works with bare RN, modular packages for smaller server install

• 📦 Metro 0.85 - Require Node 22+, resolution self-referencing, perf and various fixes

• 📦 Nitro BLE 1.14 - Advertised service data is now exposed on scan results

• 📦 Serve Sim - The npx serve of Apple Simulators - Hosts iOS Simulators for use with agent tools.

• 📦 NSFW Detector - On-device CoreML model to detect nudity and unsafe visual content in images

• 📦 WebView 14.0 - Drops Android <7.0 support, 13.17 adds removeIosKeyboardObserver prop

• 📦 Transformer Text Input 0.4 - Add Web support

• 📦 Sentry 8.15 - NativeLinkedErrors JVM stack traces, record XHR headers/bodies in Mobile Session Replay

• 📦 Worklets 0.10 - Bundle Mode stable, API for module import forwarding, ArrayBufferView native serialization

• 📦 Boost 1.2-4 - Babel optimizing plugin - Text optimizations, translate View accessibility props, style inlining

• 📦 True Sheet 3.11 - Web renderer rewrite, iOS accessibility improvements, Android gesture fixes

• 📦 Legend List 3.1 - Experimental adaptive rendering during scroll, setItemSize API, sticky header fixes

• 📦 Nano Icons 0.2 - tvOS support, dynamic font linking, web specific createIconSet, RN 0.79 compat, a11y props

• 📦 Expo PaperKit - Apple PaperKit for Expo/React Native

• 📦 Rozenite 1.13 - getTree/getComponent agent tools, Redux improvements

• 🎙️ RNR 366 - Securing React Native Apps in the AI Era - discussion about AI-powered security threats, practical ways to secure RN apps, and reduce risk

🔀 Other

• 👀 CSS Linked Params - This early W3C spec from Google/Mozilla solves a long-standing limitation, letting you pass CSS values into external linked resources. This means you can customize <img src=”icon.svg”> with CSS.

• 📜 Ship the policy, not the code - Instead of duplicating business logic across frontend/backend, you can use an isomorphic rules engine (such as CASL) and let the backend serialize the rules to the frontend.

• 📦 Vite 8.1 - Experimental Bundled Dev Mode, Chunk Import Map, Wasm ESM integration - It’s now possible to use the “Full Bundle Mode” in dev and get much faster startup/HMR in very large apps.

• 📦 Astro 7.0 - Vite 8, Rolldown, and Rust to process .astro , .md, .mdx files, Advanced Routing, Route Caching, and more - All about speed, Astro builds are now ~61% faster!

• 📦 TypeScript 7.0 RC - The faster Go rewrite is almost production-ready; the upgrade should be relatively easy. TS7 can be run alongside TS6.

• 📦 Nub - An all-in-one toolkit for Node.js - A Rust CLI that augments the Node instead of replacing it, adding Bun’s best features on top of it.

• 📦 Sharp 0.35 - Remove install script - The popular image processing library now ships with pre-built binaries. This aligns with package managers now blocking install scripts by default, and other projects (SWC, esbuild) are considering doing the same.

• 📦 actions/checkout 7.0 - Prevents common pull_request_target pwn request patterns - Good news for supply chain security. GitHub tightened security for this popular action, refusing to check out pull request code unless you opt in with allow-unsafe-pr-checkout: true. This attack vector recently led to many compromised npm packages, including TanStack, Nx, PostHog, LiteLLM, and more.

🤭 Fun

See ya! 👋