📨 #198: React-Email, MUI, Rspack, prerendering, tree-shaking, Next.js, TanStack, Remix, RSC, Code Hike, Astro, CodePush, visionOS, Tophat, Bluetooth, MKKV, Swift, Re.Pack, Reanimated, TypeScript, Node...

Hi everyone!

Looks like it's the end of summer already, eh?

This week we had many great releases and articles!
I'm particularly excited about React Email, which I'd like to use for an upcoming newsletter email template, and for Rspack that I'm adopting for Docusaurus to replace webpack.

💡 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

Don't miss the next email!

It's exceptionally well curated, offers great insights and is well worth subscribing to!

Addy OsmaniHead of Chrome DX - Google

💸 Sponsor

WorkOS: Modern Identity Platform for B2B SaaS

With WorkOS you can start selling to enterprises with just a few lines of code.

🔐 WorkOS AuthKit supports a complete user management solution along with SSO, SCIM, RBAC, & FGA.

🏗️ The APIs are flexible, easy-to-use, and modular. Pick and choose what you need and integrate in minutes.

🎨 Design and user experience are everything. From the quality of our documentation to how your users onboard, we remove all the unnecessary complexity for developers.

✨ AuthKit is free up to 1 million MAUs and includes bot protection, MFA, RBAC, & more.

🤝 WorkOS is trusted by hundreds of leading startups like Perplexity, Vercel, & Webflow.

Get started with WorkOS 🚀

⚛️ React

React Email 3.0

A new major version of React Email is out. Highlights include:

• A brand-new library of 54 components to copy/paste, similar to shadcn/ui
• 11x rendering performance improvement
• Support for React 19 RC

• 💸 Reactile – a new approach to React-based web apps. Create your own views. Let it handle your windows and widgets in a single browser tab
• 👀 React Core PR - Schedule prerender after something suspends: Remember the Suspense behavior change controversy delaying the React 19.0 stable release? Andrew has a working implementation to add support for pre-rendering siblings in Suspense components, and this is the first of a series of PR. It introduces a new “pre-rendering” concept that should give us the best of both worlds: keep pre-rendering siblings without blocking the Suspense fallback!
• 👀 Next.js PR - Apply optimization for unused actions: Implements “tree-shaking” of unused server actions found in top-level “use server” files (not inline). This mitigates a security risk reported by the community and avoids exposing endpoints by mistake.
• 👀 React DevTools PR - Support Server Components in Tree: Also adds a [server] badge.
• 👀 React Router PR - Add support for routes.ts: Defines a static list of routes, with a possibility to plug in the Remix filesystem convention. The Vite plugin uses this file to create bundles for each route.
• 📖 TanStack Start new doc - Server Functions: Gives an interesting preview of the upcoming TanStack-Router-based framework. It uses an explicit createServerFn() on top of ‘use server’ directives and can give you access to the request context.
• 📖 Next.js new doc - ISR with App Router
• 🗓️ React-Brussels - 🇧🇪 Brussels - 18 October - Get a 10% discount with code “TWIR”. The full line up is now available, take a tour on the conference website !
• 🗓️ React Advanced London - 🇬🇧 London - 25 & 28 October - Free remote tickets are available, click here !
• 🗓️ Next.js Conf - 🇺🇸 San Francisco & Online - October 24
• 📜 Error handling and retry with React Server Components: To recover from RSC failures, you can present a retry button in your <ErrorBoundary>, and call Next.js router.refresh() in a transition.
• 📜 Everything about Google Translate crashing React (and other web apps): An interactive blog post that greatly explains how Google Translate works and how it interferes with the DOM and React reconciliation, leading to crashes or text not updating. Unfortunately, there is no real solution.
• 📜 Multipart Namespace Components: Addressing RSC and Dot Notation Issues: Explains how components like <Card.Body> can cause troubles in the RSC world and prevent tree-shaking. Suggests using named ES exports instead of assigning properties to the default root component. Libs like Chakra and Radix do that.
• 📜 Implementing React from scratch: Reimplements typing, reconciliation, and hooks. You might discover surprising things along the way, such as the ability to call useContext conditionally, or the fact that useCallback is similar to useMemo returning a callback.
• 📜 An SSR Performance Showdown: You might have seen this benchmark showing React SSR as being slow. It should be updated with more accurate numbers soon. Dan Abramov PRs made React SSR x4 faster by enabling production mode, automatic JSX runtime, and upgrading to React 19 RC (Fast JSX).
• 📜 Never Call new Date() Inside Your Components: To keep your components testable you’d rather avoid initializing state with impure functions like new Date() or Math.random(), and pass it as props instead. IMHO you can also use React context.
• 📜 Consuming a Remix backend from a mobile app or external client: The ?_data workaround will not work anymore under Remix Single Fetch mode. You’d rather create dedicated API routes for mobile apps and share common code in an abstraction.
• 📜 Why is CSS-in-JS slow?: Greatly illustrated articles explain why traditional CSS-in-JS is slow, and how compiled CSS-in-JS makes it faster by avoiding a waterfall chain of steps for the browsers.
• 📜 Interface Segregation Principle in React: Explains how to apply this SOLID principle when designing component props and encourages you to use composition. Personally, I also like to leverage TypeScript duck typing and helpers like Pick narrow prop types.
• 📜 Exploring an experimental Micro-Frontend Architecture with Server-Side Rendering using React Server Components: An alternative RSC framework introduced an innovative concept of “RSC Delegation”.
• 📜 Introducing InformAI - Easy & Useful AI for React apps
• 📜 Next.js + Supabase app in production: what would I do differently
• 📦 Material UI 6.0: A great release with many new features and improvements. More importantly, it introduces an opt-in integration with Pigment CSS for static CSS extraction and zero-runtime CSS-in-JS, as a replacement for Emotion, with the ability to support React Server Components and React 19.
• 📦 Code Hike 1.0 - Bridges the gap between Markdown to create rich interactive experiences
• 📦 Astro 5.0 alphas - stable globalRoutePriority, stable astro:env, CSRF protection by default…
• 🎥 Theo - React, is it time to move on?
• 🎥 Lee Robinson - Fast ecommerce with optimistic UI and Next.js

