This Week In React 136
Next.js, Signals, Bling, Suspense, Server Components, useSyncExternalStore, Expo, Reanimated, Metro...
Hi everyone!
This week, the debate around the signal model continues. We also have a nice release of Next.js, unveiling a new cache system to facilitate the performant usage of Server Components on a serverless Edge runtime.
A lot of activity also on the React-Native side, with Expo 48, Expo Router 1.0, Expo Image 1.0, Reanimated 3.0, and the arrival of symlinks support in Metro!
💡 Check this newsletter on Twitter - visual format 🎨
To support me:
😘 Recommend the newsletter to your friends: it really helps!
📨 Reply to this email: feedback is welcome
💸 Sponsor
Build reusable blocks. Publish content faster. Get better Core Web Vitals and SEO.
Content editors : a game changer for companies that need to produce a lot of content and have a strong SEO strategy. Marketers and content editors can edit and publish pages without any complexity. Eliminate long delays and publish instantly. Pages and images are optimized thanks to Next.js in order to achieve perfect Core Web Vitals scores.
Developers : plug and play with your existing Next.js app. Number of benefits to use Suncel CMS as developer :
Build your reusable blocks in React
SEO Meta and sitemap are generated automatically (thanks to our SEO module)
Create your own custom settings in React
Admin customizable in React
No routing system needed to fit the CMS
Visit Suncel.io | 5mn demo video
⚛️ React
A nice release with some new features that Vercel devs had already given us a preview of. The new Metadata API is useful for SEO, works well with SSR streaming, server components and the new app directory. The new Route Handlers seem to have a good usability: co-located, just export the HTTP verb. Particularly excited by the new features around MDX (Rust compiler, Server Components): that should make Next.js content sites much lighter and faster to use. If I understand correctly, Next.js starts using a TypeScript codegen step for typed links (in addition to the TypeScript plugin). Turbopack compatibility with Webpack loaders can make it easier to adopt the new bundler.
The biggest surprise for me is the introduction of a cache API directly integrated to fetch(): allows a bit the same thing as ISR but with a finer granularity, at the component level, for each request. There is even a tagging system. Next.js remains portable: the cache can be hosted on your own infrastructure, or use a local LRU cache. Of course, this is optimized for deploying on Vercel. A dedicated article gives more details and explains the limits of the ISR model: Vercel Cache API: A progressive cache, integrated with Next.js. See also the thread of Sebastian Markbåge.
The Evolution of Signals in JavaScript
This article by Ryan Carniato (SolidJS) traces the history of signals in the frontend, through KnockoutJS, MobX and many other solutions.
Signals remained the trending topic of the week. I suggest you read for yourself the many discussions that took place on Twitter:
Andrew Clark clarifies his position and is not closed to introducing signals into React. The React Forget compiler could compile to signals.
Miško Hevery explains how signals avoid perf problems on the drilling props.
Evan You prefers an understandable mutable model to an immutable model that leaks.
Devon Govett reminds us why "unidirectional data flow" was adopted and points out some problems with signals.
Jordan Walke mentions that they considered using a reactive model when React was created. Rejected because it changed the semantics of the language.
Dan Abramov explains that the user expects to see the same interface for the same data. He explains the value of using "raw values" (not wrapped in any container).
My position: I largely share the same views as the React team and think we need to continue to innovate on the current model, despite Signals looking attractive in the short term. I hope that eventually JavaScript will support better the immutable model, and that the React Forget compiler is only a transitional step.
👥 Matt Carroll + Sean Keegan: 2 DevRels recently joined the React team.
📜 Module Extraction: The Silent Web Revolution: React frameworks can already separate client/server code in the same module. But frameworks like Qwik go further and can even extract closures (including captured variables). Let's see if this idea scales well on big apps.
📜 Why useEffect May Not Be the Best Abstraction: criticism of useEffect and comparison with Qwik code.
📜 i18n translations in Next.js 13's app-dir for server/client components: the author of Next-translate explains some difficulties encountered to release the v2 of his lib related to Server Components, but reports some interesting advantages like the reduction of the js bundle size.
📜 React Is Holding Me Hostage: a rather fair criticism of React that praises the merits of signals and a more reactive model.
📜 useSyncExternalStore - First Look: ce hook est plus utile qu'il n'en a l'air, ne passez pas a coté!
📜 Owncast v0.1.0 Retrospective - Frontend Web Rewrite: feedback on the switch from Preact to React/Next.js, including an interesting social outcome (more contributors).
📦 Suspense: toolbox for React Suspense, Brian Vaughn's new project.
📦 TanStack Bling: new framework-agnostic project of the TanStack on which the next TanStack Start meta-framework should be based.
📦 Forgetti: a dev doesn't want to wait for the React Forget compiler so he works on his own compiler.
📦 TanStack Query v5.0.0-alpha.0: preview of upcoming v5 improvements: infinite query, optimistic updates, bundle size...
📦 Tinasaurus - Edit your Docusaurus site with TinaCMS: CMS that integrates well with Docusaurus and allows the use of MDX components.
🎙️ Reactiflux Podcast - Behind the React Documentary with Ida Bechtle and Christopher Chedeau
💸 Sponsor
Build and Run Synthetic Monitoring That Scales
You build it; you own it! It's a simple mantra that has driven software development for years. But how do you monitor complex React applications the best way?
First: use Playwright to mimic user flows and guarantee that your app works.
Second: be confident that the used APIs are up and running.
"Monitoring as Code" - is a new way to define, test & deploy your entire application monitoring directly from code.
Code your monitoring setup and keep in version control
Test your application in preview environments to avoid bugs and regressions
Deploy your tests and start monitoring production
Bring your monitoring next to your code for free
📱 React-Native
Nice release. We find back the highlights of the beta:
React Native 0.71.3 - React 18.2.0
Yoga improvements (Flexbox) that come with React-Native
EAS builders under M1 by default
Hermes engine by default
All Expo modules support Fabric - experimental
Some updates since the beta:
Expo Image 1.0 now stable
Expo Router 1.0 now stable (dedicated blog post)
Reanimated 3.0 has just been released in a stable version, with a new Shared Elements Transitions feature (demo). It is now possible to use shared values in inline styles. The library has been rewritten to improve performance, DX and prepare for the arrival of new features. It is compatible with Fabric and the Reanimated 2 API to facilitate the upgrade, but the Reanimated 1 API has been removed.
📜 React Native App Clip: New Capabilities and Reduced App Size
💬 RFC: introduce reactNativeMetadata to package.json: proposes to add metadata in
package.jsonfor various reasons (apps + libraries).💬 RFC: Lazy bundling: to start your big app faster in dev thanks to dynamic imports.
📦 Metro 0.75.1: experimental support for symlinks and
package.json"exports"!📦 Restyle 2.4: numerous performance improvements on the Shopify styling library.
📦 Dank Style (alpha): new universal styling library for Next.js and React-Native.
👀 Expo + React-Native Server Components demo: I've been talking about this for a while, and Evan Bacon has just released a first demo that shows it's possible!
👀 BottomSheet - web support: PR merged, coming in v5.
⚠️ Fastlane - Update immediately to avoid locked Apple ID account
🎙️ The React Native Show, Coffee Talk #8 - State of React Native
🎥 A Beginner's Guide to 3D Animations in React Native with three.js
🧑💻 Jobs
🧑💼 Passionfroot - Senior Full-stack Engineer (Remix) - €160k+, Berlin/remote
Passionfroot's mission is to empower the independent businesses of tomorrow via YouTube, Podcasts, Social Media, and Newsletters. Join us in building a tool that will empower creators globally to build scalable, sustainable businesses.
🧑💼 Callstack - Senior React Native Developer - Fully Remote, PLN 21-32k net on B2B, monthly
Do you want to work on the world's most used apps? Would you like to co-create the React Native technology? Join the Callstack team of React & React Native leaders. Check our website for more details. We are looking forward to seeing your application - show us what you've got!
🧑💼 G2i - 100% Remote React Native Jobs
We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.
🔀 Other
Babel 7.21: support TypeScript 5.0 + decorators
Angular v16.0.0-next.0: signals
🤭 Fun
See ya! 👋
great newsletter 😏