📨 #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 🎨

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

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

Don't miss the next email!

If you are not signed-up, you are missing out

William CandillonReact-Native animations expert - Youtuber

💸 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

• 💸 Chromatic – Visual testing for Storybook, Playwright, and Cypress. Catch UI bugs that functional tests miss. Lightning-fast & zero flake.
• 👀 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 useState types 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, useActionState and useOptimistic
• 📜 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
• 📜 Optimizing SPA load times with async chunks preloading
• 📜 What is a Component Library and Should You Build Your Own?
• 📦 Docusaurus 3.5 - Authors pages and many new blogging features
• 📦 Impact-React in RC - Signals for React, by CodeSandbox
• 📦 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
• 🎙️ Syntax.fm - We React to State of React Survey
• 🎙️ Syntax.fm - CSS Components: Tailwind, Panda, Scoped, Modules, Classes, Variables, CSS-in-JS and Sprinkles!
• 🎥 Sam Selikoff - Avoid premature abstraction with Unstyled Components

Don't miss the next email!

I'm constantly finding interesting things to learn in there.

Dominik DorfmeisterWeb Developer - React-Query maintainer

💸 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

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!

• 💸 Galaxies.dev - Become an expert React Native Developer & Save $65 before price increases next Tuesday!
• 👀 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
• 📦 react-native-macos support for RN 0.74 is out
• 🎥 Reactiiive - Building a Story List UI with Reanimated (React Native)
• 🎥 Simon Grimm - React Native Firebase Authentication with Expo Router
• 🎙️ RNR 303 - Stories from Chain React 2024

🔀 Other

• 👀 Node.js - Add Support for transpiling typescript enums & namespaces
• 📜 Node.js Takes Steps Towards Removing Corepack
• 📜 Animating entry effects with CSS is now in baseline after it was added to Firefox 129
• 📜 Common Causes of Memory Leaks in JavaScript
• 📜 An approach to optimizing TypeScript type checking performance
• 📜 Exploring the Possibilities of Native JavaScript Decorators
• 📜 Animating Figma's SVG Exports
• 📦 Cheerio 1.0 - Finally stable after 7 years of RC
• 🔗 e18e - An initiative for performance in the JS ecosystem

🤭 Fun

See ya! 👋