Don't miss the next email!

One of the few things I regularly read to keep up with the React world.

Theo BrowneFounder of ping.gg - Youtuber

💸 Sponsor

Increase Library Adoption with Interactive Tutorials

Are you looking to increase adoption of your JavaScript framework or library? TutorialKit by StackBlitz is a command-line interface (CLI) generator that allows you to create fully interactive code tutorials that engage your users and help them learn quickly.

To get started with TutorialKit, simply run the npm create tutorial command to launch a wizard that guides you through the tutorial site generation process. The scaffolded project takes care of the underlying tutorial logic and in-browser code editor, so you can focus on the content.

Whether you're launching a new framework or updating an existing library, TutorialKit ensures that your users have the best learning experience possible. Don't let your library go unnoticed. Get started now!

📱 React-Native

• 💸 Learn how to create a simple, type-safe PDF viewer with the Apryse SDK and React Native — complete with editing and annotation features.
• 🐦 Reanimated 4.0 will only work with Fabric (the new RN architecture)
• 🐦 React Native WebGPU on visionOS demo
• 👀 React Native PR - migrate template to Swift: Exciting to generate new React Native projects with AppDelegate in Swift instead of Objective-C.
• 🗓️ React Universe Conf - 🇵🇱 Wrocław - Sept 5-6. 10% discount with code "TWIR". Can’t make it in person? Register for Free Livestream Access! Speakers: Mike Grabowski, Fernando Rojo, Alex Hunt, Eric Vicenti...
• 📜 Shopify Tophat - Crafting a Delightful Mobile Developer Experience: Re-introduces “Tophat”, the macOS menubar app to increase React Native DX, that Shopify finally open-sourced last week. Apparently, this was an inspiration for Expo Orbit.
• 📜 Expo - What to do without CodePush: Microsoft App Center will shut down soon, including CodePush. This article suggests CodePush alternatives for Over-The-Air updates. It encourages you to adopt EAS Updates by offering a nice side-by-side comparison, but also mentions self-hosted alternatives.
• 📜 Introducing Oblivious HTTP support in Swift: New Swift API could be useful for React Native devs looking to increase privacy protection.
• 📜 How to build a Bluetooth Low Energy powered Expo app: Tutorial using react-native-ble-plx with Expo Config plugin.
• 📜 How to deploy App Store and Beta versions of React Native iOS app from Azure DevOps pipeline
• 📜 How Rosebud decided to go native with Expo
• 📦 React-Native-MMKV 3.0 - faster key/value storage, full rewrite to pure C++ TurboModule
• 📦 React Native visionOS 0.75
• 📦 Re.Pack 4.3 - RN 0.75, --watch flag
• 📦 Belt - Opionated CLI tool for starting a new React Native app
• 🎥 Beto - Building an Obscura Pro Camera App with React Native Vision Camera and Expo
• 🎥 Simon Grimm - When does local-first make sense?
• 🎥 The React Native Podcast rebrands to React Universe On Air: The popular Callstack podcast has rebranded to a new name matching the upcoming React Universe conf next week and for covering a broader React cross-platform scope.
• 🎙️ Rocket Ship 48 - MLKit & The React Native Paradox with Gant Laborde
• 🎙️ RNR 305 - On-device AI in React Native with Gant Laborde (yes, him again!)

🔀 Other

Rspack 1.0

Rspack is a very fast Rust bundler that is almost 100% compatible with Webpack, including its entire ecosystem of plugins and loaders. Rspack is well suited to being a great choice for many React apps using Webpack that need to bundle faster today. It’s easy to adopt thanks to its compatibility, but also future-proof with upcoming first-class React Server Components support. That’s why I’m migrating Docusaurus to Rspack by the way. I’d also recommend to take a look at Rsdoctor, it’s a great tool that also works with Webpack and will tell you the bottlenecks of your build.

• 📜 JS Dates Are About to Be Fixed
• 📜 How To Create An NPM Package
• 📜 How to make your web page faster before it even loads
• 📜 Fix Your Annoying Popups with the CloseWatcher API
• 📜 Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations
• 📜 Regexes Got Good: The History And Future Of Regular Expressions In JavaScript
• 📦 Node v20.17 - require() sync ESM graphs, matchesGlob()
• 📦 Node v22.7.0 - Experimental support for TS Enums/Namespaces, detect modules stable
• 📦 Deno 1.46 - The Last 1.x Release
• 📦 Test-server - Utility for creating HTTP and WebSocket servers for testing
• 📦 TypeScript 5.6 RC - Iterator methods, Disallowed Nullish and Truthy Checks…
• 📦 Turborepo 2.1

🤭 Fun

See ya! 👋