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...

Search for a command to run...

No comments yet. Be the first to comment.
Hi everyone! Krzysztof and Tomasz from Software Mansion here ๐ It's been a fairly calm week for the React ecosystem, but not for the React Native world. Meta has made an exciting announcement about the release of React Native 0.80, where they've dec...

Hi everyone! This week is relatively calm in the React ecosystem, but we still have various interesting blog posts and releases. Maybe we'll soon get some exciting news from React Summit that's about on Friday! On the React Native side, all the devs ...

Hi everyone! I thought I was on schedule for today's issue, until I realized that Dan Abramov wrote 4 RSC blog posts this week ๐. We also get great releases, including Storybook, LiveStore, Base UI, and the Lingo Compiler is a quite exciting innovat...

Hi everyone! Cyril and Matthieu from Theodo Apps here ๐. This week, the Remix team announced some big news. Microsoft has also made it easier to try out TypeScript Go rewriting. In the React Native world, there were a few minor but interesting relea...

Hi everyone! This week, we're delighted to finally have a preview of React Server Components support in React Router. I've also found some very interesting PRs on the React repo, and give you a glimpse of what could be coming soon! The React Native e...

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 :
๐ก Subscribe to the official newsletter to receive an email every week!
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.
๐ธ 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.
๐ฃ 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.
๐ 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
๐ฆ 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
๐๏ธ JSParty - How Vercel thinks about Next.js, with Tom Occhino
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.
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)
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, navigationBarTranslucent prop
๐ Bluesky App PR - Reduce Reanimated serialization traffic: Dan Abramov found a weird makeMutable trick 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
๐ฆ 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
See ya! ๐