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...
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
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.
⚛️ 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
expireTagandexpirePathAPIs: 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.
📣 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.fromEntrieswon’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.
📦 Remix 2.14 & React Router 6.28: Both releases preparing the arrival of React Router v7. New
future.unstable_routeConfigflag, deprecatingSerializeFromandjson/defer.📦 Storybook 8.4 - 1-click Component Testing in browser, smaller, RN Storybook 8
📦 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
🎥 Jack Herrington - Tanstack Start vs NextJS - Server Functions Battle
🎙️ 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
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 WebViewReact Native DevTools
Universal Tree Shaking (experimental)
React Compiler (experimental)
You might also like:
💸 Expo Starter – A Universal Mobile App Kit to Help You Get Started Quickly and Save Time and Money
👀 React Native Android PR - Edge-to-Edge Modal,
navigationBarTranslucentprop👀 Bluesky App PR - Reduce Reanimated serialization traffic: Dan Abramov found a weird
makeMutabletrick to optimize Reanimated serialization that doubled the ap📜 How to add an animated splash screen with expo-custom-assets
📜 Build an AI Voice Recorder with React Native (Firebase, Whisper API, Expo)
📦 React Native Audio API: Software Mansion unveils an early version of a lib implementing the Web Audio API.
📦 React Native Skia List: Why not make React Native lists even faster with a canvas 🤭 It’s harder and less familiar to implement classic UI layouts with Skia, but another 🐦 upcoming Yoga binding lib could help.
📦 React Native True Sheet: Unlike BottomSheet, it’s implemented native-side instead of with RN/Reanimated. The next release will support Android edge-to-edge.
📦 React Native Bottom Tabs 0.5 - Support for SVG and custom fonts
📦 React Native Windows 0.76 - Preview release of New Architecture
📦 React Native Worklets Core 1.5 - Support 0.76 and Nitro modules
📦 Radon IDE 0.0.22 beta - Expo Router 4, touch indicators, deeplink, pasta from clipboard
🔀 Other
📦 Node v23.2 - New
stripTypeScriptTypes(code)API, TypeScript in “active” development status: Note it’s also planned to unflag TS support!📦 TypeScript 5.7 RC - es2024 lib, check uninitialized variables, extensions rewriting
🤭 Fun
See ya! 👋