This Week In React 209

Next.js, Compiler, Motion, Remix, Storybook, Toldo, state-in-url, Expo 52, Screens, Skia List, Audio API, Edge-to-Edge, Windows, Godot, True Sheet, Nitro, Worklets, Node.js, TS, Rspack...

Nov 15, 2024

Hi everyone!

This week has been calm on the React side, I couldn't really pick any headline despite various interesting releases and articles.

Once again, the React Native ecosystem is on fire, with Expo 52, but not only!

Last chance to answer the State of React 2024 survey that is closing soon. But don't worry, I'll now annoy you with another one that just opened 😃: State of JS 2024.

We'd be super grateful if you'd share this newsletter or support us here :

To support me:

😘 Recommend the newsletter to your friends: it really helps!
💸 Sponsor the newsletter
🧵 Retweet the latest Twitter thread

💸 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

💸 Product for Engineers - The magic of small engineering teams
👀 React PR - Make prerendering always non-blocking: The Suspense siblings prerendering feature (delaying the React 19 release) is re-re-landing after a few back and forths. Turns out there was a hard-to-find one-line bug.
👀 react-server - Add initial README: The experimental package for creating custom React streaming server renderers now has some initial documentation. Provides 2 implementations: Fizz for SSR and Flight for RSCs. Advanced content, useful for framework authors looking to add RSC support.
👀 Next.js 15 PR - Add expireTag and expirePath APIs: The `revalidateTag` and `revalidatePath` APIs are being deprecated and renamed with more explicit names. Also it’s possible to pass multiple tags at once now.
👀 React Compiler case study - Adopting the compiler in Sanity Studio: Adapting the compiler improved their editor fps and helped surface bugs they didn’t know they had.
🐦 ”The first Turbopack prod build on Vercel is live”
📣 Framer Motion is now independent, introducing Motion: The popular React animation library plans to expand and support other frameworks.
🗓️ React-Africa - 🇲🇦 Casablanca - 29 November - Last call ! You still have a chance to get your ticket, and don’t forget the 10% discount with code "TWIR".
🗓️ React Day Berlin - 🇩🇪 Berlin - 13 & 16 December - 10% discount with code TWIR. Full line-up revealed !
📜 Uncontrolled or controlled: A matter of perspective: A component can both be controlled and uncontrolled. I decided to call this RSC: React Schrödinger Component.
📜 React is a programming language, and its rules are its syntax: Interesting thoughts on React rules you have to learn, and constraints that cannot be encoded into the programming language.
📜 The magic of keeping one level of abstraction per function: Encourages you to keep each function at a consistent level of abstraction. This includes React components, and I couldn’t agree more.
📜 React and FormData: Using Object.fromEntries won’t automatically handle multiple form inputs with the same name.
📜 Dynamically Generating PWA App Icons in the Next.js App Router: Dynamic generation of the PWA manifest to obtain different icons per environment.
📜 Make dangerouslySetInnerHTML Safer by Disabling Inline Event Handlers: React dangerouslySetInnerHTML will not execute scripts but can still execute inline handlers and introduce attack vectors. Make sure to sanitize your inputs.
📜 Supporting Offline Mode in TanStack Query: Using the Effect library.
📜 Conditional Props in React Using Type Discrimination
📜 Managing Interactive Demos in MDX
📜 Example of Using useSyncExternalStore with LocalStorage
📜 Vercel Makes Changes to Next.js To Simplify Self-Hosting
📦 Remix 2.14 & React Router 6.28: Both releases preparing the arrival of React Router v7. New future.unstable_routeConfig flag, deprecating SerializeFrom and json/defer.
📦 Storybook 8.4 - 1-click Component Testing in browser, smaller, RN Storybook 8
📦 Next.js AI Chatbot Template 3.0
📦 Toldo - Elevated dialog component for React, based on Radix
📦 State-in-URL - Deep links and url state synchronization without the hassle: An alternative to nuqs with different serialization opinions.
📦 ImmutableJS 5.0 - Improve Map typing, remove deprecated methods
📦 Gatsby 5.14 - Performance improvements and security fixes
🎥 Jack Herrington - Tanstack Start vs NextJS - Server Functions Battle
🎥 Theo - The fastest website ever? McMaster-Carr
🎙️ JSParty - How Vercel thinks about Next.js, with Tom Occhino

💸 Sponsor

Unleash Document Superpowers in Your React Apps!

Attention React enthusiasts: PSPDFKit is now Nutrient! 👋 We may have a new name, but our Web SDK is the same best in class choice you've come to rely on for viewing, annotating, and editing PDFs and other document types.

🏎️ Get started quickly with a free trial and extensive documentation
⏱️ Save time developing by leveraging the slick built-in UI and Baseline-UI, our new design system
🛠️ Leverage extensive APIs for processing and customization
🆘 Make use of our support and solution engineering team to get help from domain experts

We've got you covered on all platforms from mobile to backend.

Want to work on challenging problems and have impact on hundreds of applications? Check out our open positions such as Senior Frontend Developer.

📱 React-Native

Expo SDK 52

Just after the excellent React Native 0.76 milestone release, here comes Expo SDK 52, just as great. There’s a huge changelog and many expo package updates. My favorite items are:

New Architecture enabled by default for new projects, opt-in for existing ones. Expo Go now only supports the New Architecture.
Expo Router 4, React Navigation 7
Universal Server Components and Server Actions (experimental)
DOM Components with the ’use dom’ directive for incremental migrations or seamlessly integrating a WebView
React Native DevTools
Universal Tree Shaking (experimental)
React Compiler (experimental)