This Week In React 196
Forms, Jotai, DI, Electron, Docusaurus, Signals, Plunk, React-Server, Switchboard, React-Call, RN WebGPU, Nitro Modules, use dom, macOS, Screens, Autolinking, Cocoapods, Corepack, Node.js, TypeScript.
Hi everyone!
This week, we welcome 2 new contributors to help ensure the continuity of the newsletter throughout the year, even when Seb takes a break.
Cyril and Matthieu from Theodo Apps (formerly BAM) here 👋, filling in to bring you the latest news from the React and React Native worlds.
It’s a relatively calm week for React, with some ongoing discussions about the Suspense drama in React 19.
But React Native? That’s where the real action is!
From Expo demoing a way to integrate React DOM components to the exciting launch of React Native WebGPU, there’s plenty to talk about. Plus, we’re diving into new approaches to native module development that are sure to shake things up. And React Native 0.75 is around the corner, we'll cover it next week!
Our partner conf reactjsday (🇮🇹 Verona - 25 October) is celebrating its 10th year by upgrading to 2 tracks (16 talks). Get a 10% discount with code "TWIR". Great speakers have already been announced: Matheus Albuquerque, Aurora Scharff, Dani Coll, and more!
💡 Check this newsletter on Twitter - visual format 🎨
To support me:
😘 Recommend the newsletter to your friends: it really helps!
💸 Sponsor
Make the most of your design system with StackBlitz
Your design system makes web development more efficient and consistent, but we know that building and maintaining it comes with no shortage of challenges. StackBlitz makes design systems easier to evangelize, maintain, and evolve. With StackBlitz you can:
📈 Increase adoption rates: Provide one-click instant environments your team can use to try internal libraries.
💻 Elevate developer experience: Include live code examples in your documentation.
🐛 Improve bug reporting: Instantly filter out true issues and never spin up heavy local installations for a simple bug report ever again.
🤝 Simplify collaboration: Facilitate seamless collaborations across engineering, design, and other departments.
Ready to transform your design system workflow? Get started now!
⚛️ React
👀 React 19 - Disabling prerendering siblings of suspended components breaking common pattern: The React team is working on reversing this change that was planned to be included in React 19 but would have degraded the performance of lots of SPAs. No ETA yet, it may take some time to get a stable React 19 release
🐦 Matt Pocock has a suggestion for a new approach to library typings: React could for instance expose
useStatetypes with TypeScript namespaces🐦 Matt Pocock's tip to add auto-completion to your component props: Using
string & {}📜 A deep dive on forms with modern React: Kent explains how to use the new hooks
useFormStatus,useActionStateanduseOptimistic📜 How Jotai was born: Daishi Kato recaps his multiple iterations on state management libraries before creating Jotai
📜 Why using dependency injection in your app can lead to cleaner and easier to maintain code: A valuable article that encourages thoughtful consideration of DI in frontend development, especially for those working on more complex React projects
📜 Building an App with Next.js and Electron with Server Components Support: Explains how to hijack Next.js to run an RSC server in an Electron app
📜 What is a Component Library and Should You Build Your Own?
📦 Docusaurus 3.5 - Authors pages and many new blogging features
📦 Plunk - New OSS email platform, with react-email and jsx-email integrations
📦 react-switchboard - Quickly create custom DevTools for your apps
📦 react-call - Imperatively display React Components and await their result: An interesting idea to simplify implementing confirmation dialogs, toasters…
📦 @lazarv/react-server - An alternative framework with Server Components
🎥 Sam Selikoff - Avoid premature abstraction with Unstyled Components
💸 Sponsor
Statsig: Ship, Measure, Repeat
The feature management, A/B testing, and product analytics tools used by OpenAI, Notion, & Brex. Build better products by measuring everything you ship 🚀
Install Statsig once and get:
🧪 A/B Testing: Automated experiments with advanced stats. Ship only the features that work
🚩 Feature Flags: Unlimited free flags and turn any flag into an A/B test with one click
🥇 Product Analytics: Track growth and measure feature impact. Conduct analysis by feature flag or A/B test group
🎥 Session Replays: Replay user interactions to understand experiences and frictions
🌐 Web Analytics: Drop a JS snippet for essential website metrics and dashboards
Get up to 2M free-tier events and 10K session recordings — all for free!
📱 React-Native
React Native WebGPU has just launched, offering a unified API to leverage the GPU for advanced graphics and computation in React Native! By reusing the Web API standard, we will be able to easily integrate existing WebGPU code samples and libraries, such as ThreeJS, directly into React Native. Beyond just graphics, React Native WebGPU can be used for tasks like matrix computations, making it interesting for on-device machine learning algorithms. It's built using Nitro Modules for smooth Typescript to C++ interoperability. Currently, it's available in technical preview, signaling exciting developments ahead!
The Future of React Native Modules
Exciting times for React Native developers! Marc Rousavy is shaking things up with NitroModules, a new way to write native code 📦 that’s blowing away existing solutions in speed tests. He's encountered some limitations with JSI in VisionCamera. The project is already stable on the C++ side and is already being used in various projects like 🐦 react-native-unistyles and react-native-webgpu, with Swift and Kotlin bindings still in progress.
👀 Meanwhile, a new proposal to push the use of Swift for TurboModules has landed. These changes will ease native modules development by moving away from Objective-C and C++. With these updates, building native modules is about to get a whole lot better!
👀 React Native 0.76 will likely bump the minimum iOS version to 15.1
👀 “use dom” - Expo is working on a way to seamlessly integrate React Web components in React Native apps: New experimental Expo feature allows importing React DOM components, communicating with them with props and callbacks! The components are rendered with webviews and not native views, so it will probably be most useful for migrations or secondary features
👀 React Native Screens 4.0 beta: With iOS custom detents & Android form sheets
👀 Upcoming Autolinking performance benefits shipping in React Native 0.75 & Expo SDK 51
📖 Expo Docs update - Unit testing with Jest: Now explains how to set up jest-expo and React Native Testing Library
🗓️ React Universe Conf - 🇵🇱 Wrocław - Sept 5-6. Get a 10% discount with code "TWIR". Speakers: Dan Abramov, Evan Bacon, Kent C. Dodds, Delba Oliveira...
📜 Cocoapods is officially in maintenance mode: React Native will need to migrate at some point
🎥 Reactiiive - Building a Story List UI with Reanimated (React Native)
🎥 Simon Grimm - React Native Firebase Authentication with Expo Router
🔀 Other
👀 Node.js - Add Support for transpiling typescript enums & namespaces
📜 Animating entry effects with CSS is now in baseline after it was added to Firefox 129
📜 An approach to optimizing TypeScript type checking performance
📜 Exploring the Possibilities of Native JavaScript Decorators
🤭 Fun
See ya! 👋