This Week In React #196 : Nitro Modules, use dom, macOS, Screens, Autolinking, Cocoapods, Corepack, Node.js, TypeScript…

August 16, 2024

This content originally appeared on DEV Community and was authored by Sebastien Lorber

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!

Subscribe to the official newsletter to receive an email every week!

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

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!