This Week In React 197

Waku, Effect, TanStack, Framer Motion, use(), Preact, Valtio, Astro, Three.js, Nitrogen, React-Native-Web, expo-dom, Tophat, React-Navigation, Skip, TypeScript, Rspack, Volta...

Hi everyone!

Cyril and Matthieu from Theodo Apps (formerly BAM) here 👋, standing in for Seb to bring you the latest news from the React and React Native worlds.

It’s been another calm week, but we've still got some great updates for you. Waku now supports React Server Actions, there are tips for using TanStack/Router, and we explore React's journey to becoming a full-stack framework. Plus, check out what's new in React Native 0.75 ! We also have some updates on NitroModules and react-native-webGPU. Dive in and enjoy!

Check our partner conf React Advanced London (🇬🇧 London - 25 & 28 October). We really like the idea of advanced React talks, and so far the lineup doesn't disappoint! 👌

💡 Check this newsletter on Twitter - visual format 🎨

To support me:

• 😘 Recommend the newsletter to your friends: it really helps!

• 💸 Sponsor the newsletter

• 🧵 Retweet the latest Twitter thread

💸 Sponsor​

Are your React PR reviews turning into component chaos?

Discover strategies to streamline your React PR reviews and elevate your team's focus to critical aspects of code quality. We'll review every PR with dependency management, code reconciliation & more, allowing your team to concentrate on architectural decisions, component design, and performance optimizations.

CodeRabbit helps with:

• Best Practice Enforcement: Leverage CodeRabbit's ability to identify common React anti-patterns and suggest best practices, ensuring good code quality.

• Component Structure Review: Benefit from a thorough summary of your component structure, receiving suggestions for better composition.

• Actionable Code Review Comments: Fix the code right in the PR, with 1-click commit suggestion.

CodeRabbit is free for all open-source repo's. Get started today!

⚛️ React​

Waku v0.21 - Full support for React Server Actions

React Server components have inspired a new wave of “React frameworks”. Waku, created by Daishi Kato (the creator of jotai, valtio…) is one of them. It was one of the first outside of Next.js offering support for server components.

With the addition of Server Actions, most React 19 features are now supported by Waku, and it’s possible to develop full apps while skipping the “have an API” part.

From React to Effect

Michael Arnaldi, the creator of Effect, explains how the models used by Effect and React are similar. While Effect is a powerful toolkit, it’s quite hard to get started with, almost like a new language, so drawing parallels with what we’re already familiar with can help.

In Effect, just like with React, most of the code you write is a “blueprint”: you declare what your program should do without running it directly. Then the library (React of Effect) takes care of running it.

• 💸 TutorialKit — Create interactive tutorials instantly without building or managing any backend infrastructure.

• 🗓️ reactjsday - 🇮🇹 Verona - 25 October - Get a 10% discount with code "TWIR". A, B and C will speak !

• 🗓️ Squiggle Conf - 🇺🇸 Boston - 03 & 04 October - Get a 10% discount with code "TWIR". Speakers are announced, please take a tour on the conf website.

• 📜 Tips from 8 months of TanStack/Router in production: Swizec Teller shares the guiding principles he applies, for instance when he uses loaders, suspense queries or queries

• 📜 React is (becoming) a Full-Stack Framework: With the addition of Server Components and Server Actions

• 📜 Synchronizing State In React: Explains how to solve a classic bug “the right way”, not with a useEffect but by splitting components

• 📜 Building Swipe Actions component with React and Framer Motion

• 📜 useStateObject: A Simple, Convenient API Around useState

• 📜 How to Build a React Hook That Handles Sequential Requests - Using an AbortController

• 📜 Generate a PDF in React - html2pdf.js, React PDF, and Puppeteer

• 📜 Preact - Prerendering with Preset Vite

• 📜 Good Refactoring vs Bad Refactoring

• 📜 How Valtio Was Born

• 📦 Astro v4.14 - Experimental Content Layer API with Intellisense support in content files

• 📦 react-three/xr 6.2.0: Adds unbounded spaces, depth sensing, and secondary input sources

• 📦 react18-use: Daishi Kato created a shim of the React 19 use hook that works in React 18. Includes the ability to 🐦 call use(Context) inside useMemo (experimental), a better alternative to context selectors the React team plans to implement.

• 📦 Formity: Define complex forms with a JSON structure, let the package handle the heavy-lifting

• 📦 rspack-plugin-react-refresh v1.0

• 🎙️ PodRocket - Generative UI and React components with Malte Ubl

