This Week In React 265
React Skills, json-render, ViewTransition, Base UI, shadcn, Store, MDX, GTK | RN Windows/macOS/Harmony, Brownie, Enriched, Navigation, Teleport, Nitro | TC39, Astro, jQuery, Node.js
Hi everyone!
This week, we saw a lot of activity on X about the new AI skills system. Personally, what excited me most is the new Firefox release that unlocks interesting things for React developers.
The React Native ecosystem is also super active, with many interesting releases. And I’m sure Expo 55 beta will drop just after we send our email 😅, so make sure to check their blog because it’s coming soon.
As always, thanks for supporting us on your favorite platform:
🦋 Bluesky
✖️ X / Twitter
👔 LinkedIn
👽 Reddit
Jack HerringtonPrincipal Engineer - Youtuber
💸 Sponsor
Debugging Next.js in Production
Next.js makes it easy to ship fast, but once your app is in production it can be hard to tell where errors, slow requests, or hydration issues are really coming from.
Join Sentry’s hands-on workshop where Sergiy Dybskiy will dives into how these problems show up in real apps and how to connect what users experience with what’s happening under the hood. 🚀
⚛️ React
A new Anthropic spec is gaining traction in the AI dev community. Skills let agents acquire capabilities on demand via progressive disclosure—lazy-loading only what’s needed to keep context slim. It’s been a hot topic in React this week, with multiple projects shipping open-source skills and tooling:
Skills.sh, a platform launched by Vercel to discover popular open source skills
React Best Practices by Vercel for React and Next.js skills. I also liked the related article from one of the authors (Performance Is Not a Technical Problem).
React Native Best Practices by Callstack, including many React Native optimization skills
Expo Skills for Expo apps and EAS projects
Remotion Skills are trending on X, showing that you can vibe code videos with React 🤪
You might wonder why Firefox is the headline of the React section? It turns out this release is quite important for React developers, unlocking 3 new APIs that are now available in all browsers 🎉:
View transition types - React is relying on it (
document.startViewTransition({update, types})) to conditionally enable its<ViewTransition>component. That component is still canary, but once unflagged, it should now work in all recent browsers!CSS anchor positioning - An awesome addition to CSS that should replace the need for JS-based positioning libraries many React apps used for dropdowns and tooltips, such as Tether, Popper.js, Floating UI…
Navigation API - This completely redefines the APIs used to build client-side routers / SPAs, providing a clean, centralized way to intercept navigation events, instead of using the clunky
historyAPI.
💸 10 Real-World React App Examples to Inspire Your Next Project
👀 React RFC PR - useStore/createStore APIs - A POC of implementing a React Store that is compatible with concurrent rendering, for discussion purposes.
👀 Prettier PR - Upgrade MDX parser - Support for MDX v3 is finally coming.
🔨 TanStack Builder alpha: A website to let you assemble your own TanStack visually. It looks like a convenient visual wrapper around
create-tanstack-app.🗓 React Paris - 🇫🇷 Paris & Online - 26–27 March - React Paris is already 50% sold out - Secure your spot at this premier React event before prices increase by €200 and save an extra 10% with code “TWIR”.
📜 useOptimistic Won’t Save You - An interactive article showing that it’s not so easy to implement optimistic UI correctly, even with the new
useOptimisticanduseActionStateAPIs. This requires a good understanding of how React transitions work.📜 Inside Turbopack: Building Faster by Building Less - Deep dive into the new default bundler of Next.js and its fine-grained and automatic incremental caching system.
📜 Front-end testing at Preply: shifting left towards component testing - Reorganizing front-end testing at scale by moving toward a Storybook-centric component testing approach.
📜 Adapting Library Logic for React Compiler - The author of TanStack Form explains a problem encountered with the React Compiler that was not reported by the ESLint plugin. Using the compiler
panicThresholdhelped detect this problem more reliably.📜 Node.js - Mitigating Denial-of-Service Vulnerability from Unrecoverable Stack Space Exhaustion for React, Next.js, and APM Users - Node.js servers relying on
AsyncLocalStorage(used by React RSC and Next.js) can eventually be crashed with a single request containing a deeply nested JSON payload processed recursively. They mitigated the issue in v24.13, but still recommend removing potential attack vectors from your app.📜 Rebuilding the GitHub pull request experience - This dev explores how GitHub’s PR UI could be much faster, especially for large PRs, and shares lessons learned. His Next.js + React 19 demo shows impressive performance compared to GitHub’s current experience.
📜 React Slot/asChild Composition Pattern - The article also highlights how Base UI composition pattern differs from Radix UI.
📜 Can You Fetch Data with React Server Actions? - Not recommended, but technically possible, with caveats: no caching, requests are POST-only and generally processed sequentially by frameworks.
📦 json-render - AI-generated UI with guardrails - Vercel introduced a new generative UI library. It lets users generate more complex dashboards, widgets, apps, and data visualizations from prompts, using a React component catalog you provide.
📦 TanStack Router 1.152 - Allow custom
fetch()implementation for server functions - This is useful for interceptors, auth, retry, testing and more (docs).📦 Base UI 1.1 - New features for Autocomplete, Combobox, Select, Field, various bugfixes - By the way, we recently announced Base UI support in shadcn, and Base UI components are now officially documented.
📦 shadcn 3.7 - New
npx shadcn registry addcommand📦 GTKX - Build native GTK4 desktop apps with React and TypeScript
📦 Puck 0.21 - Visual editor for React - AI page generation, rich text editing, new Plugin interface
📦 Warper - Fast React virtualization library powered by Rust and WebAssembly
📦 React Error Boundary 6.1 - Fix error type (
Error->unknown), addgetErrorMessage(e)helper🎥 Maximilian Schwarzmüller - Is TanStack Start better than Next.js?
Evan BaconEngineering Manager - Expo
💸 Sponsor
No breakpoints, no console.log — just AI & time travel
15x faster TypeScript and JavaScript debugging than with breakpoints and console.log, while upgrading your AI agent into an expert debugger with real-time context.
Wallaby.js runs your tests as you type, feeding your AI assistant live runtime values, code coverage, error details, and execution paths — all right next to your code. With Wallaby v3’s new engine 🚀, tests start instantly with cached results, prioritize active files, and stream updates in real time.
Built for testing, Wallaby includes a Time Travel Debugger, the ability to run only opened files, full-context AI integration, smart test runs, and more.
📱 React-Native
📜 Huawei x Software Mansion: Bringing React Native Support to HarmonyOS NEXT - Software Mansion helps Huawei bring RN support to their OpenHarmony OS (already powering 27 million devices), ensuring their famous libraries are also compatible (Reanimated, Screens, Gesture Handler…)
📜 Channel surfing for Expo Updates: How to switch update channels at runtime - A technique to let your app’s user decide which Expo update channel to use on their own. You can limit this feature to your employees, for example.
📜 Making AI feel human in a mobile app with Expo, Reanimated, and Skia
📦 React Native Windows 0.81 and React Native macOS 0.81 - Out-of-tree platforms are catching up, enabling the New Architecture by default.
📦 Brownie - Type-Safe Shared State for React Native Brownfield Apps - Creates a single source of truth that lives on the native side, accessible from both TypeScript and Swift. Support for Kotlin is coming soon.
📦 Enriched 0.3 - Rich Text Editor - H1->H6 heading styles, text selection API, custom links detection, and more - See also the newly-released sister project Enriched Markdown that renders Markdown content as native text.
📦 React Navigation 8.0 alpha - Native Bottom Tabs by default, improved types, access to parent screen state,
pushParams, and more - Note that since this initial alpha release, alpha.1 has been published and includes even more features: automatic deep links, SFSymbols/Material Symbols, improved screen preloading.📦 Screens 4.20 - formSheet dynamic content size, a11y & testing improvements
📦 RNSec 1.1 - Path exclusion, incremental scanning, cleaner output, rule ignoring, and more
📦 Audio API 0.11 - Recording to file, new Web Audio API nodes, DX improvements
📦 Teleport - The missing native portal implementation for React Native
📦 Bottom Sheet Stack - Stack manager for Bottom Sheet - Preserves React context, Portal-based API
📦 Nitro 0.32 & 0.33 - View recycling, custom
UIViewsubclasses, Performance & DX improvements📦 Expo iCloud Storage - React Native wrapper for iCloud’s
NSUbiquitousKeyValueStore📦 Native Spring Shaders - High-performance native shader effects for React Native and Expo
📦 Header Motion - An abstraction for scroll-driven header animations
🎥 Callstack - Understanding Threads and Queues in Swift TurboModules
🎙️ React Universe on Air - Shipping v0 iOS: React Native Without Compromises
🔀 Other
📣 The Astro Technology Company joins Cloudflare - Interesting to see another popular framework join a tech giant. It will remain free, open source and MIT-licensed.
👀 TC39 - Agenda for the 112th meeting - Currently in progress, some JS proposals already progressed, such as
map.getOrInsert()(stage 4) andimport.sync()(stage 2).📜 The Curious Case of the Shallow Session SPAs: Alex Russell argues that most SPAs shouldn’t be. Data shows that, on average, users produce a single soft navigation after the initial load, and that the upfront cost we pay is probably not worth it.
📜 Stop turning everything into arrays (and do less work instead) - Pragmatic introduction tio iterators.
📦 Node.js 25.4 -
require(esm), compile cache, and various other APIs are now stable📦 jQuery 4.0 - Remove IE11 support and deprecated methods, slimmer
🔗 Node.js package examples - The Node.js team created a guide on package shipping patterns and how to handle CJS/ESM.
🤭 Fun
See ya! 👋
Regarding the topic of the article, the AI skills system sounds fascinatin. Keeping context slim reminds me of trying to only load the important bitts of a massive sci-fi novel. It's much easier to digest that way. Really appreciate this breakdown.