• 🎥 Jack Herrington - Secret React-Native Hack For React Web Devs! - use patch-package to patch a dependency not working with Server Components

💸 Sponsor​

Visual testing for Storybook, Playwright & Cypress

Tired of broken layouts and janky UI slowing you down? Chromatic’s visual tests allow you to build with confidence. They catch bugs that functional tests miss, from misaligned elements to incorrect colors and z-index glitches.

No need for separate test cases or configuration. Chromatic plugs into your existing setup for Storybook, Playwright, or Cypress to enable visual testing of your application's UI. All tests run in parallel — at no extra cost — powered by Chromatic’s lightning-fast Capture Cloud infrastructure.

Setup takes just two minutes, and our base plan includes 5,000 free snapshots per month. Get started today »

📱 React-Native​

React Native 0.75

This week marks the release of React Native 0.75, where the core team has reinforced their recommendation to use a React Native framework like Expo for building production-ready apps. Reflecting this shift, the /template folder has been removed from the core react-native package, and the react-native init command is set to be deprecated by the end of 2024, though both will still be accessible within the @react-native-community packages. Notably, this update brings significant improvements, including enhanced performance during the auto-linking build phase and the addition of Yoga 3.1, which now supports the use of percentages for gap, columnGap, rowGap, and translation props when the new architecture is enabled. With these advancements, it's clear that adopting the new architecture is crucial for staying up to date with the latest features and stability improvements.

• 💸 React Native Mastery - The only course you need to Master React Native & Expo

• 👀 React Native 0.76 will ship with a single merged dynamic library called libreactnative.so: This will reduce app size and startup time

• 🐦 Nitrogen, the new Codegen for NitroModules: Marc presents how Nitrogen generates swift specs that you can then implement without touching Objective-C & C++ code 👏

• 🐦 Types for react-native-web are now published on DefinitelyTyped

• 🐦 three.js running in RN thanks to react-native-webGPU

• 🐦 expo-dom demo with React Three Fiber component

• 🗓️ React Universe Conf - 🇵🇱 Wrocław - Sept 5-6. Get a 10% discount with code "TWIR". Speakers: Evan Bacon, Marc Rousavy, Tzvetan Mikov, Oskar Kwaśniewski...

• 📜 React Native 0.75 is now available with Expo SDK 51: No need to wait for SDK 52, take advantage of bug fixes, performance improvements, and the stabilization of the new architecture at a lower upgrade cost.

• 📜 Progressive Web Apps (PWAs): A stepping stone towards a native mobile application: An up-to-date assessment of the trade-off between PWAs and native apps

• 📦 React Native Keyboard Controller v1.13: Adds support for Android modals and React Native 0.75

• 📦 Skip v1.0: New cross-platform framework that allows developers to write native iOS apps in Swift and SwiftUI while automatically generating native Android code

• 📦 Shopify - Tophat is now open sourced

• 🎙️ RNR 304 - React Navigation V7 with Satyajit Sahoo - React Navigation 7's new features, including the static API, improved deep linking, and enhanced TypeScript support

• 🎥 Jolly Coding - Expo Just Made Web-to-Native Migration Easier - expo-dom demo

🔀 Other​

• 📊 State of CSS 2024 survey is out

• 👀 Chrome 129 will introduce two new Javascript Events - scrollSnapChange and scrollSnapChanging

• 👀 ECMAScript Error Safe Assignment Operator proposal - Inspired by functional programming concepts like monads and Rust's Result type, It aims to streamline error handling in JavaScript by returning a tuple [error, result] from functions.

• 🐦 Colin’s hack to filter keys from a TS interface: Using Omit/Pick and a string template literal

• 📜 Branded Types in Typescript: Branded types are key if you want to strengthen your type system. Prices are not just numbers, nor is an amount of time, so protect your functions by narrowing down the types you accept.

• 📜 Total TypeScript - Why I Don't Like Enums - Numeric vs String Enums, Nominal typing and other quirks.

• 📜 Syntax Highlighting in Hand-Coded Websites - Implement syntax highlighting using OpenType features directly within a font

• 📜 “Smart” Layouts With Container Queries - Comparison of container queries with traditional media queries

• 📜 Lessons learned switching to Rspack - challenges and benefits of migrating a SPA from webpack to Rspack

• 📜 Spatial compute - Let the network decide where in the world to run your code

• 📦 Chrome 128 Devtools update - Console insights by Gemini, Performance & Network panels improvements

• 📦 Volta 2.0 The Hassle-Free JavaScript Tool Manager

• 🎥 Lydia Hallie - JavaS Visualized - Closures

🤭 Fun

See ya! 👋