<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Sébastien Lorber]]></title><description><![CDATA[React dev]]></description><link>https://daily.sebastienlorber.com</link><generator>RSS for Node</generator><lastBuildDate>Tue, 14 Apr 2026 03:41:42 GMT</lastBuildDate><atom:link href="https://daily.sebastienlorber.com/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[This Week In React #239 : ViewTransition, Suspense, TanStack, Zero, use-mcp, Compiler, Intl-T | 0.80, Stable APIs, iOS prebuilds, shadcn, Expo...]]></title><description><![CDATA[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...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-239-viewtransition-suspense-tanstack-zero-use-mcp-compiler-intl-t-080-stable-apis-ios-prebuilds-shadcn-expo</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-239-viewtransition-suspense-tanstack-zero-use-mcp-compiler-intl-t-080-stable-apis-ios-prebuilds-shadcn-expo</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 20 Jun 2025 12:29:35 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1750422507021/c6c7deec-87a1-4c14-bb38-38eaaa3c2dee.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone! <strong>Krzysztof and Tomasz from</strong> <a target="_blank" href="https://swmansion.com/?utm_source=thisweekinreact"><strong>Software Mansion</strong></a> here 👋</p>
<p>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 decided to officially freeze the Old Architecture. Make sure you're ready to adapt your app to the New Architecture, as it seems like it could be the last moment to do so.</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://coderabbit.link/tUMe5xC"><img src="https://thisweekinreact.com/emails/issues/239/coderabbit.jpg" alt="Free AI Code Reviews in IDE - VSCode, Cursor, Windsurf" /></a></p>
<p><a target="_blank" href="https://coderabbit.link/tUMe5xC"><strong>Free AI Code Reviews in IDE - VSCode, Cursor, Windsurf</strong></a></p>
<p><a target="_blank" href="https://coderabbit.link/6ZXULSK">CodeRabbit</a> is the AI code review platform purpose built to speed up code reviews and improve code quality. Integrating seamlessly into git workflows and existing toolchains, it delivers codebase-aware reviews and supports all programming languages.</p>
<p>Now they are excited to deliver AI code reviews directly in VS Code, Cursor, and Windsurf–letting you and your team (vibe) code with confidence and review while keeping in flow.</p>
<p>Even better: code reviews in the IDE are free! That’s right: line-by-line reviews and one-click fixes, all in your IDE at no cost to you.</p>
<p><a target="_blank" href="https://coderabbit.link/LszC1pB">Install the extension</a> and start vibe checking your code today!</p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<ul>
<li><p>💸 <a target="_blank" href="https://go.posthog.com/twir-jun18">Product for Engineers - The hidden benefits of being an open-source startup</a></p>
</li>
<li><p>📊 <a target="_blank" href="https://blog.isquaredsoftware.com/2025/06/react-community-2025/">The State of React and the Community in 2025</a></p>
</li>
<li><p>📖 <a target="_blank" href="https://github.com/facebook/react/blob/156b7a96f5669470182ad226306184576d6f150f/compiler/packages/babel-plugin-react-compiler/src/Inference/MUTABILITY_ALIASING_MODEL.md">React Compiler – The Mutability &amp; Aliasing Model</a></p>
</li>
<li><p>🗓️ <a target="_blank" href="https://reactsummit.us/?utm_source=Newsletter&amp;utm_medium=ThisWeekinReact">React Summit US</a> - 🇺🇸 New York - 18 &amp; 21 Nov. Final early bird opportunity! Join Addy Osmani (Google Chrome), Shaundai Person (Netflix), Shawn Swyx Wang &amp; more!</p>
</li>
<li><p>📜 <a target="_blank" href="https://plainvanillaweb.com/blog/articles/2025-06-12-view-transitions/">Bringing React's &lt;ViewTransition&gt; to vanilla JS</a>: A good explanation how view transitions are supposed to work and how you can implement them on your own.</p>
</li>
<li><p>📜 <a target="_blank" href="https://twofoldframework.com/blog/composable-streaming-with-suspense">Composable streaming with Suspense</a>: React's Suspense composition allows you to easily implement features like lazy loading or out-of-order rendering without complex configurations and external dependencies.</p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.swmansion.com/real-time-gesture-recognition-in-videoconferencing-4711855a1a53">Real-Time Gesture Recognition in Videoconferencing</a>: browser-based video effects using MediaPipe, Fishjam and Smelter.</p>
</li>
<li><p>📜 <a target="_blank" href="https://jjenzz.com/zero-is-not-local-first-its-better/">Zero is Not Local-First. It's Better.</a>: Zero library is a new sync engine that offers "partial sync first" rather than a full "local-first" approach, meaning it only syncs the data your application actively queries and uses, making it efficient for apps with large datasets. You don't need to take care of cache invalidation because the server is still the source of truth.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.premieroctet.com/blog/en/tanstack-future-react-frameworks">TanStack Start: the Future of React Frameworks?</a>: Describes the advantages of the TanStack Start framework, which may potentially become a competitor to well-known frameworks like Remix or Next.js.</p>
</li>
<li><p>📜 <a target="_blank" href="https://largeapps.dev/case-studies/twitter/">Building the Twitter 1.0 Web Experience</a>: A case study on how Twitter Lite PWA was optimized over time and the benefits it brought.</p>
</li>
<li><p>💸 <a target="_blank" href="https://www.road-to-next.com/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=this_week_in_react_1.1">The Road to Next - Master Full-Stack Web Development with Next.js 15 and React 19</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/facebook/relay/releases/tag/v20.0.0">Relay 20.0 – ESLint plugin update</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/modelcontextprotocol/use-mcp">use-mcp - A lightweight React hook for connecting to Model Context Protocol servers</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/nivandres/intl-t">Intl-T – A Object-Typed Node-Based i18n Translation Library</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://erikras.com/blog/final-form-to-typescript">React Final Form 7.0 – All modules modernized to TypeScript</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://dev.to/meteor/faster-builds-in-meteor-33-modern-build-stack-with-swc-and-bundler-optimizations-fm2">Meteor 3.3 – Faster Builds with SWC and Bundler Optimizations</a> – 60% faster builds</p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=PmXZvGtB7_U">Theo – Defending SQL in JSX</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=c7FQP-tUn1U">Shruti Kapoor – You’re Managing State Wrong in React</a></p>
</li>
<li><p>🎥 <a target="_blank" href="http://youtube.com/watch?v=xadj32ExtWo&amp;list=PLKGgD1M40S4hHnZtFi_kPgRRjMay_2KMp">Future Frontend Conf – YouTube Playlist</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://get.embrace.io/web-rum-launch-webinar?utm_source=newsletter&amp;utm_medium=paid&amp;utm_campaign=twir-6-18-2025"><img src="https://thisweekinreact.com/emails/issues/239/embrace.jpg" alt="Embrace Web RUM provides user-focused observability" /></a></p>
<p><a target="_blank" href="https://get.embrace.io/web-rum-launch-webinar?utm_source=newsletter&amp;utm_medium=paid&amp;utm_campaign=twir-6-18-2025"><strong>Embrace Web RUM provides user-focused observability</strong></a></p>
<p>Want to understand where technical performance actually impacts user engagement? With Embrace Web RUM, you can connect telemetry to what users are actually experiencing, so you know what's broken, why it matters, and how to fix it.</p>
<p>Full session timelines. Core Web Vitals and JS exceptions in context. User journeys for custom flows with intelligent issue correlation. Built on OpenTelemetry for powerful integration with existing observability systems.</p>
<p><a target="_blank" href="https://get.embrace.io/web-rum-launch-webinar?utm_source=newsletter&amp;utm_medium=paid&amp;utm_campaign=twir-6-18-2025">Join the webinar to learn more.</a></p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<p><a target="_blank" href="https://reactnative.dev/blog/2025/06/12/react-native-0.80"><img src="https://thisweekinreact.com/emails/issues/239/RN_banner.png" alt="React Native 0.80 overview" /></a></p>
<p><a target="_blank" href="https://reactnative.dev/blog/2025/06/12/react-native-0.80"><strong>React Native 0.80</strong></a></p>
<p>This milestone release announces the goal of <a target="_blank" href="https://reactnative.dev/blog/2025/06/12/moving-towards-a-stable-javascript-api">Moving Towards a Stable JavaScript API</a>, an ongoing effort to accurately define the JS and TypeScript APIs.</p>
<p>Here are the highlights:</p>
<ul>
<li><p>React 19.1: Its new <code>captureOwnerStack()</code> API can improve the DX of error overlays.</p>
</li>
<li><p>JavaScript deep imports deprecation: You’ll have to import everything from the root <code>’react-native’</code> exports.</p>
</li>
<li><p>Strict TypeScript API (opt in): The Strict TypeScript API is an opt-in preview offering more accurate TypeScript types for the react-native package, generated directly from source code.</p>
</li>
<li><p>Legacy Architecture Freezing &amp; Warnings: The React Native team will now focus on the New Architecture.</p>
</li>
<li><p>iOS Prebuilds for React Native: iOS builds are roughly 12% faster thanks to shipping prebuilds for Folly and GLog rather than building them from source. In a future release, the rest of React Native core will be shipped as a prebuild.</p>
</li>
</ul>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://withfra.me">WithFrame - Pre-Built React Native Templates</a></p>
</li>
<li><p>📣 <a target="_blank" href="https://expo.dev/changelog/react-native-80">Expo support for React Native 0.80</a>: You’ll have to use the Expo 54 canary until it becomes stable later this summer, bumping directly to RN 0.81.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/shadcn-ui/ui/pull/7540">shadcn/ui CLI PR - Support scaffolding components for Expo apps using the CLI and registry system</a></p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/bluesky-social/social-app/pull/8295">Bluesky mobile app PR – enable New Architecture</a></p>
</li>
<li><p>💬 <a target="_blank" href="https://github.com/flutter/flutter/issues/170310">Flutter - Support for iOS 26 “Liquid glass”</a>: Interesting to know that Flutter will not add support for iOS 26 and Material 3 Expressive in core.</p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/saul_sharma/status/1934467342576009254">Bring every iOS 26 Liquid Glass feature from WWDC to React Native</a></p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/janicduplessis/status/1933589353714102511">Speed up iOS e2e test runs with Maestro</a>: Avoid generating recursive accessibility labels when not needed, will be shipped in 0.81.</p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.swmansion.com/best-react-native-debugging-tools-in-2025-a95dcac7a014">Best React Native Debugging Tools in 2025</a>: An overview of the current state of debugging tools in the React Native ecosystem.</p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/simplifying-auth-flows-with-protected-routes">Simplifying auth flows in Expo Router with protected routes</a>: How to use the new Expo Router's protected routes to control which screens users can see based on their authentication state – directly in your layout files.</p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/what-if-usestate-was-your-backend">Expo + InstantDB – What if useState was your backend?</a>: The tutorial shows how, with InstantDB, you can simplify backend communication in your Expo app, providing a useState-like experience.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/toss/granite">Granite – Brownfield-friendly React Native framework for microservice apps</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/mrousavy/react-native-vision-camera/releases/tag/v4.7.0">VisionCamera 4.7 - Android 16 KB page size support</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-gesture-handler/releases/tag/2.26.0">Gesture Handler 2.26 - RN 0.80 support, relation props in Pressable</a>.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/callstack/react-native-builder-bob/releases/tag/create-react-native-library%400.51.0">create-react-native-library 0.51 - 16 KB page size on Android</a>.</p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=L5f8Gy91Gv4">Code with Beto – Liquid Glass Bottom Tabs</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=Ud6TSlnEzCc">Michał Pierzchała – Shrinking Android app size with R8</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://share.transistor.fm/s/43ce5c20">Rocket Ship 72 – The Frozen Arch, Killing my App &amp; React Native World Domination</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://infinite.red/react-native-radio/rnr-334-react-native-macos-with-saad-najmi">RNR 334 – React Native MacOS with Saad Najmi</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>💡 <a target="_blank" href="https://github.com/typed-rocks/type-buddy">TypeBuddy</a> – write TypeScript types as functions (<a target="_blank" href="https://typed-rocks.github.io/type-buddy/">playground</a>)</p>
</li>
<li><p>📜 <a target="_blank" href="https://developer.chrome.com/blog/gap-decorations?hl=en">A new way to style gaps in CSS</a> – gap decorations available for developer trial in Chrome and Edge 139</p>
</li>
<li><p>📜 <a target="_blank" href="https://infrequently.org/2025/06/the-ghost-of-christmas-past/">Safari at WWDC '25: The Ghost of Christmas Past</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://nodesource.com/blog/worker-threads-nodejs-multithreading-in-javascript">Worker Threads in Node.js: A Complete Guide for Multithreading in JavaScript</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://jakearchibald.com/2025/animating-zooming/">Animating zooming using CSS: transform order is important</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://allthingssmitty.com/2025/06/16/using-await-at-the-top-level-in-es-modules/">Using await at the top level in ES modules</a> – real-world use cases, constraints and gotchas</p>
</li>
<li><p>📜 <a target="_blank" href="https://overreacted.io/suppressions-of-suppressions/">Dan Abramov – Suppressions of Suppressions</a> – some thoughts on linter suppressions and social contracts behind writing software</p>
</li>
<li><p>📦 <a target="_blank" href="https://h3.dev/blog/v2-beta">H3 v2 beta - Fully rewritten on web standards, backward-compatible, faster</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://dev.to/playwright/whats-new-in-playwright-v152-v153-fix-with-ai-describable-locators-and-more-dl9">Playwright v1.52 &amp; v1.53 – Fix with AI, Describable Locators</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/honojs/hono/releases/tag/v4.8.0">Hono 4.8 - Route Helper, SSG, 3rd party middleware</a></p>
</li>
<li><p>📦 <a target="_blank" href="http://cosmos.gl">cosmos.gl</a> <a target="_blank" href="https://openjsf.org/blog/introducing-cosmos-gl">– High-Performance Graph Visualization Engine from the OpenJS Foundation</a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://www.linkedin.com/feed/update/urn:li:activity:7339605943137009664"><img src="https://thisweekinreact.com/emails/issues/239/meme2.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/mrousavy/status/1922994477712453742"><img src="https://thisweekinreact.com/emails/issues/239/meme1.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://nerdy.dev/fathers-day-2025"><img src="https://thisweekinreact.com/emails/issues/239/meme3.jpg" alt="alt" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #238: React Router, RSC, shadcn/ui, React Aria, TanStack, ForesightJS, Cosmos | iOS 26, JSI, Nitro, WebView, Windows, Tabs...]]></title><description><![CDATA[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 ...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-238-react-router-rsc-shadcnui-react-aria-tanstack-foresightjs-cosmos-ios-26-jsi-nitro-webview-windows-tabs</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-238-react-router-rsc-shadcnui-react-aria-tanstack-foresightjs-cosmos-ios-26-jsi-nitro-webview-windows-tabs</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 13 Jun 2025 12:00:44 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1749816014454/075a13b8-2366-413d-8820-2cd87a838ded.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>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 <a target="_blank" href="https://reactsummit.com/">React Summit</a> that's about on Friday!</p>
<p>On the React Native side, all the devs are already working on iOS 26 Liquid Glass support and other things announced by Apple yesterday. This new design thing is rather controversial and subject to a lot of mockery 😂. React Native 0.80 is just around the corner, I'll keep all this for later, but you can get a sneak peek in <a target="_blank" href="https://www.youtube.com/live/UTaJlqhTk2g?t=6520s">Alex Hunt talk at App.js</a>.</p>
<p>The JS ecosystem has been rather active with Oxlint 1.0 and various interesting Node.js news.</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://go.posthog.com/twir-jun11"><img src="https://thisweekinreact.com/emails/issues/238/getwrong.jpg" alt="What engineers get wrong about communication" /></a></p>
<p><a target="_blank" href="https://go.posthog.com/twir-jun11"><strong>What engineers get wrong about communication</strong></a></p>
<p>Engineers spend most of their time doing two things: coding and communicating. The first has endless amounts written about it; the second much less so.</p>
<p>To address this injustice, <a target="_blank" href="https://go.posthog.com/twir-jun11-ph">PostHog</a> shares the biggest mistakes they see engineers make when communicating and what they do as a remote, async, engineering-led company to eliminate them.</p>
<p><a target="_blank" href="https://go.posthog.com/twir-jun11">Read it here</a>.</p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<ul>
<li><p>💸 <a target="_blank" href="https://bit.cloud/solutions/design-systems?utm_source=ThisWeekInReact&amp;campaign=DesignSystem">Build professional design system in less than a day, using Hope AI, new model by</a> <a target="_blank" href="http://Bit.Cloud">Bit.Cloud</a><a target="_blank" href="https://bit.cloud/solutions/design-systems?utm_source=ThisWeekInReact&amp;campaign=DesignSystem">.</a></p>
</li>
<li><p>🦋 <a target="_blank" href="https://bsky.app/profile/react.dev/post/3lqxleaezcs2p">React Conf - First speakers announced</a>: I guess we’ll have React Compiler news in October.</p>
</li>
<li><p>📣 <a target="_blank" href="https://remix.run/blog/rr-governance">React Router Open Governance</a>: React Router gets more community-driven, forming a Steering Committee initially composed of Remix team members. RFCs will follow stages inspired by the TC39 process. This also gives a sneak peek of what you can expect in v8. See also <a target="_blank" href="https://www.youtube.com/watch?v=qh2TRkNnyVw">video comments from Alem Tuzlak</a>.</p>
</li>
<li><p>📜 <a target="_blank" href="https://overreacted.io/how-imports-work-in-rsc/">How Imports Work in RSC</a>: Dan Abramov deep dives on module systems. The JS one creates singletons and is quite different from the C one, which creates duplication by default. RSCs permit creating a single program spanning across two computers, with two independent module systems. By the way, you can now have a <a target="_blank" href="https://overreacted.io/im-doing-a-little-consulting/">1:1 consulting call with Dan</a>.</p>
</li>
<li><p>📜 <a target="_blank" href="https://romgrk.com/posts/reactivity-is-easy/">Reactivity is easy</a>: Nice interactive article showing how to let cells of a data grid read from React context without useless re-renders.</p>
</li>
<li><p>📜 <a target="_blank" href="https://bikeshedd.ing/posts/use_state_should_require_a_dependency_array/">useState should require a dependency array</a>: Interesting interactive article advocating for <code>useState(initialState, deps)</code> with good arguments. I’m not sure I agree, though: using a <code>key</code> and splitting your UI into smaller components is probably enough, but curious to see what others think about this idea.</p>
</li>
<li><p>📜 <a target="_blank" href="https://nuqs.47ng.com/blog/beware-the-url-type-safety-iceberg">Beware The URL Type-Safety Iceberg</a>: The author of the <code>nuqs</code> library warns of the hidden dangers of search parameters. You’d rather design beautiful URLs, stay within size limits, deal with URL update rate limits, validate params, and be able to migrate old URLs to a new validation schema.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.nico.fyi/blog/async-local-storage-to-prevent-props-drilling">Use Async Local Storage to prevent props drilling in Next.js Route handlers</a>: It's like React Context but for Node.js functions.</p>
</li>
<li><p>📜 <a target="_blank" href="https://mxd.codes/articles/how-to-integrate-plausible-analytics-in-a-next-js-app-without-getting-blocked">How to Integrate Plausible Analytics in a Next.js App</a>: Proxying analytics API calls makes them less likely to trigger ad-blocking extensions.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.deepintodev.com/blog/how-to-create-your-own-simple-use-state-hook">How to Create Your Own Simple useState Hook</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.epicreact.dev/how-react-suspense-works-under-the-hood-throwing-promises-and-declarative-async-ui-plbrh">How React Suspense Works Under the Hood: Throwing Promises and Declarative Async UI</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://lou.gg/blog/astro-integrations-explained">Astro Integrations Explained</a></p>
</li>
<li><p>💸 <a target="_blank" href="https://whitelabel-loyalty.com/products/dynamo/?utm_source=email&amp;utm_medium=newsletter&amp;utm_campaign=react">Build a working reward flow in minutes — with Dynamo</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/TanStack/router/discussions/2863#discussioncomment-13104960">TanStack Router 1.121</a>: Important milestone introducing a new <code>@tanstack/react-start</code> package. TanStack Start is now just a Vite plugin.</p>
</li>
<li><p>📦 <a target="_blank" href="https://ui.shadcn.com/docs/changelog">shadcn/ui - June 2025 updates</a>: Upgrades <code>Calendar</code> to the latest <code>react-day-picker</code>, introduces a new CLI command to migrate imports to the new unified <code>radix-ui</code> package.</p>
</li>
<li><p>📦 <a target="_blank" href="https://foresightjs.com/">ForesightJS 2.0 - Predict user intent to prefetch</a>: This library predicts mouse cursor and keyboard navigation to prefetch data earlier than mouse hover. Docs show how to integrate it with React Router and Next.js link components. TanStack will soon have a similar feature built in (<a target="_blank" href="https://x.com/tannerlinsley/status/1908723776650355111">tweet</a>). This might also be useful in the future for pre-rendering with React <code>&lt;Activity&gt;</code>.</p>
</li>
<li><p>📦 <a target="_blank" href="https://react-spectrum.adobe.com/releases/2025-06-05.html">React Aria - June 5 release - Drag and drop support in React Aria Tree</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://puckeditor.com/blog/puck-019">Puck 0.19 - Visual editor for React - Slots API &amp; performance gains</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://astro.build/blog/astro-590/">Astro 5.9 - Experimental CSP support, render Markdown in content loaders</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/react-cosmos/react-cosmos/releases/tag/v7.0.0">React Cosmos 7.0 - Develop UI components in isolation - Support React 19,</a> <a target="_blank" href="http://Next.js">Next.js</a> <a target="_blank" href="https://github.com/react-cosmos/react-cosmos/releases/tag/v7.0.0">15</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=JVcZLEFaC2M">Youssef - The Most Common React Query Mistake</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=5SPqO6NR_Bg">Jack Herrington - Remix V3's Fatal Flaw</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=HBpOzj-iBUg">Theo - Why Tech Companies Are Moving Off React</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://syntax.fm/show/908/storybook-has-evolved-w-jeppe-reinhold">Syntax 908 - Storybook Has Evolved w/ Jeppe Reinhold</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://go.clerk.com/vKxY0Sv"><img src="https://thisweekinreact.com/emails/issues/238/LinkedInReddit.jpg" alt="Guide: How to build secure B2B applications" /></a></p>
<p><a target="_blank" href="https://go.clerk.com/vKxY0Sv"><strong>Guide: How to build secure B2B applications</strong></a></p>
<p>Learn how to architect a scalable, multi-tenant B2B SaaS app using Clerk and Supabase. This technical guide covers:</p>
<ul>
<li><p>🔐 Organization-level authentication</p>
</li>
<li><p>👥 Scoping Supabase data by tenant</p>
</li>
<li><p>🧩 Mapping users to organizations securely</p>
</li>
<li><p>🧑‍💻 Structuring your React app for clean multi-tenancy</p>
</li>
</ul>
<p>🚀 Apply these patterns to solve real-world auth and data isolation challenges in modern SaaS development. <a target="_blank" href="https://go.clerk.com/vKxY0Sv">Read our step-by-step guide</a>.</p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<ul>
<li><p>💸 <a target="_blank" href="https://ide.swmansion.com/?utm_source=thisweekinreact.com">Radon IDE – Debug Redux and React Query seamlessly inside your editor.</a></p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/tmikov/status/1932149053116313703">Introducing JSI's New Runtime Data APIs</a>: A new <code>jsi::Runtime:setRuntimeData(uuid,data)</code> C++ API to help library authors store custom data in the runtime that automatically manages the ownership and lifecycle.</p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/Baconbrix/status/1932194950403232110">New iOS 26 Liquid Glass UI works with Expo Router</a></p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/Baconbrix/status/1932385006321860909">Using Apple AI Foundation Models to generate React components offline on iOS</a></p>
</li>
<li><p>🧵 <a target="_blank" href="https://x.com/jamonholmgren/status/1932200003096990131">"Apple today took a shot at React Native"</a>: Jamon Holmgren’s reply to Apple’s criticism of cross-platform solutions in a WWDC25 video.</p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/mobile-game-development-with-expo">Building NeonCity: A fast-paced mobile game made with React Native, Reanimated, and Expo</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://tarikpinarci.com/blog/expo-live-activity-timer">Building a Live Activity Timer in Expo</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/mrousavy/nitro/releases/tag/v0.26.0">Nitro Modules 0.26 - RN 0.80 support, Date support</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/react-native-webview/react-native-webview/releases/tag/v13.15.0">WebView 13.15 - Add support for Google Pay (Payment Request API)</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/callstackincubator/react-native-bottom-tabs/releases/tag/react-native-bottom-tabs%400.9.2">Bottom Tabs 0.9.2 - Support iOS 26 Liquid Glass tabs, <code>useBottomTabBarHeight</code></a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/tarikfp/expo-pencilkit-ui">Expo PencilKit UI - Native Apple PencilKit integration for iOS drawing experiences</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/microsoft/react-native-windows/releases/tag/react-native-windows_v0.79.0">React Native Windows 0.79 - Improving Fabric feature parity</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/jpudysz/react-native-unistyles/releases/tag/v3.0.0-rc.5">Unistyles 3.0 RC5 - Golden RC, release soon</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/Robert27/expo-github-cache">Expo GitHub Cache - Remote build cache provider storing artifacts in GitHub releases</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://blog.google/products/android/android-16/">Android 16</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=fxxaOu6pLnU">Dan’s Lab - 2D Game Physics with Matter.js, React Native Skia and Expo</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=_Yo1kHz7h_I">Michał - You’re Loading Too Much Unnecessary Hermes Polyfills</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=r9pmtMmbHus">Simon Grimm - Is React Native the Future of Mobile Apps?</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>📊 <a target="_blank" href="https://survey.devographics.com/en-US/survey/state-of-css/2025">State of CSS 2025 - Survey went live</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://nodejs.org/en/blog/announcements/node-18-eol-support">Beware of End-of-Life Node.js Versions - Upgrade or Seek Post-EOL Support</a>: The Node.js team recommends v18 users to skip v20 and upgrade to v22 directly.</p>
</li>
<li><p>📦 <a target="_blank" href="https://oxc.rs/blog/2025-06-10-oxlint-stable">Oxlint 1.0</a>: The first stable version of the Rust linter claims to be 50-100x faster than ESLint and compatible with 500 rules already, including <code>eslint-plugin-react</code> and <code>eslint-plugin-react-hooks</code>.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/nodejs/amaro/releases/tag/v1.0.0">Amaro 1.0 -</a> <a target="_blank" href="http://Node.js">Node.js</a> <a target="_blank" href="https://github.com/nodejs/amaro/releases/tag/v1.0.0">TypeScript wrapper and type stripper</a>: To me, this is the “real” launch of native TypeScript support in Node.js. For Node 24.3, they are also <a target="_blank" href="https://github.com/nodejs/node/pull/58643">removing the scary experimental warning</a> that made it awkward to use this feature in production for anything serious.</p>
</li>
<li><p>📦 <a target="_blank" href="https://webkit.org/blog/16993/news-from-wwdc25-web-technology-coming-this-fall-in-safari-26-beta/">WebKit in Safari 26 beta - SVG icons, install every site as PWA, WebGPU, SwiftUI WebView, CSS anchor positioning and scrol-driven animations, JS <code>using</code> and more</a>: An exciting release full of interesting things!</p>
</li>
<li><p>📦 <a target="_blank" href="https://jestjs.io/blog/2025/06/04/jest-30">Jest 30 - Faster, uses less memory and comes with many new testing features</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/pnpm/pnpm/releases/tag/v10.12.1">pnpm 10.12 - New catalog features, new <code>enableGlobalVirtualStore</code> experimental flag</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://nodejs.org/en/blog/release/v24.2.0">Node 24.2 - <code>import.meta.main</code> to detect app entrypoint</a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://x.com/thekitze/status/1932132390937530421"><img src="https://thisweekinreact.com/emails/issues/238/meme.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/cedric_dev/status/1932553258121457808"><img src="https://thisweekinreact.com/emails/issues/238/meme2.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/thymikee/status/1932123405459075466"><img src="https://thisweekinreact.com/emails/issues/238/meme3.jpg" alt="alt" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #237 : RSC, TanStack, Storybook, Lingo Compiler, LiveStore, Base UI | Legacy Arch, Hermes N-API, 120fps, ReactRaptor, DevTools | TC]]></title><description><![CDATA[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...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-237-rsc-tanstack-storybook-lingo-compiler-livestore-base-ui-legacy-arch-hermes-n-api-120fps-reactraptor-devtools-tc</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-237-rsc-tanstack-storybook-lingo-compiler-livestore-base-ui-legacy-arch-hermes-n-api-120fps-reactraptor-devtools-tc</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 06 Jun 2025 11:02:08 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1749207691386/b5fd8cc6-6dea-43f1-a732-1f320c283e5c.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>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 innovation. The community is still processing last week's <a target="_blank" href="https://remix.run/blog/wake-up-remix">Remix awakening</a> with many videos and podcasts commenting on the news.</p>
<p>React Native devs were at App.js last week, where the React Native team unveiled their plan to freeze the Legacy Architecture.</p>
<p>The last TC39 meeting was also quite productive, with 3 proposals progressing to stage 4 among other things. We also got various interesting announcements from the Vite ecosystem.</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://coderabbit.link/LszC1pB"><img src="https://thisweekinreact.com/emails/issues/237/coderabbit.jpg" alt="Free AI Code Reviews in IDE - VSCode, Cursor, Windsurf" /></a></p>
<p><a target="_blank" href="https://coderabbit.link/LszC1pB"><strong>Free AI Code Reviews in IDE - VSCode, Cursor, Windsurf</strong></a></p>
<p><a target="_blank" href="https://coderabbit.link/6ZXULSK">CodeRabbit</a> is the AI code review platform purpose built to speed up code reviews and improve code quality. Integrating seamlessly into git workflows and existing toolchains, it delivers codebase-aware reviews and supports all programming languages.</p>
<p>Now they are excited to deliver AI code reviews directly in VS Code, Cursor, and Windsurf–letting you and your team (vibe) code with confidence and review while keeping in flow.</p>
<p>Even better: code reviews in the IDE are free! That’s right: line-by-line reviews and one-click fixes, all in your IDE at no cost to you.</p>
<p><a target="_blank" href="https://coderabbit.link/LszC1pB">Install the extension</a> and start vibe checking your code today!</p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<p><a target="_blank" href="https://storybook.js.org/blog/storybook-9/"><img src="https://thisweekinreact.com/emails/issues/237/storybook.jpg" alt="Storybook 9" /></a></p>
<p><a target="_blank" href="https://storybook.js.org/blog/storybook-9/"><strong>Storybook 9</strong></a></p>
<p>Storybook looks set to become the ultimate component testing tool, integrating with Vitest and Playwright, covering:</p>
<ul>
<li><p>Interaction tests: Verify functionality by simulating user behavior</p>
</li>
<li><p>Accessibility tests: Detect, diagnose, and fix WCAG violations</p>
</li>
<li><p>Visual tests: Check for appearance bugs down to the pixel</p>
</li>
<li><p>Coverage reports: Understand which code is tested at a glance</p>
</li>
<li><p>Test widget: Click to run a comprehensive test suite</p>
</li>
</ul>
<p>This release also includes:</p>
<ul>
<li><p>48% Leaner: Smaller install with optional docs and test packages</p>
</li>
<li><p>Story generation: Tools to write stories automatically</p>
</li>
<li><p>Tag-based organization: Filter and group stories by tag</p>
</li>
<li><p>Story globals: Set context (theme, viewport, locale) at the story level</p>
</li>
<li><p>Frameworks: Major updates for Svelte, Next.js, React Native, and more!</p>
</li>
</ul>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://go.posthog.com/twir-jun4">Product for Engineers - What nobody tells developers about documentation</a></p>
</li>
<li><p>📖 <a target="_blank" href="https://tanstack.com/start/latest/docs/framework/react/migrate-from-next-js">TanStack docs - Migrate from Next.js</a></p>
</li>
<li><p>🔐 <a target="_blank" href="https://vercel.com/changelog/cve-2025-48068">Next.js CVE-2025-48068 - Low-severity vulnerability in the dev server, fixed in v15.2.2</a></p>
</li>
<li><p>🗓️ <a target="_blank" href="https://reactadvanced.com/?utm_source=Newsletter&amp;utm_medium=ThisWeekinReact">React Advanced London</a> -  🇬🇧 London - 28 Nov &amp; 1 Dec. "It's one of my absolute favourite conferences here." <em>— Lenz Weber-Tronic, Apollo GraphQL</em>. 10% off with code "TWIR".</p>
</li>
<li><p>📜 <a target="_blank" href="https://overreacted.io/progressive-json/">Progressive JSON</a>: Dan uses various analogies to illustrate the difference between different data streaming strategies. The depth-first strategy - used by JPEG, JSON and HTML - streams the data in order and either delay the parsing or creates an arbitrary cutoff point. The breadth-first strategy streams data out-of-order, replacing nested data with placeholders that can be filled later. React Server Components use the breadth-first strategy. Suspense allows to intentionally reveal the UI, decoupled from data reception. A quite interesting post that also exists in <a target="_blank" href="https://www.youtube.com/watch?v=MaMQLNBZz64">video format</a>.</p>
</li>
<li><p>📜 <a target="_blank" href="https://overreacted.io/one-roundtrip-per-navigation/">One Roundtrip Per Navigation</a>: Dan gives a comprehensive overview of the tradeoffs of the main React data fetching patterns. Using Server Components is quite similar to composing many Server Loaders into a single one, giving you the performance and co-location benefits of Relay while using vanilla JS code.</p>
</li>
<li><p>📜 <a target="_blank" href="https://overreacted.io/rsc-for-lisp-developers/">RSC for LISP Developers</a>: The <code>’use client’</code> directive is similar to LISP quoting, marking a piece of code as data to be evaluated later.</p>
</li>
<li><p>📜 <a target="_blank" href="https://overreacted.io/why-does-rsc-integrate-with-a-bundler/">Why Does RSC Integrate with a Bundler?</a>: Server Components need a way to serialize component modules from the server to the client. It’s technically possible to do so without a bundler, but it’s inefficient.</p>
</li>
<li><p>📜 <a target="_blank" href="https://tanstack.com/blog/search-params-are-state">Search Params Are State</a>: Tanner gives good reason for TanStack Router to associate a search params schema with route definitions. This helps improve type-safety, optimizes re-renders, and prevents schema fragmentation.</p>
</li>
<li><p>📜 <a target="_blank" href="https://tanstack.com/blog/power-in-pragmatism">The Power in Pragmatism</a>: Libraries from the TanStack ecosystem aren’t tied to any rendering framework, but focus on the core ideas.TanStack Start is a flexible framework that adapts to your needs instead of anticipating them.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.epicreact.dev/use-sync-external-store-demystified-for-practical-react-development-w5ac0">useSyncExternalStore: Demystified for Practical React Development</a>: A good overview of one of my favorite hooks, including common mistakes.</p>
</li>
<li><p>📜 <a target="_blank" href="https://macwright.com/2025/04/29/directive-prologues-and-javascript-dark-matter">Directive prologues and JavaScript dark matter</a>: Gives interesting context on various ways to control how JS is interpreted: JSX pragmas, directives, and magic comments.</p>
</li>
<li><p>💸 <a target="_blank" href="https://www.road-to-next.com/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=this_week_in_react_2">Join 1,000+ Developers – Learn full-stack web development in The Road to Next, the course for React devs ready to level up.</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://lingo.dev/en/compiler">Lingo Compiler</a>: A free open-source compiler to automatically translate any React app at build time without touching the source code. It processes the React code AST and translates it automatically with LLMs, and even supports hot module replacement. A great innovation with first-class integrations for Next.js, React Router, Remix, and Vite apps. The <a target="_blank" href="https://x.com/MaxPrilutskiy/status/1929946504216932746">demo on X</a> is impressive.</p>
</li>
<li><p>📦 <a target="_blank" href="https://livestore.dev/">LiveStore Beta</a>: The creator of Prisma introduced a new client-centric state management solution with first-class support for React and Expo. Based on SQLite, event sourcing, and reactivity, it can also sync clients through various providers. The landing page is quite cool to check and explains how it all works.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/mui/base-ui/releases/tag/v1.0.0-beta.0">Base UI 1.0 Beta</a>: The upcoming Radix UI contender is now in beta. This release includes new Menubar, NavigationMenu, and ContextMenu components.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/vadimdemedes/ink/releases/tag/v6.0.0">Ink 6.0 - React renderer for CLIs - React 19 support</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/TanStack/query/releases/tag/v4.39.0">TanStack Query 4.39 - Backport some v5 APIs to v4</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/facebook/lexical/releases/tag/v0.32.0">Lexical 0.32 - Extensible text editor framework</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=y_64170hz0o">Theo - Remix is ditching React (and I think that's a good thing)</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=Y5t0ILcuxVc">Alem Tuzlak -</a> <a target="_blank" href="http://Remix.run">Remix.run</a> <a target="_blank" href="https://www.youtube.com/watch?v=Y5t0ILcuxVc">woke up, did it sleep well?</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=0C-y59betmY">Ryan Carniato - The 3 Ways JavaScript Frameworks Render the DOM</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/playlist?list=PL4mWVugy3a2il28mbeNmyjJDoHOvw4JTK">React Miami 2025 Platlist</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://creators.spotify.com/pod/profile/reactiflux/episodes/TMiR-2025-05-Dan-explains-RSC--Remix-v3--React-core-team-WIP-e33nc5a">This Month in React - Dan explains RSC. Remix v3? React core team WIP?</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank"><img src="https://thisweekinreact.com/emails/issues/237/dynamo.png" alt="Build a working reward flow in minutes — with Dynamo" /></a></p>
<p><a target="_blank" href="https://whitelabel-loyalty.com/products/dynamo/?utm_source=email&amp;utm_medium=newsletter&amp;utm_campaign=react"><strong>Build a working reward flow in minutes — with Dynamo</strong></a></p>
<p>Building loyalty logic from scratch is a pain — infra setup, reward tracking, event triggers, tier rules… it all adds up.</p>
<p><strong>Dynamo</strong> is the loyalty engine built for developers: one API, full control, zero gatekeeping. Get hands-on with real SDKs (React + React Native), clear docs, and a live sandbox to test your own reward flows in minutes — no calls, no credit cards, just code.</p>
<p>→ <a target="_blank" href="https://whitelabel-loyalty.com/products/dynamo/?utm_source=email&amp;utm_medium=newsletter&amp;utm_campaign=react">Get sandbox access now.</a></p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<p><a target="_blank" href="https://github.com/reactwg/react-native-new-architecture/discussions/290"><img src="https://thisweekinreact.com/emails/issues/237/rn-frozen.jpg" alt="Freezing the Legacy Architecture" /></a></p>
<p><a target="_blank" href="https://github.com/reactwg/react-native-new-architecture/discussions/290"><strong>Freezing the Legacy Architecture</strong></a></p>
<p>The React Native team officially announced their plan to freeze the <s>Old Arch</s> Legacy Arch, so that they can focus all their efforts on the New Architecture. They’ll keep the Legacy Arch usable through security and critical bug fixes, but don't plan to merge new features. They'll eventually remove it an indefinite future, because keeping it around has a maintenance cost.</p>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://www.callstack.com/events/react-universe-meetup-new-york-june-2025?utm_campaign=Brownfield&amp;utm_source=TWIR&amp;utm_medium=mail&amp;utm_content=react_universe_mmetup_new_york">Join React Universe Meetup, New York for Brownfield tricks w/ RNEF, OpenTelemetry for RN and more. Tue, June 24 | 6–9PM EDT (hybrid).</a></p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/facebook/hermes/pull/1377">Hermes PR - Add Node-API to Hermes</a>: Recent conversations show the Hermes team excited to accept this Microsoft PR, and plans to leverage the integration for standard library APIs such as <code>Intl</code>, <code>Temporal</code>.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/facebook/react-native/pull/51775">React Native PR - support 120fps for Animated on iOS</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/which-android-apps-are-built-with-expo">ReactRaptor: Find out which Android apps are built with Expo</a>: This cool app scans your phone and shows you a list of RN/Expo apps. I just tried and discovered many apps I didn’t suspect were using RN, including local French ones. This might be super helpful to find a new RN job or freelancing customer.</p>
</li>
<li><p>💸 <a target="_blank" href="https://www.expoaichatbot.com?atp=twir">Expo AI Chatbot - Fastest way to create React Native AI Chatbot apps. Complete codebase with streaming, voice agent, image generation and more</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-reanimated/releases/tag/3.18.0">Reanimated 3.18 - Support RN 0.80</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/LovesWorking/rn-better-dev-tools">React Native Better DevTools - macOS app for debugging React Query, MMKV, AsyncStorage, Secure Storage, env variables across all platforms</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/csark0812/zustand-expo-devtools">zustand-expo-devtools</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=K2JTTKpptGs&amp;list=PLSk21zn8fFZBD3Kxg8Rw_n4LPIuA6TGHd">App.js Conf 2025 – Live stream from day 1 and day 2</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=FqSLVdOrclI&amp;list=PLZ3MwD-soTTHQjW7z1BEUmHC7aKdUnA7J">React Universe Meetup, April 2025</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=CN4x8srCMl0">Simon Grimm - React Native Tabs Navigation with Expo Router</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://share.transistor.fm/s/512c4c06">Rocket Ship 71 - Reanimated 4 Beta, LiveStore, DevTools &amp; Expo Router Course</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>📣 <a target="_blank" href="https://socket.dev/blog/tc39-advances-9-proposals">TC39 Advances 9 proposals including <code>Array.fromAsync</code>, <code>Error.isError</code>, and Explicit Resource Management to Stage 4</a>: Great to see the <code>using</code> keyword landing in the spec, and already leveraged by Vitest, and the new <a target="_blank" href="https://github.com/tc39/proposal-random-functions">Random namespace and functions</a> is also quite exciting!</p>
</li>
<li><p>📜 <a target="_blank" href="https://shopify.engineering/resilient-import-maps">Resilient Import Maps</a>: Shopify made a significant contribution to the HTML spec so that browsers can declare multiple import maps. I believe it’s not a coincidence and Remix v3 is likely to leverage that.</p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.platformatic.dev/seamlessly-blend-php-with-nodejs">Seamlessly Blend PHP with Node.js</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://voidzero.dev/posts/announcing-rolldown-vite">Rolldown-Vite</a>: The Rolldown-powered version of Vite just reached feature parity with its parent project. Now available in technical preview, it can be used as a drop-in replacement. Early adopters reported up to 16x faster builds.</p>
</li>
<li><p>📦 <a target="_blank" href="https://vitest.dev/blog/vitest-3-2.html">Vitest 3.2 - Annotations API, Custom Browser Locators, <code>using</code>, Test Signal, better Coverage Result</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#700-beta0-2025-06-02">Vite 7.0 Beta - Drops Node 18, ESM-only, browser targets <code>baseline-widely-available</code></a></p>
</li>
<li><p>📦 <a target="_blank" href="https://babeljs.io/blog/2025/05/30/babel-8-beta">Babel 8 Beta - Drops Node 18, ESM-only, cleanup technical dept</a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://x.com/AlemTuzlak/status/1927806693007597883"><img src="https://thisweekinreact.com/emails/issues/237/meme.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/sebastienlorber/status/1929880640670814510"><img src="https://thisweekinreact.com/emails/issues/237/meme2.jpg" alt="alt" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #236 : Remix, TanStack, RSC, RedwoodSDK, Storybook, Docusaurus | ExecuTorch, Screens, FlashList, Reanimated, Expo, EAS, Radon...]]></title><description><![CDATA[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...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-236-remix-tanstack-rsc-redwoodsdk-storybook-docusaurus-executorch-screens-flashlist-reanimated-expo-eas-radon</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-236-remix-tanstack-rsc-redwoodsdk-storybook-docusaurus-executorch-screens-flashlist-reanimated-expo-eas-radon</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Tue, 03 Jun 2025 10:06:37 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1748945175023/13c599c0-e81b-49e3-ae28-243c3ddc8dd4.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>Cyril and Matthieu from <a target="_blank" href="https://apps.theodo.com/en?utm_source=thisweekinreact">Theodo Apps</a> here 👋.</p>
<p>This week, the Remix team announced some big news. Microsoft has also made it easier to try out TypeScript Go rewriting.</p>
<p>In the React Native world, there were a few minor but interesting releases, and the App.js config starts tomorrow. Seb will have more to tell you about it next week.</p>
<p>Let's dive in!</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://www.ag-grid.com/charts?utm_source=thisweekinreact&amp;utm_medium=newsletter&amp;utm_campaign=2025-email-1"><img src="https://thisweekinreact.com/emails/issues/236/adgrid.jpg" alt="AG Charts: The best React Charts in the world." /></a></p>
<p><a target="_blank" href="https://www.ag-grid.com/charts?utm_source=thisweekinreact&amp;utm_medium=newsletter&amp;utm_campaign=2025-email-1"><strong>AG Charts: The best React Charts in the world.</strong></a></p>
<p>AG Charts is a canvas-based charting library from AG Grid. Initially built to power <a target="_blank" href="https://www.ag-grid.com/react-table?utm_source=thisweekinreact&amp;utm_medium=newsletter&amp;utm_campaign=2025-email-1">AG Grids</a> Integrated Charts, AG Charts now has over <strong>1 million</strong> npm downloads/month:</p>
<ul>
<li><p>🆓 <strong>Free:</strong> Access a range of chart types, including <strong>bar</strong>, <strong>line</strong>, <strong>scatter</strong>, <strong>area</strong>, and more – completely <strong>free</strong>, forever.</p>
</li>
<li><p>🚀 <strong>Fast:</strong> Using <strong>batch drawing</strong> and advanced change detection alongside the <strong>offscreen canvas API</strong>, AG Charts can easily render hundreds of thousands of data points out of the box</p>
</li>
<li><p>📊 <strong>Financial Charts:</strong> Build interactive financial charts featuring advanced annotations with just 3 lines of code.</p>
</li>
<li><p>🏢 <strong>Enterprise Features:</strong> Upgrade to Enterprise to unlock advanced capabilities such as animations, context menus, crosshairs and more. Try it for free, no trial license required.</p>
</li>
</ul>
<p>Learn More: <a target="_blank" href="http://www.ag-grid.com/charts">www.ag-grid.com/charts</a></p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<p><a target="_blank" href="https://remix.run/blog/wake-up-remix"><img src="https://thisweekinreact.com/emails/issues/236/remix.jpg" alt="Wake up Remix" /></a></p>
<p><a target="_blank" href="https://remix.run/blog/wake-up-remix"><strong>Wake up Remix - The plan for Remix v3</strong></a></p>
<p>This week you might have heard a rumor about <a target="_blank" href="https://x.com/AdamRackis/status/1925646909345058818">Remix moving on from React</a>. Ryan and Michael just published an official post describing the future of Remix.</p>
<p>In a nutshell, React Router will still be fully maintained and a safe bet. In parallel, Remix v3 will be a new framework based on a fork of Preact, so that they control the full stack.</p>
<p>Their goal with Remix v3 is “reimagining what a web framework can be”. The post describes the guiding principles this new framework will follow (optimize for LLMs, build on Web APIs, composition…)</p>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://go.posthog.com/twir-may28">Product for Engineers - This is why you're not shipping</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://tkdodo.eu/blog/the-beauty-of-tan-stack-router">The Beauty of TanStack Router</a>: Dominik goes through the features that differentiate Tanstack Router: Type-safe routing with StrictOrFrom principle, Search Param State Management, File-Based Routing, and Suspense support.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.epicreact.dev/composing-server-and-client-components-the-modern-reacts-superpower-08yn9">Composing Server and Client Components: The Modern React's Superpower</a>: RSC contrasts sharply with the old days of script tags and global variables.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.epicreact.dev/why-react-error-boundaries-arent-just-try-catch-for-components-i6e2l">Why React Error Boundaries Aren't Just Try/Catch for Components</a>: They are declarative components that only catch render errors. This article shares various pragmatic tips such as using <code>react-error-boundary</code> package or how to plug a retry button.</p>
</li>
<li><p>📜 <a target="_blank" href="https://growl.dev/blog/nextjs-server-actions/">Next.js Server Actions are public-facing API endpoints</a>: Server Actions can be called from Curl commands, the action ids can easily leak. They should be treated with the same security precautions as traditional public API endpoints.</p>
</li>
<li><p>📜 <a target="_blank" href="https://rwsdk.com/blog/your-react-meta-framework-feels-broken">Your React Meta-Framework Feels Broken, Here's Why</a>: RedwoodSDK tries to remove useless abstraction layers, conventions and other magic things that exist in Next.js and Remix.</p>
</li>
<li><p>📜 <a target="_blank" href="https://rwsdk.com/blog/react-rsc-redwoodsdk">Building with React Server Components and Client Components in RedwoodSDK</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://marmelab.com/blog/2025/05/28/solidjs-for-react-developper.html">SolidJS for React Developers</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://emilkowal.ski/ui/building-a-hold-to-delete-component">Building a Hold to Delete Component</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.propelauth.com/post/understanding-hydration-errors">Understanding Hydration Errors by building a SSR React Project</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://thetshaped.dev/p/why-composition-beats-inheritance-react-projects-extensible-components">Why Composition Beats Inheritance In React</a></p>
</li>
<li><p>💸 <a target="_blank" href="https://www.road-to-next.com/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=this_week_in_react_1.1">The Road to Next - Master Full-Stack Web Development with Next.js 15 and React 19</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://docusaurus.io/blog/releases/3.8">Docusaurus 3.8</a>: Continues the work on faster builds, adds support for CSS Cascade layers, both behind “Future Flags”.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/storybookjs/storybook/releases/tag/v9.0.0">Storybook 9.0</a>: After many betas/RCs, it's finally out, but no official blog post yet.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/TanStack/query/releases/tag/v5.77.0">TanStack Query v5.77</a>: Adds <code>maxChunks</code> to keep in the cache for streamed queries.</p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=u10Zlg_Un8I">Youssef Benlemlih - TanStack is Slowly Taking Over React</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.epicweb.dev/tips/understanding-the-cause-of-hydration-issues-in-react-router~si4z9">Alem Tuzlak - Understanding the cause of hydration issues in react-router</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://go.clerk.com/KfnV7Rj"><img src="https://thisweekinreact.com/emails/issues/236/clerk.jpg" alt="Getting started with Clerk Billing" /></a></p>
<p><a target="_blank" href="https://go.clerk.com/KfnV7Rj"><strong>Getting started with Clerk Billing</strong></a></p>
<p>Learn how to build a complete billing experience with Clerk—no custom UI, webhooks, or Stripe session management required.</p>
<ul>
<li><p>Create a pricing page with the <code>&lt;PricingTable /&gt;</code> component</p>
</li>
<li><p>Connect with Stripe—no manual API calls, no manual syncing</p>
</li>
<li><p>Manage plans and entitlements all within the Clerk dashboard</p>
</li>
<li><p><code>has()</code> helper to control access based on a customer’s plan, features, and permissions</p>
</li>
<li><p>Manage user and subscription data all in one place</p>
</li>
</ul>
<p>Enable Billing, drop in <code>&lt;PricingTable/&gt;</code> on your <code>/pricing</code> page and <a target="_blank" href="https://go.clerk.com/LphCouG">start monetizing your application</a>.</p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<ul>
<li><p>💸 <a target="_blank" href="https://expo.dev/eas/workflows?utm_source=twir+newsletter&amp;utm_medium=email&amp;utm_campaign=twir-workflows&amp;utm_id=TWIR">EAS Workflows is the standard for React Native CI/CD. Spend less time thinking about CI and more time building features.</a></p>
</li>
<li><p>📣 <a target="_blank" href="https://expo.dev/changelog/incremental-eas-hosting-changes">Expo - Incremental EAS Hosting changes</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/what-are-environment-variables">Expo - What every dev should know about using Environment Variables</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/how-to-get-your-ai-app-to-the-app-store">Expo - How to get your Bolt app to the App Store (No code required)</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://blog.swmansion.com/react-native-executorch-release-v0-4-0-262d4013ac10">RN ExecuTorch 0.4.0 - More LLMs, tool calling, text embeddings, multilingual speech-to-text and OCR, and image segmentation</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-screens/releases/tag/4.11.0">RN Screens 4.11 - react-native-edge-to-edge integration, <code>pageSheet</code> presentation</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/radon-ide/releases/tag/v1.7.0">Radon IDE 1.7 - Lots of bugfixes</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/Shopify/flash-list/releases/tag/v2.0.0-rc.1">FlashList 2.0 RC1</a>: No major changes since the last alpha, it's now a Release Candidate and already considered ready for production.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-reanimated/releases/tag/4.0.0-beta.4">Reanimated 4.0.0-beta.4 - RN 0.78, 0.79, and 0.80 support, CSS animation fixes, stability improvements</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=u8MAJ0F18s0&amp;list=PLsXDmrmFV_AQ1fp78TTKP51N_R-EW98oT">Expo - The Golden Workflows playlist</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://infinite.red/react-native-radio/rnr-333-expo-atlas-with-cedric-van-putten">RNR 333 - Expo Atlas with Cedric van Putten</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://share.transistor.fm/s/b04dbb2b">Rocket Ship 070 - React Native Version Hell, React Server Components with Expo &amp; Invoice App Updates</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>📜 <a target="_blank" href="https://devblogs.microsoft.com/typescript/announcing-typescript-native-previews/">TypeScript Native Previews</a>: Microsoft announced the go rewrite of TypeScript a few months ago. Nightly builds for this rewrite will now be published, and can be used with a CLI or a VS Code extension. JSX support has been added, and it’s still ~10 times faster than the JS version.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.epicweb.dev/do-not-assert-on-requests">Do Not Assert on Requests</a>: The creator of msw explains what he recommends instead of checking the body/header of sent requests in tests</p>
</li>
<li><p>📜 <a target="_blank" href="https://eslint.org/blog/2025/05/eslint-v9.0.0-retrospective/">ESLint v9 Retrospective - A review of what went well, and what didn't</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://alan.norbauer.com/articles/tsdown-bundler/">Switching from tsup to tsdown</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://deno.com/blog/history-of-javascript">A brief history of JavaScript</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/139">Firefox 139 - Temporal, <code>hidden=until-found</code>, <code>dialog.requestClose()</code></a>: The first browser to support the stage 3 Temporal API!</p>
</li>
<li><p>📦 <a target="_blank" href="https://jspm.org/jspm-4.0-release">JSPM 4.0 - Standards based import map package management</a>: A quite innovative project for shipping frontends with no build step.</p>
</li>
<li><p>📦 <a target="_blank" href="https://medium.com/@mgechev/b5c9c06cf301">Angular 20.0 - Reactivity, Resource API, SSR, Zoneless, Vitest, and more</a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://x.com/Benjamin_D_Lee/status/1926071667345822140"><img src="https://thisweekinreact.com/emails/issues/236/meme.jpg" alt="Benjamin Lee tweet: Just hoping @tan_stack stays safe from RSC" /></a></p>
<p><a target="_blank"><img src="https://thisweekinreact.com/emails/issues/236/meme2.jpg" alt="meme2" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #235: React Router, createStore, SuspenseList, Transition Indicator, Compiler, RenderHooks, Waku, React-Scan | Expo, Lava, Fortnite]]></title><description><![CDATA[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...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-235-react-router-createstore-suspenselist-transition-indicator-compiler-renderhooks-waku-react-scan-expo-lava-fortnite</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-235-react-router-createstore-suspenselist-transition-indicator-compiler-renderhooks-waku-react-scan-expo-lava-fortnite</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Sat, 24 May 2025 07:26:44 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1748071565305/92284113-3019-452e-962e-09cd12c8fcc0.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>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!</p>
<p>The React Native ecosystem is surprisingly calm, but no doubt they keep everything secret for <a target="_blank" href="https://appjs.co/">App.js Conf</a> next week!</p>
<p>By the way, I would really appreciate your support. Now that I'm automatically removing cold subscribers, the newsletter is decreasing over time 😅. Any retweet, like, engagement, or testimonial really helps me! Please convince your friends to subscribe ❤️</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://www.coderabbit.ai?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=this_week_in_react_mar25"><img src="https://thisweekinreact.com/emails/issues/233/coderabbit.jpg" alt="Cut React Code Review Time &amp; Bugs in Half" /></a></p>
<p><a target="_blank" href="https://www.coderabbit.ai?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=this_week_in_react_mar25"><strong>Cut React Code Review Time &amp; Bugs in Half</strong></a></p>
<p>Code reviews are critical but time-consuming. CodeRabbit acts as your AI co-pilot, providing instant Code review comments and potential impacts of every pull request.</p>
<p>Beyond just flagging issues, CodeRabbit provides one-click fix suggestions and lets you define custom code quality rules using AST Grep patterns, catching subtle issues that traditional static analysis tools might miss.</p>
<p>CodeRabbit has so far reviewed more than 5 million PRs, installed on 1 million repositories, and used by 50 thousand Open-source projects. CodeRabbit is free for all open-source repo's. <a target="_blank" href="https://www.coderabbit.ai?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=this_week_in_react_mar25">Get started today!</a></p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<p><a target="_blank" href="https://remix.run/blog/rsc-preview"><img src="https://thisweekinreact.com/emails/issues/235/rr.jpg" alt="React Router RSC Preview" /></a></p>
<p><a target="_blank" href="https://remix.run/blog/rsc-preview"><strong>React Router RSC Preview</strong></a></p>
<p>The React Router team unveiled a preview of React Server Components support using the Parcel bundler. Stable support is blocked until Vite officially supports RSCs, but the good news is that React Router is becoming more framework-agnostic, and they expect to support other bundlers in the future with minimal effort.</p>
<p>The feature is designed to be both incrementally adoptable by returning JSX in loaders/actions, but also to feel good on new greenfield projects looking to go all-in with Server Component Routes, <code>’use client’</code> and <code>’use server’</code> directives. They also explain how to solve the N+1 query problem in RSCs, inspired by GraphQL/DataLoader.</p>
<hr />
<p><a target="_blank" href="https://github.com/brandonmcconnell/render-hooks"><img src="https://thisweekinreact.com/emails/issues/235/renderhook.jpg" alt="Render Hooks" /></a></p>
<p><a target="_blank" href="https://github.com/brandonmcconnell/render-hooks"><strong>Render Hooks</strong></a> <strong>and</strong> <a target="_blank" href="https://github.com/jacobparis/with-react"><strong>With React</strong></a></p>
<p>Looks like the Render Props pattern is making a comeback, with 2 new projects proposing to expose React core hooks in a render callback. This is a convenient trick in some situations, allowing you to "inline" a component while still respecting the rules of hooks, but it does not really solve any problem that can’t be solved by extracting a custom component. An interesting pattern to use sparingly.</p>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://go.posthog.com/twir-may21">Product for Engineers - What engineers get wrong about communication</a></p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/facebook/react/pull/33215">React Core PR - <code>createStore()</code> skeleton API</a>: Initial scaffolding work to implement the Concurrent Stores feature mentioned in the latest React Labs update. There’s no implementation yet, but I still find it interesting to check the signature/types of this upcoming API that should support both ad-hoc state updates and the reducer/actions pattern. What strikes me the most is that you can’t access the store value directly, apart from using the <code>use(store)</code> API, and this totally makes sense in a concurrent world. Remember, this is a work in progress, and things may change.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/search?q=repo%3Afacebook%2Freact+SuspenseList&amp;type=pullrequests&amp;s=created&amp;o=desc">React Core PRs - <code>&lt;SuspenseList&gt;</code> being actively worked on</a>: It’s been a while since we last heard of this upcoming component that we thought would be in React 18. It allows to coordinate Suspense boundaries and control their “reveal order” (forwards/backwards/together).</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/facebook/react/pull/33162">React Core PR - Transition indicator + <code>onDefaultTransitionIndicator</code> API</a>: A feature being worked on should allow giving user feedback while React transitions are in progress. The default React-DOM implementation should show a native browser spinner, but it’s possible to opt out or provide a custom feedback.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/swc-project/swc/pull/10475">SWC PR - Initialize <code>@swc/react-compiler</code></a>: A new package to integrate the React Compiler for all SWC-based projects is coming. It will still use Babel under the hood (<a target="_blank" href="https://github.com/oxc-project/oxc/issues/10048#issuecomment-2837628965">details</a>), but it’s possible to optimize by only running it on relevant files (see what <a target="_blank" href="https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler">Next.js is doing</a>), potentially using parallelization.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/vercel/next.js/pull/78858">Next.js PR - Initial Segment Explorer devtool</a>: The Next.js team started working on a tool to help you visualize parallel and interception route segments.</p>
</li>
<li><p>🔐 <a target="_blank" href="https://github.com/advisories/GHSA-qpjv-v59x-3qc4">Next.js Race Condition to Cache Poisoning - CVE-2025-32421</a>: Low-severity Pages Router vulnerability, already patched.</p>
</li>
<li><p>📣 <a target="_blank" href="https://appwrite.io/blog/post/announcing-appwrite-sites">Appwrite Sites: The open-source Vercel alternative</a>: The AppWrite cloud platform can now deploy full-stack React meta-frameworks. It positions itself as a direct Vercel competitor, although there are differences (containers vs serverless). It’s a paid cloud product, but you can also self-host it for free.</p>
</li>
<li><p>📜 <a target="_blank" href="https://ui.dev/c/react/concurrent-rendering">Concurrent Rendering</a>: Free interactive lesson on React transitions from the <a target="_blank" href="http://ui.dev">ui.dev</a> course.</p>
</li>
<li><p>📜 <a target="_blank" href="https://rena.to/blog/13">Correctly infers from initial props</a>: You don’t need to explicitly type your context value and can leverage type inference instead.</p>
</li>
<li><p>📜 <a target="_blank" href="https://upstash.com/blog/fast-nextjs">Making Next.js Navigation Fast af</a>: Using React Router within your Next.js app works, but I doubt it’s a good idea, doesn’t permit you to use RSCs, and is likely to cause trouble if you use different routers on different pages.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.epicreact.dev/mastering-focus-management-in-react-with-flush-sync-f5b38">Mastering Focus Management in React with <code>flushSync</code></a>: By default, React uses batching and doesn’t flush state updates immediately to the DOM, and you can opt out of this behavior when needed.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.epicreact.dev/preserving-and-resetting-state-in-react-l2dxl">Preserving and Resetting State in React</a>: Explains why conditionally wrapping a component may make it reset its state.</p>
</li>
<li><p>📜 <a target="_blank" href="https://justfuckingusereact.com/">Just F***ing Use React</a>: Entertaining read, also exists in a less profane <a target="_blank" href="https://www.epicreact.dev/just-use-react-dk4e0">Just Use React</a> variant.</p>
</li>
<li><p>📜 <a target="_blank" href="https://newsletter.daishikato.com/p/the-past-and-future-of-render-optimization-with-react-context">The Past and Future of Render Optimization with React Context</a></p>
</li>
<li><p>💸 <a target="_blank" href="https://www.road-to-next.com/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=this_week_in_react_1">Full-Stack Upgrade – Build real apps with auth, orgs &amp; file uploads: The Road to Next is your next step as a full-stack React developer.</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://waku.gg/blog/fine-grained-router-components">Waku 0.23 - Fine-grained component render modes</a>: Makes it possible to statically pre-render parts of a dynamic page. I find the API a bit confusing, but the idea looks cool and simpler than Next.js Partial Pre-Rendering.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/aidenybai/react-scan/releases/tag/v0.3.4">React-Scan 0.3.4 - Scan for React performance issues</a>: A release that takes the opportunity to announce upcoming features and the availability of the <a target="_blank" href="https://chromewebstore.google.com/detail/react-scan/anmmhkomejbdklkhoiloeaehppaffmdf">extension on the Chrome store</a>.</p>
</li>
<li><p>📦 <a target="_blank" href="https://react-spectrum.adobe.com/releases/2025-05-19.html">React Aria - May 19 Release</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://marmelab.com/blog/2025/05/21/react-admin-may-2025-update.html">React-Admin - May 2025 Update - 5.7 &amp; 5.8</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://stylexjs.com/blog/v0.13.0">StyleX 0.13 - New <code>defineConsts</code> and <code>positionTry</code> APIs</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://hydrogen.shopify.dev/update/may-2025">Shopify Hydrogen 2025.05 - Upgrades to React Router 7</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=P1FLEnKZTAE">Theo - React Is the last framework</a>: Probably a quite controversial point of view that React runtime/syntax is less likely to change now (mainly due to AI). Innovation is moving an abstraction layer above with the React Compiler.</p>
</li>
<li><p>🎥 <a target="_blank" href="http://epicweb.dev/tips/server-componets-rsc-in-react-router-are-actually-good~n3u4j">Alem Tuzlak - Server Componets (RSC) in react-router are... actually good?</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://syntax.fm/show/902/fullstack-cloudflare-with-react-and-vite-redwood-sdk">Syntax 902 - Fullstack Cloudflare with React and Vite - RedwoodSDK with Peter Pistorius</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://front-end-fire.com/episodes/95/">Front-end Fire 95 -TanStack DB &amp; The Rise of the Tannerverse</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://whitelabel-loyalty.com/products/dynamo/?utm_source=email&amp;utm_medium=newsletter&amp;utm_campaign=react"><img src="https://thisweekinreact.com/emails/issues/235/ReactNewsletterAd3.jpg" alt="Add loyalty logic to your product — with just one API." /></a></p>
<p><a target="_blank" href="https://whitelabel-loyalty.com/products/dynamo/?utm_source=email&amp;utm_medium=newsletter&amp;utm_campaign=react"><strong>Add loyalty logic to your product — with just one API.</strong></a></p>
<p><strong>Why build loyalty from scratch when you can plug it in with Dynamo?</strong></p>
<p>Dynamo is the API-first headless loyalty engine used by product teams at leading fintech and consumer apps to embed rewards, tiers, and behavior-based engagement — without writing it all from zero.</p>
<p>With 250+ cloud data integrations, a <strong>React and React Native SDK</strong>, <strong>plus a clean sandbox trial</strong>, you can improve your retention now in days not months.</p>
<p>→ <a target="_blank" href="https://whitelabel-loyalty.com/products/dynamo/?utm_source=email&amp;utm_medium=newsletter&amp;utm_campaign=react">Launch demo and get free sandbox access now.</a></p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<ul>
<li><p>💸 <a target="_blank" href="https://ide.swmansion.com/?utm_source=thisweekinreact.com">Radon IDE – All-in-one tool for React Native &amp; Expo development. Meet the Radon IDE team next week at App.js Conf!</a></p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/Fortnite/status/1924949632628523199">Fortnite is back on the App Store in the U.S. on iPhones and iPads... and on the Epic Games Store and AltStore in the E.U!</a>: Major news for the whole mobile industry, Apple is finally complying with the court ruling, and allows mobile apps to use alternative web-based payment methods to bypass the 30% fee on in-app purchases.</p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/ramon_fritsch/status/1922358206862397478">Airbnb Lava preview</a>: Not open source yet, but Airbnb invented a new lightweight media format to embed animations and micro-interaction icons across platforms. A possible successor of Lottie?</p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/real-time-audio-processing-with-expo-and-native-code">Real-time audio processing with Expo and native code</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/expo-iot-device-provisioning-with-https-via-wifi">Expo + IoT: Device provisioning with HTTPS via WiFi</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.callstack.com/blog/meet-react-native-ai-llms-running-on-mobile-for-real">How to Run LLMs on-device in React Native with Vercel AI SDK</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://lynxjs.org/blog/lynx-3-2.html">Lynx 3.2 - Testing Library, new CSS features, improve microtasks and console support</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/Shopify/react-native-skia/releases/tag/v2.0.1">React Native Skia 2.0.1 - Wide gamut colors on iOS</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=HBPyP4OxVgs">Beto - How to upgrade from Expo SDK 52 to 53</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=65xmaJNpZVY">Simon Grimm - React Native Drawer Navigation with Expo Router</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://share.transistor.fm/s/51ee3a99">Rocket Ship 69 - Expo Router v5, Skia WebGPU, App Updates &amp; Galaxies Lifetime</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://infinite.red/react-native-radio/rnr-332-codemagic-react-native-with-martin-remmelgas">React Native Radio 332 - Codemagic + React Native with Martin Remmelgas</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>👀 <a target="_blank" href="https://github.com/tc39/agendas/blob/main/2025/05.md">TC39 - Agenda for the 108th meeting</a>: Next week, another set of interesting proposals for JS could progress, some of them could become part of the standard: <code>using</code> keyword, <code>Error.isError()</code>.</p>
</li>
<li><p>📜 <a target="_blank" href="https://v8.dev/features/explicit-resource-management">JavaScript's New Superpower: Explicit Resource Management</a>: Describes the <code>using</code> keyword mentioned above, already available in Chrome, and more importantly, in Node 24.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.apollographql.com/blog/the-future-of-mcp-is-graphql">The Future of MCP is GraphQL</a>: Apollo announcing their MCP server, explaining the alignment between GraphQL and AI needs.</p>
</li>
<li><p>📜 <a target="_blank" href="https://macarthur.me/posts/generators/">I think the ergonomics of generators is growing on me</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://deno.com/blog/greatly-exaggerated">Reports of Deno's Demise Have Been Greatly Exaggerated</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://nodejs.org/en/blog/release/v22.16.0">Node 22.16 - <code>node.config.json</code> support (experimental)</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://zod.dev/v4">Zod 4.0 - faster, slimmer, more tsc-efficient, new Zod Mini export, localization and more</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://www.remotion.dev/blog/media-parser">Remotion Media Parser - Universal lib based on WebCodecs to parse/decode/encode videos</a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://x.com/copyjosh/status/1924294150905614762"><img src="https://thisweekinreact.com/emails/issues/235/meme.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/sebastienlorber/status/1922935190080372837"><img src="https://thisweekinreact.com/emails/issues/235/meme2.jpg" alt="alt" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #234: TanStack DB, TanStack Query, React Router, Vite, Redux Toolkit, Parcel | 0.80 RC, Expo, Legal, Re.Pack, Skia, Radon IDE...]]></title><description><![CDATA[Hi everyone!
Kacper and Tymek from Software Mansion here 👋.
With a slightly quieter week, we come mostly with great articles we think you might like, alongside a few interesting releases! We're so excited about the Vite team working on RSC support, ...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-234-tanstack-db-tanstack-query-react-router-vite-redux-toolkit-parcel-080-rc-expo-legal-repack-skia-radon-ide</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-234-tanstack-db-tanstack-query-react-router-vite-redux-toolkit-parcel-080-rc-expo-legal-repack-skia-radon-ide</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 16 May 2025 12:18:19 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1747397861586/a91e1908-27c0-4b9b-b4ac-6fc806c0be8e.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p><strong>Kacper and Tymek from</strong> <a target="_blank" href="https://swmansion.com/?utm_source=thisweekinreact"><strong>Software Mansion</strong></a> here 👋.</p>
<p>With a slightly quieter week, we come mostly with great articles we think you might like, alongside a few interesting releases! We're so excited about the Vite team working on RSC support, a new React Query proposal, in conjunction with the features coming in React Native 0.80, but there are still many new topics here to look at.</p>
<p>Let's dive in!</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://go.posthog.com/twir-may14"><img src="https://thisweekinreact.com/emails/issues/234/posthog.jpg" alt="This is why you're not shipping" /></a></p>
<p><a target="_blank" href="https://go.posthog.com/twir-may14"><strong>This is why you're not shipping</strong></a></p>
<p>Some red flags <a target="_blank" href="https://go.posthog.com/twir-may14-ph">PostHog</a> has found in teams failing to ship fast: waiting for 1:1s to solve problems, needing other teams to approve your work, and sales outnumbering engineering 🚩</p>
<p>Learn how to identify and fix each of these (and more) in <a target="_blank" href="https://go.posthog.com/twir-may14">the latest edition of their Product for Engineers newsletter</a> 💪</p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<p><a target="_blank" href="https://github.com/TanStack/db"><img src="https://thisweekinreact.com/emails/issues/234/tanstackdb.jpg" alt="TanStackDB" /></a></p>
<p><a target="_blank" href="https://github.com/TanStack/db"><strong>TanStack DB</strong></a></p>
<p>A brand-new library from the TanStack team has been introduced in collaboration with ElectricSQL, which brings a lot of exciting features. It gives you a blazing fast query engine, fine-grained reactivity for minimal re-renders, robust transaction primitives and normalized data by default!</p>
<p>It is built on TanStack Store and is working with and alongside TanStack Query, which extends its capabilities with collections, live queries and optimistic mutations.</p>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://bit.cloud/solutions/design-systems?utm_source=ThisWeekInReact&amp;campaign=DesignSystem">Build professional design system in less than a day, using Hope AI, new model by</a> <a target="_blank" href="http://Bit.Cloud">Bit.Cloud</a></p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/facebook/react/pull/33152">React PR - Integrate React RSC with Vite</a>: An implementation of React Server Components support in Vite. There used to be a community proposal in the past but this time it's coming officially from the Vite team.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/TanStack/query/discussions/9135">React Query RFC - Unified Imperative Query Methods</a>: As the API of TanStack Query grows, the creators proposed to reduce the number of six functions with similar functionality to two unique methods - <code>query()</code> and <code>infiniteQuery()</code>.</p>
</li>
<li><p>📜 <a target="_blank" href="https://overreacted.io/static-as-a-server/">Static as a Server</a>: Dan draws parallels between the Astro and built-time React Server Components for creating static sites without a server.</p>
</li>
<li><p>📜 <a target="_blank" href="https://tylur.blog/react-hook-factory/">React Hook Factory - how to create custom hooks programmatically</a>: A clever pattern to reduce boilerplate when setting up a new React Context.</p>
</li>
<li><p>📜 <a target="_blank" href="https://blacksheepcode.com/posts/no_react_context_is_not_causing_too_many_renders">No, react context is not causing too many renders</a>: Argues that using React context is fine, and re-render problems are more likely related to large context values and controlled components.</p>
</li>
<li><p>📜 <a target="_blank" href="https://cekrem.github.io/posts/dependency-inversion-in-react/">Dependency Inversion in React: Building Truly Testable Components</a>: Implementing the SOLID principle by passing dependencies as props.</p>
</li>
<li><p>📜 <a target="_blank" href="https://seanpaulcampbell.com/blog/openauth-react-router/">Using OpenAuth with React Router</a>: Comprehensive 2-part tutorial explaining how to implement authentication using React Router, OpenAuth and deploying on AWS with SST.</p>
</li>
<li><p>📜 <a target="_blank" href="https://marmelab.com/blog/2025/05/09/client-side-react-rocks.html">Client-Side React Rocks</a>: On the example of tabular layout, the author argues client-side React features like <code>useContext</code> and <code>createPortal</code> provide better DX than Server Components.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.nirtamir.com/articles/the-limits-of-rsc-a-practitioners-journey">The Limits of RSC: A Practitioner's Journey</a>: Nir tried to implement infinite scrolling UI using Server Components, but ran into a wall. Spoiler: He used React Query instead.</p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.swmansion.com/how-to-build-a-custom-react-renderer-595dc4a9cb1c">How to Build a Custom React Renderer</a>: Using the <code>react-reconciler</code> package to build a video composition software.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.typeonce.dev/article/patterns-for-state-management-with-actors-in-react-with-xstate">Patterns for state management with actors in React with XState</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://scientyficworld.org/how-to-integrate-react-query-with-ag-grid/">How To Integrate React Query With AG Grid?</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v760">React Router 7.6 - new <code>routeDiscovery</code> option</a>: New config option introduced granting more control over the Lazy Route Discovery feature.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/reduxjs/redux-toolkit/releases/tag/v2.8.0">Redux Toolkit 2.8 - Infinite Query Page Params, RN compatibility</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://parceljs.org/blog/v2-15-0/">Parcel 2.15 - New HTML and SVG to JSX transformer</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/NickvanDyke/eslint-plugin-react-you-might-not-need-an-effect">eslint-plugin-react-you-might-not-need-an-effect</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=FPJvlhee04E">Jack Herrington - Server Functions Don't Exist (It Matters)</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=vVYlCnNjEWA">Lee Robinson - Multi-tenant SaaS apps with Next.js and Vercel</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.epicweb.dev/talks">Epic Web Conf 2025 - Talks are online</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://podrocket.logrocket.com/jsx-over-the-wire-dan-abramov">PodRocket 563 - JSX over the wire with Dan Abramov</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="http://Syntax.fm">Syntax.fm</a> <a target="_blank" href="https://syntax.fm/show/901/js-news-new-react-and-svelte-apis-rsc-updates-redwood-and-storybook">901 - New React &amp; Svelte APIs, RSC Updates, Redwood and Storybook</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://go.clerk.com/LphCouG"><img src="https://thisweekinreact.com/emails/issues/234/clerk.jpg" alt="Introducing Clerk Billing" /></a></p>
<p><a target="_blank" href="https://go.clerk.com/LphCouG"><strong>Introducing Clerk Billing</strong></a></p>
<p>Set up subscriptions in your B2B or B2C app without writing custom payment code or building your own UI.</p>
<ul>
<li><p>Create a pricing page with the <code>&lt;PricingTable /&gt;</code> component</p>
</li>
<li><p>Connect with Stripe—no manual API calls, no manual syncing</p>
</li>
<li><p>Manage plans and entitlements all within the Clerk dashboard</p>
</li>
<li><p><code>has()</code> helper to control access based on a customer’s plan, features, and permissions</p>
</li>
<li><p>Manage user and subscription data all in one place</p>
</li>
</ul>
<p>Enable Billing, drop in <code>&lt;PricingTable/&gt;</code> on your <code>/pricing</code> page and <a target="_blank" href="https://go.clerk.com/LphCouG">start monetizing your application</a>.</p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<p><a target="_blank" href="https://devblogs.microsoft.com/react-native/2025-05-09-office-modernize/"><img src="https://thisweekinreact.com/emails/issues/234/microsoft-uses-react-native.png" alt="MS Office uses React Native" /></a></p>
<p><a target="_blank" href="https://devblogs.microsoft.com/react-native/2025-05-09-office-modernize/"><strong>How Office Is Modernizing Their App Suite's UI using Windows App SDK and React Native</strong></a></p>
<p>Chiara Mooney from Microsoft described how they use React Native to implement the newest Copilot features in their flagship MS Office suite used <strong>by 600 million people</strong>.</p>
<p>They are using it with the island architecture, a pattern embraced in the frontend ecosystem by frameworks such as Astro.</p>
<p>Interesting to see how RN is used at the highest enterprise level on platforms which aren't just Android or iOS.</p>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://withfra.me">WithFrame - Pre-Built React Native Templates</a></p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/mrdoob/status/1920861880911884771">mrdoob - Honest question, why would anyone use Flutter instead of React Native?</a>: Horizon broadening conversation between React Native and Flutter devs started by the Three.js creator.</p>
</li>
<li><p>🗓 <a target="_blank" href="https://www.reactuniverseconf.com/?utm_campaign=RUC2025&amp;utm_source=TWIRpartnership&amp;utm_content=savethedate">React Universe Conf</a> - 🇵🇱 Wrocław - 2-4 September. Star speakers announced! Get a 10% discount with code "TWIR".</p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/build-cache-providers-in-expo">Expo - Faster local dev with build cache providers (Experimental)</a>: Use remote build caching to avoid recompiling the same code twice and ship faster.</p>
</li>
<li><p>📜 <a target="_blank" href="https://byk.im/posts/apple-code-signing-x-platform/">Nightmare on Apple Street</a>: Publishing your app to the App Store from the Linux could be a nightmare. Before you start trying it on your own, learn what are the hops and obstacles of pushing an iOS app from a Linux machine.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/facebook/react-native/releases/tag/v0.80.0-rc.1">React Native 0.80 RC.1</a>: The upcoming version of React Native is now in RC. TypeScript improvements with new <a target="_blank" href="https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0894-deprecate-subpath-imports.md#parallel-effort-strict-typescript-api">Strict API</a>, support of radial gradient, React 19.1.</p>
</li>
<li><p>📦 <a target="_blank" href="https://www.callstack.com/blog/react-native-legal-acknowledge-open-source-libraries-in-your-app">React Native Legal - Zero-Config OSS License Screens for Your App</a>: The Callstack team introducing their recent zero-config, cross-platform library, that handles license metadata generation and in-app display for you.</p>
</li>
<li><p>📦 <a target="_blank" href="https://www.callstack.com/blog/new-in-re-pack-5-1">Re.Pack 5.1 - Preloading Remotes, Runtime Hooks, and Faster Startups</a>: The release mainly focuses on a better Module Federation 2 support.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/TanStack/query/releases/tag/v5.76.0">TanStack Query 5.76 - DevTools for Expo/React Native</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/radon-ide/releases/tag/v1.6.0">Radon IDE 1.6 - React Profiler integration, conditional &amp; expression breakpoints, ​Expo SDK 53</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/Shopify/react-native-skia/releases/tag/v2.0.0">React Native Skia 2.0 - React 19 and React Native 0.78 minimum are required</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/rive-app/rive-react-native/releases/tag/v9.3.0">Rive React Native 9.3 - Data Binding support, new useRive() hook, simpler .riv file loading</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=W9bbVJwCyqo">Simon Grimm - React Native AI Apps can't get easier (Expo &amp; Vercel AI SDK)</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://infinite.red/react-native-radio/rnr-331-new-architecture-new-era-with-riccardo-cipolleschi">React Native Radio 331 - New Architecture, New Era with Riccardo Cipolleschi</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://podcast.galaxies.dev/episodes/068-expo-sdk-53-highlights-react-native-ai-worklets-no-apple-app-store-commissions">Rocket Ship 68 - Expo SDK 53 Highlights, React Native AI, Worklets &amp; No Apple App Store Commissions</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=hFenspfGLTk">Matt Pocock - Arrays, objects... now <code>composites</code>?</a>: The exciting JS proposal that replaces Records and Tuples.</p>
</li>
<li><p>📜 <a target="_blank" href="https://lib.rsbuild.dev/blog/introducing-rslib">Introducing Rslib: Build library with Rspack</a>: Developed by ByteDance Web Infra Team, Rslib is a library that aims to be an ideal library development tool that is easy to configure, offers comprehensive features, leverages a shared ecosystem with application building, and prioritizes performance.</p>
</li>
<li><p>📜 <a target="_blank" href="https://frontendmasters.com/blog/shape-a-new-powerful-drawing-syntax-in-css/">shape(): A New Powerful Drawing Syntax in CSS</a>: A new function of clip-path is now supported, which lets you to clip your element using arbitrary and responsive shapes.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.joshwcomeau.com/css/height-enigma/">The CSS Height Enigma</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.deepintodev.com/blog/how-v8-javascript-engine-works-behind-the-scenes">How V8 JavaScript Engine Works Behind the Scenes</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://playfulprogramming.com/collections/art-of-accessibility">The Art of Accessibility</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://plainvanillaweb.com/blog/articles/2025-05-09-form-control/">Making a new form control - with Custom Elements</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/parcel-bundler/lightningcss/releases/tag/v1.30.0">Lightning CSS 1.30 - Relative color spec, nesting spec for pseudo elements, build support on Android, and more</a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://x.com/adamwathan/status/1922002165884682690"><img src="https://thisweekinreact.com/emails/issues/234/meme.png" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/Baconbrix/status/1922134704330854557"><img src="https://thisweekinreact.com/emails/issues/234/meme2.png" alt="alt" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #233: RSC, Next.js, Compiler, Unhead, Shadcn, Relay, Mantine | Expo, WebGPU, Skia, Apple fees, Reanimated, Fragment Refs...]]></title><description><![CDATA[Hi everyone!
This week we don't have one, but 2 interesting blog posts from Dan Abramov, and various React releases.
I found the mobile news particularly interesting, with Expo 53, Skia Graphite, Reanimated Shared Elements Transitions, and the Apple ...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-233-rsc-nextjs-compiler-unhead-shadcn-relay-mantine-expo-webgpu-skia-apple-fees-reanimated-fragment-refs</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-233-rsc-nextjs-compiler-unhead-shadcn-relay-mantine-expo-webgpu-skia-apple-fees-reanimated-fragment-refs</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 09 May 2025 15:32:22 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1746804495704/3439a4ed-9284-4f89-84f5-0802dee6559a.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>This week we don't have one, but 2 interesting blog posts from Dan Abramov, and various React releases.</p>
<p>I found the mobile news particularly interesting, with Expo 53, Skia Graphite, Reanimated Shared Elements Transitions, and the Apple fees court injunction.</p>
<p>My fellows at <a target="_blank" href="http://ui.dev">ui.dev</a> are also launching the final content of their <a target="_blank" href="http://react.gg">react.gg</a> course (30% off now), designed to teach you all the brand-new React 19 concepts from first principles. I got access to review it and can assure you that it's a really playful way to learn React, full of interactive examples, visualizations and pragmatic quizzes.</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://coderabbit.link/this-week-in-react-7may-2025"><img src="https://thisweekinreact.com/emails/issues/233/coderabbit.jpg" alt="Cut React Code Review Time &amp; Bugs in Half" /></a></p>
<p><a target="_blank" href="https://coderabbit.link/this-week-in-react-7may-2025"><strong>Cut React Code Review Time &amp; Bugs in Half</strong></a></p>
<p>Code reviews are critical but time-consuming. CodeRabbit acts as your AI co-pilot, providing instant Code review comments and potential impacts of every pull request.</p>
<p>Beyond just flagging issues, CodeRabbit provides one-click fix suggestions and lets you define custom code quality rules using AST Grep patterns, catching subtle issues that traditional static analysis tools might miss.</p>
<p>CodeRabbit has so far reviewed more than 5 million PRs, installed on 1 million repositories, and used by 50 thousand Open-source projects. CodeRabbit is free for all open-source repo's. <a target="_blank" href="https://coderabbit.link/this-week-in-react-7may-2025">Get started today!</a></p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<ul>
<li><p>💸 <a target="_blank" href="https://go.posthog.com/twir-may7">Product for Engineers - What engineers get wrong about communication</a></p>
</li>
<li><p>👀 <a target="_blank" href="https://nextjs.org/docs/architecture/nextjs-compiler#runafterproductioncompile">Next.js Docs - New <code>runAfterProductionCompile</code> lifecycle hook</a>: Upcoming (unreleased) feature already documented.</p>
</li>
<li><p>💬 <a target="_blank" href="https://github.com/oxc-project/oxc/issues/10048">React Compiler oxc plugin</a>: Interesting discussions between the React Compiler team and the oxc team to integrate the compiler as an oxc plugin for upcoming usage with Vite and Oxc/Rolldown. The React team suggests making it happen in 2 steps (make it work, then make it fast).</p>
</li>
<li><p>🧵 <a target="_blank" href="https://threadreaderapp.com/thread/1917597228513853603.html">shadcn introducing the registry MCP - One command to make any component registry mcp-compatible.</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://overreacted.io/functional-html/">Functional HTML</a>: Dan gradually reinvents the HTML he wants from first principles, leading to an RSC implementation.</p>
</li>
<li><p>📜 <a target="_blank" href="https://overreacted.io/rsc-for-astro-developers/">RSC for Astro Developers</a>: RSC and Astro have 2 remarkably similar mental models, but Dan exposes some interesting subtle differences. RSCs may feel less intuitive at first, but they also solve some of Astro’s limitations.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.epicai.pro/the-future-of-ai-interaction-beyond-just-text-w22ps">The future of AI interaction: Beyond just text</a>: Kent argues that MCPs could have a role to play in implementing generative UIs with React Server Components. He wants the protocol to allow richer return types like html and RSC payloads.</p>
</li>
<li><p>📜 <a target="_blank" href="https://sst.dev/blog/frontends-are-hard">Frontends are hard</a>: The devs at SST reflect on the challenges of self-hosting modern meta-frameworks, including React ones, that led them to start the OpenNext initiative.</p>
</li>
<li><p>📜 <a target="_blank" href="https://sergiodxa.com/tutorials/add-a-color-scheme-toggle-in-react-router">Add a Color Scheme Toggle in React Router</a>: This method avoids FOUC with a cookie instead of inlined JS.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.trevorlasn.com/blog/fetching-data-for-complex-next-and-react-apps">Robust Data Fetching Architecture For Complex React/Next.js Apps</a>: Suggests using 3 layers: Server Components, React Query, and Optimistic Updates.</p>
</li>
<li><p>📜 <a target="_blank" href="https://saewitz.com/server-components-give-you-optionality">Server Components Give You Optionality</a>: They give flexibility to choose in which environments your components run in (Server, Server+Client, or Client) and when.</p>
</li>
<li><p>📜 <a target="_blank" href="https://hardcover.app/blog/part-1-how-we-fell-out-of-love-with-next-js-and-back-in-love-with-ruby-on-rails-inertia-js">How We Fell Out of Love with Next.js and Back in Love with Ruby on Rails &amp; Inertia.js</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://d13z.dev/blog/07-why-kleinanzeigen-picked-astro-over-nextjs/">Why</a> <a target="_blank" href="http://Kleinanzeigen.de">Kleinanzeigen.de</a> <a target="_blank" href="https://d13z.dev/blog/07-why-kleinanzeigen-picked-astro-over-nextjs/">Picked Astro Over Next.js</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.kxlaa.com/articles/when-you-might-need-to-override-the-defaults-in-tanstack-query">When You Might Need to Override the Defaults in TanStack Query</a></p>
</li>
<li><p>💸 <a target="_blank" href="http://React.gg">React.gg</a> <a target="_blank" href="https://react.gg/?ref=twir">- The interactive way to master modern React, including new v19 modules - 30% off during launch week</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://unhead.unjs.io/v2">Unhead 2.0 - The full stack &lt;head&gt; package for any framework</a>: This framework-agnostic package from the UnJS ecosystem now includes React bindings. This could be a great drop-in alternative to <code>react-helmet</code> with React 19 support if the new built-in APIs are not good enough for you (see <a target="_blank" href="https://github.com/staylor/react-helmet-async/issues/239#issuecomment-2565685131">my comment here</a>).</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/ronin-co/blade">Blade - Build instant web apps with React</a>: A new opinionated React meta-framework with Server Components support, that purposefully doesn’t comply with the RSC spec.</p>
</li>
<li><p>📦 <a target="_blank" href="https://relay.dev/blog/2025/04/02/relay-19/">Relay 19.0 - <code>@alias</code> required on conditional fragments, support React 19</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://mantine.dev/changelog/8-0-0/">Mantine 8.0 - Updated dates package, new TimePicker, Heatmap, CodeHighlight components, nested menus and more</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/bvaughn/react-error-boundary/releases/tag/6.0.0">React Error Boundary 6.0 - ESM-only</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/marmelab/react-admin/releases/tag/v5.8.0">React Admin 5.8 - InPlaceEditor, DataTable, AuthLayout, MUI v7, CSS vars, theming</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/ixahmedxi/unverceled-nextjs">Unverceled Next.js - A Next.js 15 Starter Kit Deployed to Cloudflare using OpenNext</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://www.radix-ui.com/primitives/docs/overview/releases#may-5-2025">Radix UI - New unstable PasswordToggleField and Checkbox parts</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/forge-42/react-router-devtools/releases/tag/v5.0.0">React Router DevTools 5.0 - Complete overhaul of the routes tab</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/mui/material-ui/releases/tag/v7.1.0">MUI 7.1 - Support for Tailwind CSS 4</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=gRKVL5w-2Lc">Jack Herrington - React's New Activity Component: Huge Performance Win!</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=lLJbHHeFSsE">Fireship - The growing divide among React developers…</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://front-end-fire.com/episodes/93/">Front-end Fire 93 - React Activity, Storybook 9 Beta, and AI as a Collaborator</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://tolg.ee/y1z3eb"><img src="https://thisweekinreact.com/emails/issues/233/tolgee.jpg" alt="App Translation Simplified with Tolgee" /></a></p>
<p><a target="_blank" href="https://tolg.ee/y1z3eb"><strong>App Translation Simplified with Tolgee</strong></a></p>
<p><a target="_blank" href="https://tolg.ee/y1z3eb">Tolgee</a> is an <strong>open-source</strong> tool that simplifies <strong>localization</strong> by saving developers time and eliminating endless spreadsheets of text to translate 🌎</p>
<p>Speed up your work now! Tolgee helps with:</p>
<ul>
<li><p>Delegating translation to other team members - save the developer's time!</p>
</li>
<li><p>In-context translation</p>
</li>
<li><p>Click to translate with the browser extension</p>
</li>
<li><p>Get rid of unorganized spreadsheets and JSONs</p>
</li>
</ul>
<p><strong>No credit card is needed</strong> for the free version, perfect for smaller projects! You can try all the features and integrate it into your project right away to prepare it to meet a global audience.</p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<p><a target="_blank" href="https://expo.dev/changelog/sdk-53"><img src="https://thisweekinreact.com/emails/issues/233/expo53.jpg" alt="Expo SDK 53" /></a></p>
<p><a target="_blank" href="https://expo.dev/changelog/sdk-53"><strong>Expo SDK 53</strong></a></p>
<p>This is quite an impressive Expo release, with highlights:</p>
<ul>
<li><p>Upgrades to React Native 0.79, React 19, and RNW 0.20</p>
</li>
<li><p>Turns the New Arch on by default</p>
</li>
<li><p>Edge-to-edge on Android is enabled by default</p>
</li>
<li><p>New <a target="_blank" href="https://expo.dev/blog/goodbye-background-fetch-hello-expo-background-task">Expo BackgroundTask</a>, a modern, reliable, power-efficient, and future-proof way to run background tasks using Android <code>WorkManager</code> and iOS <code>BGTaskScheduler</code> system APIs</p>
</li>
<li><p>New <a target="_blank" href="https://expo.dev/blog/introducing-expo-maps-a-modern-maps-api-for-expo-developers">Expo Maps</a> (alpha) built on Expo Modules API, using SwiftUI and Jetpack Compose, expose platform default Apple Maps and Google Maps components.</p>
</li>
<li><p>Metro <code>package.json#exports</code> resolution enabled by default</p>
</li>
<li><p>Deploy development builds to TestFlight with <code>npx testflight</code></p>
</li>
<li><p>Improve Android build times up to 25% with prebuilt Expo Modules</p>
</li>
<li><p>And way more!</p>
</li>
</ul>
<p>See also the <a target="_blank" href="https://expo.dev/blog/expo-router-v5">Expo Router v5</a> related release with its own highlights:</p>
<ul>
<li><p>Requires React 19 / Expo 53</p>
</li>
<li><p>Improves DX, error screen and logging, leverages React owner stacks</p>
</li>
<li><p>Deploy versioned API Routes in production with EAS Hosting</p>
</li>
<li><p>React Server Functions in beta</p>
</li>
<li><p>Protected routes</p>
</li>
</ul>
<hr />
<p><a target="_blank" href="https://www.youtube.com/watch?v=t9t-VXwIc4I"><img src="https://thisweekinreact.com/emails/issues/233/skia.jpg" alt="Game On - Bringing WebGPU to React Native" /></a></p>
<p><a target="_blank" href="https://www.youtube.com/watch?v=t9t-VXwIc4I"><strong>🎥 Game On - Bringing WebGPU to React Native</strong></a></p>
<p>In a 37-minute video packed with exciting announcements, William Candillon and guests gave us a glimpse into the future of drawing and animation. Supported by Shopify, he’s bringing modern WebGPU support (Vulkan and Metal) to React Native.</p>
<p>By aligning to the web APIs, it's possible to copy/paste existing web examples (including Three.js) and make them work on all platforms. It also enables general-purpose use of the GPU (AI, TensorFlow.js), which you may achieve more easily thanks to a convenient low-level TypeGPU library.</p>
<p>All this work was needed to create a new experimental Skia Graphite backend based on WebGPU. It enables composing and interleaving 2D/3D experiences in a performant way, like on the web, but across all platforms, with full Reanimated integration. Along the way, Skia doesn’t come with any new feature, but has significantly improved performance, reduced, crashes, and supports 3 new platforms: tvOS, macOS and Node. Keep massaging that octopus William!</p>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://www.reactuniverseconf.com/?utm_campaign=7310698-RUC%202025&amp;utm_source=TWIR&amp;utm_content=New%20Speakers">React Universe Conf 2025 adds new speakers: V. Morozov &amp; K. Hosany (Microsoft), K. Hansen (MongoDB), Z. Chapple (Zephyr Cloud) and more.</a></p>
</li>
<li><p>⚖️ <a target="_blank" href="https://www.macrumors.com/2025/04/30/apple-app-store-anti-steering-injunction-violation/">Epic Games Wins Major Victory as Apple is Ordered to Comply With App Store Anti-Steering Injunction</a>: A court judged that Apple purposefully did not comply with a former injunction to let apps use alternative payment methods and bypass the 30% fee on in-app purchases. “For this Court, there is no second bite at the apple”. A major event for the mobile industry that enables Fortnite to return, the Kindle app to finally sell e-books directly, and new business models. Check <a target="_blank" href="https://expo.dev/blog/mobile-app-payment-processing-best-practices">Expo</a> and <a target="_blank" href="https://vercel.com/blog/ios-developers-can-now-offer-commission-free-payments-on-web">Vercel</a> guides and starters to avoid the fee.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/facebook/react/pull/33056">React Core PR - Add Fragment Refs to Fabric with intersection observer support</a>: The recent React Labs post briefly mentioned an upcoming <a target="_blank" href="https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#fragment-refs">Fragment Refs</a> feature. It looks like in the future we’ll be able to use a web-like IntersectionObserver to know when a React fragment enters the screen. Still research/work-in-progress, but exciting new features ahead.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/software-mansion/react-native-reanimated/pull/7466">Reanimated PR - Shared Elements Transitions on the New Architecture</a>: Exciting draft PR from Software Mansion that plans to stabilize Shared Elements Transitions for the New Architecture (that enables sharing C++ code between platforms).</p>
</li>
<li><p>📜 <a target="_blank" href="https://shift.infinite.red/sirens-sagas-and-stack-traces-a-react-native-upgrade-odyssey-52db6beb0aac">Sirens, Sagas, and Stack Traces: A React Native Upgrade Odyssey</a></p>
</li>
<li><p>🔨 <a target="_blank" href="https://react-native-package-checker.vercel.app/">Package Checker - Check for New Architecture compatibility</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://blog.jetbrains.com/kotlin/2025/05/compose-multiplatform-1-8-0-released-compose-multiplatform-for-ios-is-stable-and-production-ready/">Compose Multiplatform 1.8 - Compose Multiplatform for iOS Is Stable and Production-Ready</a>: The cross-platform UI toolkit from JetBrains enables code sharing between iOS and Android. Unlike React Native, the iOS (and web) support is based on Skia, not using UIKit native elements.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/pmndrs/jotai/discussions/3041">Zustand 5.0.4 + Jotai 2.12.4</a>: Fixing an incompatibility issue with RN 0.79 / Expo 53 / Metro 0.82.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/ChristopherGabba/react-native-nitro-audio-manager">Nitro Audio Manager - Nitro module for AVAudioSession/AudioManager APIs</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/WookieFPV/expo-build-disk-cache">Expo Build Disk Cache - A plugin for Expo CLI to improve build time</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/nkzw-tech/expo-app-template">Expo App Template - Modern, sensible defaults and fast Expo app template</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=0h-owMCfy5s">Jamon Holmgren - How to build a Mac app with React Native for macOS</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/playlist?list=PLZ3MwD-soTTEFaxmATqOTcitPEK5iaz1z">React Universe Meetup - 3 new videos from April: Polygen, File-based router, native feel</a></p>
</li>
<li><p>🎥 <a target="_blank" href="http://youtube.com/watch?v=kGUrNO8WmCU">Simon Grimm - Finally React Native UI Components (Expo 53)</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://infinite.red/react-native-radio/rnr-330-react-native-and-accessibility-with-karly-lamm">React Native Radio 330 - and Accessibility with Karly Lamm</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://share.transistor.fm/s/18111ecc">Rocket Ship 67 - Quitting RN, React Compiler, Legend List &amp; RN Performance</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>👀 <a target="_blank" href="https://github.com/microsoft/TypeScript/issues/61648">TypeScript 5.9 Iteration Plan</a></p>
</li>
<li><p>📖 <a target="_blank" href="https://nodejs.org/en/learn/modules/publishing-a-package">Node.js Docs - Publishing a package</a>: A new official guide that also covers ESM/CJS subtleties.</p>
</li>
<li><p>📜 <a target="_blank" href="https://2ality.com/2025/04/stringification-javascript.html">Converting values to strings in JavaScript has pitfalls</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://frontendmasters.com/blog/seeking-an-answer-why-cant-html-alone-do-includes/">Seeking an Answer: Why can’t HTML alone do includes?</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://nodejs.org/en/blog/release/v24.0.0">Node 24.0</a>: The new Node.js version is out and set to become LTS in October, including npm 11, <code>AsyncLocalStorage</code> perf improvements, the <code>URLPattern</code> API and a major V8 upgrade to v13.6 that unlocks cool new JS APIs such as Explicit Resource Management (<code>using</code>) or <code>RegExp.escape()</code> (which is now <a target="_blank" href="https://web-platform-dx.github.io/web-features-explorer/features/regexp-escape/">available everywhere</a>).</p>
</li>
<li><p>📦 <a target="_blank" href="https://gsap.com/blog/3-13/">GSAP 3.13 - JS animations library - Now 100% free, including all plugins</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://deno.com/blog/v2.3">Deno 2.3 - Improved deno compile, local npm packages, deno fmt in tagged templates, and more</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/prisma/prisma/releases/tag/6.7.0">Prisma 6.7 - ORM without Rust, multi-file schemas</a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://x.com/sebastienlorber/status/1920045489371951117"><img src="https://thisweekinreact.com/emails/issues/233/meme.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/kzzzf/status/1920091355868520557"><img src="https://thisweekinreact.com/emails/issues/233/meme2.jpg" alt="alt" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #232: React Router, Next.js, Radix, Vite, MCP, Storybook | Entreprise Framework, Shopify, Brownfield, WebGPU, AI, Release-It...]]></title><description><![CDATA[Hi everyone!
I hope you've recovered from last week's React Labs news 🔥. This week is of course quieter, but still interesting, with great community articles, weak signals to look at, and a few releases.
Make sure to upgrade your React Router v7 app...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-232-react-router-nextjs-radix-vite-mcp-storybook-entreprise-framework-shopify-brownfield-webgpu-ai-release-it</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-232-react-router-nextjs-radix-vite-mcp-storybook-entreprise-framework-shopify-brownfield-webgpu-ai-release-it</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 02 May 2025 14:42:58 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1746196947133/b3ae8a7c-552f-4002-8cc5-7565eefd4d4f.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>I hope you've recovered from last week's React Labs news 🔥. This week is of course quieter, but still interesting, with great community articles, weak signals to look at, and a few releases.</p>
<p>Make sure to upgrade your React Router v7 app, and bump to Node.js &gt;= 18!</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://bit.dev/?utm_source=ThisWeekInReact&amp;utm_id=10&amp;utm_medium=newsletter"><img src="https://thisweekinreact.com/emails/issues/232/bit.jpg" alt="Bit: Deployment independence with SPA and SSR" /></a></p>
<p><a target="_blank" href="https://bit.dev/?utm_source=ThisWeekInReact&amp;utm_id=10&amp;utm_medium=newsletter"><strong>Bit: Deployment independence with SPA and SSR</strong></a></p>
<p>Build highly performant and consistent platforms from independent business features combining React, NodeJS, Angular or Vue components. Allow developers to integrate and test changes in the context of the complete platform while working independently.</p>
<p>Eliminate integration guesswork and the risk of breaking existing functionalities.</p>
<p>Start composing your existing code <a target="_blank" href="https://bit.dev/?utm_source=ThisWeekInReact&amp;utm_id=10&amp;utm_medium=newsletter"><strong>today</strong></a>!</p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<ul>
<li><p>💸 <a target="_blank" href="https://convex.link/thisweekmcp">Convex launched an MCP Server</a></p>
</li>
<li><p>🔐 <a target="_blank" href="https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v752">React Router vulnerabilities and v7.5.2 fixes</a>: React Router v7 has 2 important security vulnerabilities that could lead to DOS and XSS attacks. They have been fixed in the latest v7.5.2 release. Various cloud providers have deployed a mitigation already (Vercel, Netlify, Cloudflare), but it remains useful to upgrade.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/vercel/next.js/pull/78557">Next.js Docs PR - Remove Vercel mentions</a>: The Next.js docs should now be less biased toward Vercel, and include its competitors more fairly. Personally, I think there's nothing wrong with offering your OSS software to the community and using it as a marketing vector for your paid offer (this is how many OSS projects become sustainable). Even for a larger company like Vercel, it's fair play to do that, but probably necessary to restore the broken trust with some of you.. A reminder that Vercel is not “taking over” the React team, and various client-side-only React Labs features announced last week are <a target="_blank" href="https://bsky.app/profile/ricky.fm/post/3lnvyuennss2b">implemented by Vercel employees</a> (such as <code>&lt;ViewTransition&gt;</code>).</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/hi-ogawa/vite-plugins/issues/748">Vite RSC Plan</a>: A Vite contributor is <a target="_blank" href="https://github.com/facebook/react/pull/31768#issuecomment-2823466684">taking over</a> the development of an upcoming <code>react-server-dom-vite</code> package. Many integration PRs have been sent to frameworks like Waku or RedwoodSDK.</p>
</li>
<li><p>🗓 <a target="_blank" href="https://reactsummit.com/?utm_source=Newsletter&amp;utm_medium=thisweekinreact">React-Summit</a> - 🇳🇱 Amsterdam - 13 &amp; 17 June. Check out the full lineup with 60+ speakers at the biggest React conference worldwide! Use promo code TWIR for 10% off tickets.</p>
</li>
<li><p>🗓️ <a target="_blank" href="https://conf.strapi.io/?utm_source=thisweekinreact">StrapiConf</a> - 🇫🇷 Paris - 13 May. Last call to join us for a deep dive into the future of headless web development! Get a 10% discount with code "TWIR</p>
</li>
<li><p>📜 <a target="_blank" href="https://overreacted.io/what-does-use-client-do/">What Does "use client" Do?</a>: Dan Abramov explains RSCs have no API surfaces. The directives are module system features that open doors between 2 worlds and could even make sense beyond React. Speaking of Dan, he just <a target="_blank" href="https://www.youtube.com/@overreacted-io">re-launched his YouTube channel</a>, in case you want him to walk you through his blog posts.</p>
</li>
<li><p>📜 <a target="_blank" href="https://twofoldframework.com/blog/you-can-serialize-a-promise-in-react">You can serialize a promise in React</a>: A great interactive article that explains how React is able to forward a Promise from the server to the client through a stream. To do so, it re-creates a tiny version of this mechanism.</p>
</li>
<li><p>📜 <a target="_blank" href="https://frontendmasters.com/blog/react-internals-which-useeffect-runs-first/">React Internals: Which useEffect runs first?</a>: A good reminder that <code>useEffect</code> callbacks run bottom-up, from the deepest child to the root (unless you use <code>&lt;Activity&gt;,</code> but that’s a story for another time 🙈).</p>
</li>
<li><p>📜 <a target="_blank" href="https://tkdodo.eu/blog/concurrent-optimistic-updates-in-react-query">Concurrent Optimistic Updates in React Query</a>: Dominik shares interesting patterns to avoid displaying an inconsistent UI when using React Query with concurrent mutations and optimistic updates. Tip: only call <code>invalidateQueries()</code> when there’s a single in-flight mutation.</p>
</li>
<li><p>📜 <a target="_blank" href="https://julesblom.com/writing/parent-owners-context">Parents &amp; Owners in React: Context Providers</a>: Explains the difference between parent and owner components. By restructuring the owner tree without changing the parent tree, we create more targeted “units of update”.</p>
</li>
<li><p>📜 <a target="_blank" href="https://alan.norbauer.com/articles/astro-vs-nextjs-page-size/">From Next.js to Astro: A Page Size Comparison</a>: A quite fair numbers comparison after porting a small static Next.js site to Astro, reducing bundle size.</p>
</li>
<li><p>📜 <a target="_blank" href="https://rwsdk.com/blog/redwoodsdk-multiple-documents">Per-Route Documents in RedwoodSDK: Total Control Over Your HTML</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://marmelab.com/blog/2025/04/23/react-admin-with-shadcn.html">React-admin With Shadcn UI</a></p>
</li>
<li><p>💸 <a target="_blank" href="https://tolgee.io/apps-integrations/react">Tolgee React - Translate Apps with Tolgee and Forget About Infinite Spreadsheets of Text</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/facebook/react/tree/main/compiler/packages/react-mcp-server">React MCP Server (experimental)</a>: It’s in the React repo, but for now, it’s <a target="_blank" href="https://github.com/facebook/react/pull/32859">just a one-person fun experiment by Lauren</a> (React Compiler team).</p>
</li>
<li><p>📦 <a target="_blank" href="https://www.radix-ui.com/primitives/docs/overview/releases#april-17-2025">Radix UI 1.3 - OneTimePasswordField</a>: In case you missed it (we did!), there’s now a <code>radix-ui</code> package to consolidate all Radix primitives under a single roof (instead of <code>@radix-ui/*</code> imports). It’s likely that <code>shadcn/ui</code> will <a target="_blank" href="https://github.com/shadcn-ui/ui/pull/6868#issuecomment-2718219342">adopt it and provide a codemod</a> in the future.</p>
</li>
<li><p>📦 <a target="_blank" href="https://storybook.js.org/blog/storybook-9-beta/">Storybook 9 beta</a>: The new version is now feature complete, with a good focus on testing (components, interaction, accessibility, visual tests). The tag-based organization should help improve UX. Also includes first-class support for React Native Web.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/facebook/lexical/releases/tag/v0.31.0">Lexical 0.31 - Extensible text editor with React bindings</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://frimousse.liveblocks.io/">Frimousse - A lightweight, unstyled, and composable emoji picker for React</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=-dePNpdd44M">Theo - React just got way cooler</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=Atev8Nxpw7c">Jack Herrington - Better-Auth: Headless Authentication for Your TanStack Start App</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://creators.spotify.com/pod/profile/reactiflux/episodes/TMiR-2025-04-React-19-1-helps-debug-owner-stacks-e324h0g">This Month in React - React 19.1, Next.js 15.3, RN v0.79, RTK, React Aria</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://go.clerk.com/fpzcK5F"><img src="https://thisweekinreact.com/emails/issues/232/clerk.jpg" alt="How to take Clerk to Production" /></a></p>
<p><a target="_blank" href="https://go.clerk.com/ovPb3z0"><strong>How to take Clerk to Production</strong></a></p>
<p>Step-by-step guide for developers to launch a Clerk app in a production environment with a custom domain, OAuth credentials, and secure DNS configuration.</p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<p><a target="_blank" href="https://www.rnef.dev/"><img src="https://thisweekinreact.com/emails/issues/232/rnef.jpg" alt="React Native Enterprise Framework" /></a></p>
<p><a target="_blank" href="https://www.rnef.dev/"><strong>React Native Enterprise Framework</strong></a></p>
<p>The Callstack project is now open source. It’s built as a drop-in replacement for the RN community CLI to help you adopt React Native incrementally in existing mobile apps (also called “brownfield”). The features include:</p>
<ul>
<li><p>Incremental adoption in native apps thanks to our simplified brownfield approach</p>
</li>
<li><p>Web-like DX thanks to advanced native build caching hosted on your infra</p>
</li>
<li><p>Pluggable design to leverage out-of-tree platforms, custom bundlers, etc.</p>
</li>
</ul>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://go.clerk.com/Y0ne425">Build a Modern Multi-User Chat App with React Native</a></p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/satya164/status/1916095938604548366">RN 0.79 now has buit-in support for "aliases" (through Metro package.json <code>imports</code>)</a></p>
</li>
<li><p>📣 <a target="_blank" href="https://expo.dev/changelog/website-updates-4-29-2025">Expo Changelog - New Build Comparison Tool, Expo Router Landing Page, and UX Improvements</a></p>
</li>
<li><p>🗓️ <a target="_blank" href="https://appjs.co/?utm_source=thisweekinreact">App.js Conf</a> - 🇵🇱 Kraków - 28-30 May. This is your final chance to join the biggest React Native &amp; Expo event. Secure your seat now and enjoy a 15% discount using code "TWIR"</p>
</li>
<li><p>📜 <a target="_blank" href="https://shopify.engineering/mobilebridge-native-webviews">Shopify Mobile Bridge: Making WebViews Feel Native</a>: As part of their transition to React Native, Shopify implemented a fast custom WebView solution that looks and feels native. Critical screens remain implemented using native technologies, but this Mobile Bridge powers many of their important but non-critical screens.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.callstack.com/blog/powering-native-apps-with-react-native-brownfield">Powering Native Apps with React Native Brownfield</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://shift.infinite.red/the-best-way-to-include-custom-fonts-in-react-native-for-macos-in-2025-4cb235e2d6f7">React Native macOS - The best way to include custom fonts</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/migrating-to-react-native-with-expo">Migrating to React Native with Expo: A Path to Cross-Platform Success</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.swmansion.com/optimizing-battery-usage-improving-crash-free-rate-in-a-react-native-app-9e80ba1f240a">Optimizing Mobile App Battery Usage &amp; Crash Rate</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion-labs/react-native-webgpu-worklets">React Native WebGPU Worklets</a>: Run smooth WebGPU-backed animations (including Three.js) on any threads (UI/background), powered by Reanimated Worklets</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/callstackincubator/ai">React Native AI 0.1</a>: New Callstack project to let you run LLM models on-device, based on Vercel AI SDK.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/mym0404/expo-release-it">Expo-Release-It - Opinionated CLI for building, uploading, and submitting Expo CNG project on your machine</a>: An interesting local alternative to EAS?</p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=42RKqciqjV0">Simon Grimm - Epic React Native Snippets You Need to Know</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=GoDXfzpYGTc">Theo - React Native Is More Popular Than You Think</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://infinite.red/react-native-radio/rnr-329-state-of-react-native-survey-results-are-in">React Native Radio 329 - State of React Native Survey Results are in! - RNR 329</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://share.transistor.fm/s/ba0f8a72">Rocket Ship 66 - Expo 53 BETA, FlashList v2, RN Popularity, App Sales &amp; OTA Alternative</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>📣 <a target="_blank" href="https://nodejs.org/en/about/previous-releases">Node.js 18 reaches End-of-Life today</a>: This Node.js version will no longer receive security updates, and it’s recommended to upgrade to v20 or v22.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/sveltejs/svelte/discussions/15845">Asynchronous Svelte</a>: Svelte has a new async experimental mode, and this doc explains how it works. The “Forks” section reminds a bit of Concurrent React, transitions, and its upcoming <code>&lt;Activity&gt;</code> component.</p>
</li>
<li><p>👀 <a target="_blank" href="https://www.mozilla.org/en-US/firefox/140.0a1/releasenotes/#note-790833">Firefox enabling View Transitions in Firefox 139 Nightly builds</a>: A positive signal from the only remaining browser to not have this feature. Good timing for React and its upcoming <code>&lt;ViewTransition&gt;</code> component?</p>
</li>
<li><p>📜 <a target="_blank" href="https://v8.dev/blog/explicit-compile-hints">Giving V8 a Heads-Up: Faster JavaScript Startup with Explicit Compile Hints</a>: A new feature coming with Chrome 136 allows faster web page loading by annotating your files/functions with magic comments to tell V8 to compile the JS code eagerly, showing promising results on experiments. Maybe it will be useful to speed up React hydration or even Node.js programs?</p>
</li>
<li><p>📜 <a target="_blank" href="https://antfu.me/posts/categorize-deps">Categorize Your Dependencies</a>: Using pnpm catalogs.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.deepintodev.com/blog/how-nodejs-works-behind-the-scenes">How Node.js Works Behind the Scenes</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://dev.to/this-is-learning/a-decade-of-solidjs-32f4">A Decade of SolidJS</a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://www.linkedin.com/posts/yangshun_react-vue-svelte-activity-7313404647040249856-uNQi/"><img src="https://thisweekinreact.com/emails/issues/232/meme0.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://www.reddit.com/r/reactnative/comments/1jxoppk/is_this_you/"><img src="https://thisweekinreact.com/emails/issues/232/meme.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/jarredsumner/status/1916535123568140571"><img src="https://thisweekinreact.com/emails/issues/232/meme2.jpg" alt="alt" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #231: React Labs, Compiler, React Router, Next.js, TanStack Query, c15t, RTK, Base UI | Legend List, FlashList, Versioning, Metro..]]></title><description><![CDATA[Hi everyone!
Cyril and Matthieu from Theodo Apps here 👋, standing in for Seb to bring you the latest news from the React and React Native worlds.
This week, we have two exciting blog posts for the React team, and a special guest from the React core ...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-231-react-labs-compiler-react-router-nextjs-tanstack-query-c15t-rtk-base-ui-legend-list-flashlist-versioning-metro</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-231-react-labs-compiler-react-router-nextjs-tanstack-query-c15t-rtk-base-ui-legend-list-flashlist-versioning-metro</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 25 Apr 2025 13:22:07 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1745587297017/60d66306-4372-468d-a4cb-1095c3528372.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>Cyril and Matthieu from <a target="_blank" href="https://apps.theodo.com/en?utm_source=thisweekinreact">Theodo Apps</a> here 👋, standing in for Seb to bring you the latest news from the React and React Native worlds.</p>
<p>This week, we have two exciting blog posts for the React team, and a special guest from the React core team has a message for you all!</p>
<p>We've also been reading quite a few interesting blog posts from the "official" blogs and the community.</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://convex.link/thisweekai"><img src="https://thisweekinreact.com/emails/issues/227/convex.jpg" alt="Convex: The Database Designed for AI Coding" /></a></p>
<p><a target="_blank" href="https://convex.link/thisweekai"><strong>Convex: The Database Designed for AI Coding</strong></a></p>
<p>In the age of code generation, you need a backend that you can confidently generate with AI platforms. Convex is by far and away <a target="_blank" href="https://stack.convex.dev/introducing-fullstack-bench">best in class</a> in this respect.</p>
<p>This is because Convex is just TypeScript, allowing you to write <a target="_blank" href="https://docs.convex.dev/functions/query-functions/">queries as code</a> that are automatically transactional, cached, and realtime.</p>
<p>And that’s just the beginning. With Convex, you can:</p>
<ul>
<li><p>Easily schedule functions and write cron jobs</p>
</li>
<li><p>Set up file storage</p>
</li>
<li><p>Write efficient server functions</p>
</li>
<li><p>And so much more…</p>
</li>
</ul>
<p><a target="_blank" href="https://docs.convex.dev/quickstarts">Try a Quickstart today</a></p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<p><a target="_blank" href="https://react.dev/blog/2025/04/21/react-compiler-rc"><img src="https://thisweekinreact.com/emails/issues/231/compiler.jpg" alt="React Compiler RC" /></a></p>
<p><a target="_blank" href="https://react.dev/blog/2025/04/21/react-compiler-rc"><strong>React Compiler RC</strong></a></p>
<p>The React Labs post is not the only exciting update this week! The React Compiler is also in Release Candidate, in preparation of the compiler’s stable release.</p>
<p>The Babel-free builds is a welcome improvement so that we can keep using the compiler with our modern Rust tooling!</p>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://go.clerk.com/j5M7vZt">How to build a multi-tenant app using Clerk + Supabase</a></p>
</li>
<li><p>🗓 <a target="_blank" href="https://futurefrontend.com/?utm_source=thisweekinreact">Future Frontend</a> - 🇫🇮 Espoo - 26-28 May. Dive into the future of frontend development with Aurora Scharff, Rachel Nabors, and others! Use code "TWIR" for a 10% discount.</p>
</li>
<li><p>📜 <a target="_blank" href="https://overreacted.io/impossible-components/">Impossible Components</a>: Dan Abramov continues his series of blog posts about RSC, this time detailing, among other things, how it squares with React’s top-down data flow.</p>
</li>
<li><p>📜 <a target="_blank" href="https://remix.run/blog/faster-lazy-loading">Faster Lazy Loading in React Router v7.5+</a>: This was released a few weeks ago. Mark Dalgleish explains in this post why the new approach (lazy loading by route properties instead of the whole route) was necessary, especially when using middlewares.</p>
</li>
<li><p>📜 <a target="_blank" href="https://vercel.com/blog/guide-to-fast-websites-with-next-js-tips-for-maximizing-server-speeds#how-to-speed-up-the-page-render-minimize-client-burden">Performance tips with Next.js</a>: A nice recap of all the available optimizations: pre-render, use caching, watch bundle size, lazy-load what can be, optimize fonts and images, use virtualization…</p>
</li>
<li><p>📜 <a target="_blank" href="https://gabrielpichot.fr/blog/simplify-tanstack-react-query-state-handling-with-pattern-matching/">Simplify TanStack React Query State Handling with Pattern Matching</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.brenelz.com/posts/using-client-caches-in-loaders/">Using Client Caches In Loaders</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://vercel.com/blog/life-of-a-request-application-aware-routing">Life of a Request: Application-aware routing - Vercel</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.developerway.com/posts/tailwind-vs-linaria-performance">Tailwind vs Linaria: Performance Investigation</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/c15t/c15t">c15t</a>: A new consent management framework coming with drop-in React components.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/reduxjs/redux-toolkit/releases/tag/v2.7.0">Redux Toolkit 2.7</a>: Standard Schema for RTK query, improved infinite queries.</p>
</li>
<li><p>📦 <a target="_blank" href="https://headless-tree.lukasbach.com/">Headless Tree 1.0</a>: A successor to React Complex tree, the author has a <a target="_blank" href="https://medium.com/@lukasbach/headless-tree-and-the-future-of-react-complex-tree-fc920700e82a">blog post explaining the change</a>.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/module-federation/core/releases/tag/v0.13.0">Module Federation Core 0.13</a>: Better React 19 support and bug fixes.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/mui/base-ui/releases/tag/v1.0.0-alpha.8">Base UI 1.0 alpha-8</a>: The new Radix UI alternative keeps progressing with new Toast and Meter components among many other things.</p>
</li>
<li><p>🎙️ <a target="_blank" href="http://Syntax.fm">Syntax.fm</a> <a target="_blank" href="https://syntax.fm/show/895/react-server-components-where-are-we-at">- React Server Components: Where are we at?</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://semaphor.cloud"><img src="https://thisweekinreact.com/emails/issues/231/semaphor.jpg" alt="Self-service analytics and dashboards in your product" /></a></p>
<p><a target="_blank" href="https://semaphor.cloud"><strong>Self-service analytics and dashboards in your product</strong></a></p>
<p><strong>Your engineers didn’t sign up to build dashboards.</strong> Let them focus on features.</p>
<p>With Semaphor, your data team can ship insights independently. No code changes, no front-end redeploys. Decouple analytics from your product code and move faster.</p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<p><a target="_blank" href="https://bsky.app/profile/jayz.us/post/3lni5ofbuvs2s"><img src="https://thisweekinreact.com/emails/issues/231/legend-list.png" alt="Legend List 1.0" /></a></p>
<p><a target="_blank" href="https://bsky.app/profile/jayz.us/post/3lni5ofbuvs2s"><strong>Legend List 1.0</strong></a></p>
<p>Making long lists performant is a hard problem, and React Native’s old architecture wasn’t making it any easier with it’s asynchronous layout computation. We remember Margelo abandoning their <code>WishList</code> project. Legend List is now in version 1.0, and promises to be even faster than <code>FlashList</code>, all the while handling the "hard cases": bidirectional infinite lists, varying item sizes… And it's compatible with the old arch (though less performant and with possible glitches).</p>
<p>As Seb mentioned last week, there’s also a <a target="_blank" href="https://github.com/Shopify/flash-list/tree/new-rlv-prototype">v2 of <code>FlashList</code></a> in the works, which should be easier to use (no need to specify estimatedItemSize for instance).</p>
<p>Thankfully, all those copy the API of <code>FlatList</code> so it’s easy to switch back and forth 🙂.</p>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://go.posthog.com/twir-apr23">PostHog - How to set up React Native session replay</a></p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/_jbroma/status/1912903068464594993">Prototype of Module Federation working with Metro Bundler</a></p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/mani3xis/status/1912947427864441144">An experiment of CSS support in React Native, including grid layout</a></p>
</li>
<li><p>📖 <a target="_blank" href="https://reactnative.dev/contributing/versioning-policy">React Native Versioning Policy</a>: This new page details the versioning scheme based on the <code>0.x.y</code> pattern. Even more importantly, this also explains the release process and what is considered a breaking change. This is part of an ongoing effort to clarify the public API surface and even reduce it (see the <a target="_blank" href="https://github.com/react-native-community/discussions-and-proposals/pull/894">Removing deep imports RFC</a>). React Native is getting more stable, and maybe we’ll get a v1.0 one day?</p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/best-practices-for-reducing-lag-in-expo-apps">Best Practices for reducing lag in Expo apps</a>: Highlight React renders directly from the devtools, React Compiler, React 19, and multi-threading.</p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.swmansion.com/bringing-easyocr-to-react-native-executorch-2401c09c2d0c">Offline Text Recognition on Mobile: How We Brought EasyOCR to React Native ExecuTorch</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/how-to-build-universal-app-voice-agents-with-expo-and-elevenlabs">How to build universal app voice agents with Expo &amp; ElevenLabs</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/out-with-the-old-in-with-the-new-architecture">Out with the old, in with the New Architecture (by default)</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/callstack/react-native-brownfield/releases/tag/v1.0.0">React Native Brownfield 1.0</a>: Adds support for SwiftUI, Jetpack Compose, and packaging as a framework.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion-labs/typegpu-confetti">typegpu-confetti</a>: Confetti animations for React Native, computed and rendered exclusively on the GPU with <code>react-native-webgpu</code> and TypeGPU.</p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/playlist?list=PLsXDmrmFV_AT17JDf-otXSNE_eH7s0uDD">Expo Router Tutorial</a>: The first 5 videos are available. It covers layout files, Stack &amp; Tab navigators, modals, and Auth Flow.</p>
</li>
<li><p>🎙️ <a target="_blank" href="https://infinite.red/react-native-radio/rnr-328-flashlight-with-alexandre-moureaux">RNR 328 - Flashlight with Alexandre Moureaux</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://www.youtube.com/watch?v=evGUO_CN1Fc">Rocket Ship 65 - Expo SDK 53 Preview, RevenueCat Paywalls, AI Images &amp; Gemini</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>📣 <a target="_blank" href="https://ecmascript-daily.github.io/ecmascript/2025/04/19/ecmascript-proposal-update">TC39 meeting 107th - ECMA Proposal Updates</a>: Summarizes the proposals that progressed last week. Sad to see Records &amp; Tuples withdraw, but we also have new interesting proposals to watch, such as Enums and Composites.</p>
</li>
<li><p>📊 <a target="_blank" href="https://2025.stateofai.dev">State of AI 2025 - Survey results</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.platformatic.dev/optimizing-nodejs-performance-v8-memory-management-and-gc-tuning">Optimizing Node.js Performance: V8 Memory Management &amp; GC Tuning</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://dev.to/sachagreif/launching-the-first-ever-state-of-devs-survey-23il">Launching the first ever State of Devs survey</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.rafaelgss.dev/securing-github-actions">Securing Your GitHub Actions</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.appsignal.com/2025/04/16/an-introduction-to-javascript-bundler-rspack.html">An Introduction to JavaScript Bundler Rspack</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://tsdown.dev/">tsdown - The Elegant Library Bundler - Powered by Rolldown</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://nodejs.org/en/blog/release/v22.15.0">Node 22.15</a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://x.com/potetotes/status/1914855126348480850"><img src="https://thisweekinreact.com/emails/issues/231/meme0.jpg" alt="React Compiler RC meme - shows a cat in a React Compiler RollerCoaster" /></a></p>
<p><a target="_blank" href="https://x.com/Baconbrix/status/1913353166483058931"><img src="https://thisweekinreact.com/emails/issues/231/meme1.jpg" alt="Evan Bacon - Coming back to Expo after spending an hour in Android Studio - Photo of Katy Perry kissing the ground after returning from her space flight" /></a></p>
<p><a target="_blank" href="https://x.com/trashh_dev/status/1893339204710539265"><img src="https://thisweekinreact.com/emails/issues/231/meme2.jpg" alt="A huge vertical screen with &quot;package.json&quot; deps and huge horizontall screen with &quot;tailwind class names&quot;" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #230: Next.js, Turbopack, Rspack, Activity, RSC, oRPC, tweakcn | Expo, Fantom, FlashList, SVG, Tracy, New Arch, Radon | TC39...]]></title><description><![CDATA[Hi everyone!
This week we have a great Next.js release with significant build speed improvements. I'm also quite excited to see the activity around the upcoming React <Activity> component. Many great community blog posts to read too!
React Native als...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-230-nextjs-turbopack-rspack-activity-rsc-orpc-tweakcn-expo-fantom-flashlist-svg-tracy-new-arch-radon-tc39</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-230-nextjs-turbopack-rspack-activity-rsc-orpc-tweakcn-expo-fantom-flashlist-svg-tracy-new-arch-radon-tc39</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 18 Apr 2025 12:21:56 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1744978845638/469e76db-953b-4364-8fc5-1fccd6485e72.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>This week we have a great Next.js release with significant build speed improvements. I'm also quite excited to see the activity around the upcoming React <code>&lt;Activity&gt;</code> component. Many great community blog posts to read too!</p>
<p>React Native also has great releases with the new Expo SDK in beta, and the next version of FlashList in alpha.</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://go.posthog.com/twir-apr16"><img src="https://thisweekinreact.com/emails/issues/230/posthog.jpg" alt="Product management is broken. Engineers can fix it" /></a></p>
<p><a target="_blank" href="https://go.posthog.com/twir-apr16"><strong>Product management is broken. Engineers can fix it</strong></a></p>
<p>When <a target="_blank" href="https://go.posthog.com/twir-apr16-ph">PostHog</a> started, they were adamant they would <strong>never hire a product manager</strong>. They wanted engineers to wrestle with hard product problems. Product managers would just get in the way.</p>
<p>They were (partially) wrong. They need product managers and couldn’t have shipped 8+ products or hit their revenue goals without them.</p>
<p>What was needed was a <strong>redefinition of how PMs and engineers work together</strong>, optimized for speed and autonomy. <a target="_blank" href="https://go.posthog.com/twir-apr16">This post shares their exact playbook</a>.</p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<p><a target="_blank" href="https://nextjs.org/blog/next-15-3"><img src="https://thisweekinreact.com/emails/issues/230/nextjs.jpg" alt="Next.js 15.3" /></a></p>
<p><a target="_blank" href="https://nextjs.org/blog/next-15-3"><strong>Next.js 15.3</strong></a></p>
<p>A new minor version of Next.js is out, with highlights:</p>
<ul>
<li><p>Turbopack for builds (alpha): Faster production builds passing 8000+ tests (99%)</p>
</li>
<li><p>Community support for Rspack (experimental): Alternative bundler with Webpack compatibility</p>
</li>
<li><p>Client Instrumentation hook: Early monitoring and analytics setup</p>
</li>
<li><p>Navigation hooks: Control routing with <code>onNavigate</code> and <code>useLinkStatus</code></p>
</li>
<li><p>TypeScript plugin improvements: Improved support for large codebases</p>
</li>
</ul>
<p>It’s great to see Next.js improving with faster bundling with Turbopack for builds, and opening up to Rspack as an alternative to Webpack. Both have different tradeoffs and use cases.</p>
<p>See also these related resources:</p>
<ul>
<li><p>📦 <a target="_blank" href="https://rspack.dev/blog/rspack-next-partner">Rspack 1.3.5 - Rspack joins the Next.js ecosystem</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=jN0kB85rxGg">Theo - Next.js 15.3: A Huge Change for Vercel</a></p>
</li>
</ul>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://bit.dev/?utm_source=ThisWeekInReact&amp;utm_id=8&amp;utm_medium=newsletter">Bit - A build system framework for development of composable software. Support NodeJS, React apps (with Vite), NextJS, and modern stack.</a></p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/DefinitelyTyped/DefinitelyTyped/pull/72454">React Types PR - <code>unstable_Activity</code></a>: There’s a lot of <code>&lt;Activity&gt;</code> activity lately, including TypeScript typedefs added. This upcoming component, previously named <code>&lt;Offscreen&gt;</code>, has been <a target="_blank" href="https://react.dev/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen">mentioned in React Labs updates since 2022</a>, and may soon be ready for prime time? This low-level primitive is particularly exciting for frameworks to fully leverage Concurrent React.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/vercel/next.js/pull/77992">Next.js PR - Experimental bfcache - Restore state with <code>&lt;Activity&gt;</code></a>: Unsurprisingly, Next.js starts experimenting with the <code>&lt;Activity&gt;</code> component above, by implementing a back/forward cache feature that allows pressing the browser back button to instantly transition to the previous page while restoring its former React state. In the future, Next.js (and other React/RN frameworks too) will likely implement speculative pre-rendering: React could start rendering a target page as soon as you hover a link, even before you click it.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/facebook/react/pull/32819">React Core PR - Add Suspensey Images behind a flag</a>: An upcoming React feature could help ensure all images have loaded before transitioning to a new page. The rollout plan is still unclear: it might come in a minor or major.</p>
</li>
<li><p>📜 <a target="_blank" href="https://overreacted.io/jsx-over-the-wire/">JSX Over The Wire</a>: Dan Abramov explains why you might want your API to send JSX back across the wire, through 3 different stories. The alternative could be to maintain parallel Component and ViewModel trees in both your client app and REST API. He also shares the some historical bits and technologies that led to the creation of the Server Components.</p>
</li>
<li><p>📜 <a target="_blank" href="https://buildui.com/posts/toast-messages-in-react-server-components">Toast messages in React Server Components</a>: Shows how to trigger the display of toast messages from Next.js Server Actions using server cookies. This technique can be used for other kinds of flash messages.</p>
</li>
<li><p>📜 <a target="_blank" href="https://gabrielpichot.fr/blog/memoizing-components-in-react-a-case-for-usememo/">Memoizing components in React: a case for useMemo</a>: This interactive article argues most <code>React.memo</code> can be replaced by <code>useMemo</code>, and it’s closer to what the React Compiler is doing.</p>
</li>
<li><p>📜 <a target="_blank" href="https://ondrejvelisek.github.io/avoid-state-synchronization-trap/">Avoid the State Synchronization Trap</a>: This interactive article highlights 4 different ways to synchronize distinct React states and their tradeoffs so that what gets rendered is consistent.</p>
</li>
<li><p>📜 <a target="_blank" href="https://fotis.xyz/posts/the-new-cookie-store-api/">The new Cookie Store API</a>: And how you could integrate this not-widely-supported API in React apps as a progressive enhancement.</p>
</li>
<li><p>📜 <a target="_blank" href="https://aurorascharff.no/posts/building-reusable-components-with-react19-actions/">Building Reusable Components with React 19 Actions</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://playfulprogramming.com/posts/layered-react-structure">Scale Your Project with Layered React Structure</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.premieroctet.com/blog/en/view-transition-api-in-next-js-and-react">View Transition API and its Integration in NextJS</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.jeantinland.com/blog/lazy-load-svg-icons-with-use-react-js/">Lazy load SVG icons with &lt;use/&gt; in React.js</a></p>
</li>
<li><p>💸 <a target="_blank" href="https://go.clerk.com/EbcUjrv">Guide: Integrate Clerk with your Lovable application. Bonus feature add-ons for B2B, Waitlist, custom domain and more</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://orpc.unnoq.com/blog/v1-announcement">oRPC 1.0 - Typesafe APIs Made Simple</a>: An interesting alternative to tRPC, ts-rest &amp; next-safe-action that comes with React bindings, framework integrations and Server Actions support.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/jnsahaj/tweakcn">tweakcn - A visual no-code editor for shadcn/ui components</a>: A convenient tool to create a custom shadcn/ui theme, or use a pre-built one.</p>
</li>
<li><p>📦 <a target="_blank" href="https://astro.build/blog/astro-570/">Astro 5.7 - SVG Components, Sessions API, Config imports, experimental Fonts API</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://react-spectrum.adobe.com/releases/2025-04-11.html">React Aria release - Custom calendars, collections improvements, smaller bundle size</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=dLUyPLbvdY0">Jack Herrington - tRPC v11 with TanStack Query on TanStack Start!</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=mMQCLQTky34">Theo – Why is Next.js so slow?</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=b7uUWoS1Zro">Web Dev Simplified - How I Recreated TanStack Router From Scratch</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://appjs.co"><img src="https://thisweekinreact.com/emails/issues/230/appjs.jpg" alt="Join App.js Conf &amp; meet the people behind React Native!" /></a></p>
<p><a target="_blank" href="https://appjs.co"><strong>Join App.js Conf &amp; meet the people behind React Native!</strong></a></p>
<p>App.js Conf is <strong>the</strong> place to be if you want to meet the teams behind your favourite libraries &amp; frameworks, pick their brains about the future of cross-platform development and connect with 500 like-minded devs and simply have fun!</p>
<ul>
<li><p><a target="_blank" href="https://appjs.co/#speakers">confirmed speakers</a> from Expo, Meta, Software Mansion, NFL, Amazon &amp; more</p>
</li>
<li><p>8 practical workshops to choose from</p>
</li>
<li><p>3 days filled with knowledge, conference talks &amp; networking</p>
</li>
</ul>
<p>Join us for the biggest React Native &amp; Expo event of the year! 🚀</p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<ul>
<li><p>💸 <a target="_blank" href="https://withfra.me">WithFrame - Pre-Built React Native Templates</a></p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/facebook/react-native/blob/main/packages/react-native-fantom/__docs__/README.md">React Native Fantom</a>: A new experimental integration testing and benchmarking tool is being actively worked on. It’s a Jest test runner that runs C++ parts of RN, enabling to test things such as shadow nodes, layout, events, scheduling, and C++ state updates. This tool is primarily useful for testing the internals of React Native, but its scope may extend to testing library/product code in the future.</p>
</li>
<li><p>📖 <a target="_blank" href="https://reactnative.dev/docs/the-new-architecture/advanced-topics-modules">Advanced Topics on Native Modules Development</a> and <a target="_blank" href="https://reactnative.dev/docs/the-new-architecture/advanced-topics-components">Advanced Topics on Native Components Development</a>: Various docs pages for advanced New Architecture topics have recently been published, such as using Swift or invoking native commands.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.callstack.com/blog/profiling-react-native-internals-with-tracy-for-peak-performance">Profiling React Native Internals with Tracy for Peak Performance</a>: Sometimes the perf bottleneck doesn’t come from your app, but comes from RN itself. This unified profiling solution works across all platforms.</p>
</li>
<li><p>📜 <a target="_blank" href="https://andrei-calazans.com/posts/react-native-android-feature-flags/">How to set React Native Core's feature flags on Android</a>: Quick tip explaining how to turn on <code>enableFabricLogs</code> on Android.</p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.swmansion.com/you-might-not-need-react-native-svg-b5c65646d01f">You Might Not Need react-native-svg</a>: This lib is quite flexible, but depending on the SVG, it might create very large React component trees. Many alternatives exist with different tradeoffs.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.fabrizioduroni.it/blog/post/2025/04/02/react-native-skia-text-gradient">Creating Stunning Gradients in React Native with Skia</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://expo.dev/changelog/sdk-53-beta">Expo SDK 53 beta</a>: The new SDK upgrades to React Native 0.79, React 19, turns the New Architecture on by default and includes a ton of new features. We’ll cover it in depth once it’s stable in ~2 weeks!</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/Shopify/flash-list/tree/new-rlv-prototype">FlashList 2.0 alpha</a>: The new version of this optimized list component is now alpha and Shopify encourages the community to try it. Rebuilt from the ground up, it’s faster, leverages the New Arch, and doesn’t require size estimates anymore.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/radon-ide/releases/tag/v1.5.0">Radon IDE 1.5 - Radon AI Chat, improved EAS workflow, RN 0.79</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/mahdidavoodi7/bottom-sheet-stepper">Bottom Sheet Stepper - Manage beautiful multi-step flows in a bottom sheet</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=Yh6Qlg2CYwQ">Expo - Introduction to Expo Router Layout Files</a>: Expo’s first video of a new Expo Router fundamentals tutorial series.</p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=yf-UZJ84-Gk">Callstack - Why You Need React Native Enterprise Framework</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=uXi503z8p-g">Beto - What’s new in Expo SDK 53: React 19, Expo UI, EAS Caching, Maps, and SQLite on Web</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>👀 <a target="_blank" href="https://github.com/tc39/agendas/blob/main/2025/04.md">TC39 107th meeting in progress</a>: Happening right now. Exciting JS proposals progressed already: Composites (stage 1, supersedes Records &amp; Tuples), Enums (stage 1, compatible with type stripping), Upsert (stage 2.7, Map update or insert operation).</p>
</li>
<li><p>👀 <a target="_blank" href="https://spidermonkey.dev/blog/2025/04/11/shipping-temporal.html">SpiderMonkey - Shipping Temporal</a>: Firefox 139 will be the very first browser to turn on the new Temporal feature.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.oddbird.net/2025/04/11/custom-functions/">Custom CSS Functions in the Browser</a>: Exciting CSS feature, with a prototype now available in Chromium canary 136+.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.atriiy.dev/blog/rolldown-module-loader-and-dependency-graph">How Rolldown Works: Module Loading, Dependency Graphs, and Optimization Explained</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://v4.zod.dev/v4">Zod 4.0 beta - faster, slimmer, more tsc-efficient, implements long-requested features</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://pears.com/news/introducing-bare-actually-run-javascript-everywhere/">Bare - Minimal JS runtime that actually runs everywhere</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://animejs.com/">Anime.js 4.0</a>: A complete rewrite of the animation library, launched with an impressive landing page.</p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://x.com/sebastienlorber/status/1911715079919132842"><img src="https://thisweekinreact.com/emails/issues/230/meme.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/sebastienlorber/status/1910290087163670959"><img src="https://thisweekinreact.com/emails/issues/230/meme2.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/PR0GRAMMERHUM0R/status/1910694354907263383"><img src="https://thisweekinreact.com/emails/issues/230/meme3.jpg" alt="alt" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #229: React Conf, React Router, Next.js Adapters, Fastify, Waku | RN v0.79, Deep Imports, Builder Bob, Fingerprinting | TC39...]]></title><description><![CDATA[Hi everyone!
This week, I'm excited to introduce 2 new contributors to help me with the newsletter!
Tomasz and Kacper from Software Mansion here – you may already know us from libraries like Reanimated or Gesture Handler. We're happy to be among the ...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-229-react-conf-react-router-nextjs-adapters-fastify-waku-rn-v079-deep-imports-builder-bob-fingerprinting-tc39</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-229-react-conf-react-router-nextjs-adapters-fastify-waku-rn-v079-deep-imports-builder-bob-fingerprinting-tc39</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 11 Apr 2025 12:16:43 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1744373729928/2abe8d96-4ead-4946-8b62-b0afdcd221c7.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>This week, I'm excited to introduce 2 new contributors to help me with the newsletter!</p>
<p><strong>Tomasz and Kacper from</strong> <a target="_blank" href="https://swmansion.com/?utm_source=thisweekinreact"><strong>Software Mansion</strong></a> here – you may already know us from libraries like Reanimated or Gesture Handler. We're happy to be among the authors of the This Week in React newsletter!</p>
<p>We were about to call it a fairly calm week… until React Conf 2025 was officially announced and React Native 0.79 dropped with Swift-compatible native modules for iOS, faster app startup on Android, and many more. Let's dive in!</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://marmelab.com/react-admin/"><img src="https://thisweekinreact.com/emails/issues/229/marmelab.jpg" alt="React-admin: Yes, You Could Build It Yourself… But Why?" /></a></p>
<p><a target="_blank" href="https://marmelab.com/react-admin/"><strong>React-admin: Yes, You Could Build It Yourself… But Why?</strong></a></p>
<p>You didn’t spend years mastering React just to build CRUD apps on repeat. Yet here you are—facing another request for an admin panel and questioning your life choices.</p>
<p>We've been there ourselves. That’s why we built <a target="_blank" href="https://marmelab.com/react-admin/"><strong>react-admin</strong></a>—an open-source framework that handles the boring parts (data fetching, forms, auth, permissions…) so you can focus on the real dev work.</p>
<p>Powered by <strong>Material UI, react-hook-form, react-router, react-query, and TypeScript</strong>, it lets you build admins on top of any REST/GraphQL API—fast.</p>
<p>So next time your PM asks for a new dashboard, skip the existential crisis. <a target="_blank" href="https://github.com/marmelab/react-admin">Just use react-admin.</a></p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<p><a target="_blank" href="https://conf.react.dev/"><img src="https://thisweekinreact.com/emails/issues/229/react-conf-2025.png" alt="React Conf 2025" /></a></p>
<p><a target="_blank" href="https://conf.react.dev/"><strong>React Conf is back for 2025</strong></a></p>
<p>The React conference is happening on October 7-8, 2025 in Henderson, Nevada, 🇺🇸 US. It’s where the React &amp; React Native team shares official announcements live.</p>
<p>The only way to attend the conference in person is to win a ticket lottery that lets you purchase up to 2 tickets. Fortunately, if you’re not one of the lucky ones, the event will be livestreamed for free.</p>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://go.posthog.com/twir-apr9">Product for Engineers - Good taste makes great products: Simple design principles every engineer should know</a></p>
</li>
<li><p>📣 <a target="_blank" href="https://community.redwoodjs.com/t/the-future-of-redwood-launches-today/7938">The Future of Redwood Launches Today</a>: The former project gets renamed to Redwood GraphQL and enters maintenance mode. <a target="_blank" href="https://redwoodjs.com/">RedwoodSDK</a> is the new path for the framework under new leadership.</p>
</li>
<li><p>💬 <a target="_blank" href="https://github.com/vercel/next.js/discussions/77740">Next.js RFC – Deployment Adapters API</a>: Vercel plans to support adapters to deploy Next.js to any hosting provider.</p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/tannerlinsley/status/1908723776650355111">Tanner Linsley – TanStack Router <code>intent</code> preloading will predict where your users cursor will go</a></p>
</li>
<li><p>🔐 <a target="_blank" href="https://zhero-web-sec.github.io/research-and-things/react-router-and-the-remixed-path">React Router and the Remix’ed path</a>: Vulnerability discovered affecting both React Router and Remix, a flaw for a potential DoS attack through cache poisoning.</p>
</li>
<li><p>📜 <a target="_blank" href="https://overreacted.io/react-for-two-computers/">React for Two Computers</a>: Dan Abramov expands on his React Conf talk with fresh insights to help you build a solid mental model of React Server Components and their origins.</p>
</li>
<li><p>📜 <a target="_blank" href="https://largeapps.dev/case-studies/advanced/">Advanced React in the Wild</a>: A great case study outlining 5 companies that have significantly improved the performance metrics of their React &amp; Next.js sites and how they did it.</p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.swmansion.com/react-live-streaming-how-to-include-video-mixing-in-your-app-c460e09da7a8">React &amp; live streaming: How to include video mixing in your app</a>. A short tutorial explaining how to mix live video with React syntax and stream the output directly from the browser.</p>
</li>
<li><p>📜 <a target="_blank" href="https://documenso.com/blog/why-we-moved-off-next-js">Why We Moved off Next.js</a>: Quick feedback from the Documenso project, moving from Next.js App Router to Vite and React Router.</p>
</li>
<li><p>📜 <a target="_blank" href="https://cekrem.github.io/posts/react-memo-when-it-helps-when-it-hurts">React.memo Demystified: When It Helps and When It Hurts</a>: A concise explanation of common misconceptions and hidden pitfalls of memoization.</p>
</li>
<li><p>📜 <a target="_blank" href="https://cekrem.github.io/posts/react-reconciliation-deep-dive/">React Reconciliation: The Hidden Engine Behind Your Components</a>: Practical guidelines and clean architecture tips to ensure best performance with React reconciler</p>
</li>
<li><p>📜 <a target="_blank" href="https://gabrielpichot.fr/blog/why-you-need-a-custom-context-provider/">Why you need a custom context provider</a>: A nice interactive article that shows creating a custom Context Provider wrapper component can reduce un-necessary re-renders.</p>
</li>
<li><p>💸 <a target="_blank" href="https://go.clerk.com/pkKoKSg">Supabase breaks the norms of traditional software architecture. Learn how.</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v750">React Router 7.5 – new <code>route.lazy</code> API</a>: Allows for more granular lazy loading.</p>
</li>
<li><p>📦 <a target="_blank" href="https://blog.cloudflare.com/introducing-the-cloudflare-vite-plugin/">Cloudflare Vite Plugin 1.0</a>: Brings official support for React Router v7. Leverages Vite v6 Environment API so that your local dev server matches the production Cloudflare Workers runtime.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/fastify/fastify-vite/releases/tag/react-v1.0.0">Fastify React 1.0</a>: This new package might help you assemble your custom React meta-framework based on the Fastify web server and Vite (creating your own “Mini Next.js”). It supports React 19, and RSCs will come later. See also the related launch post (<a target="_blank" href="https://hire.jonasgalvez.com.br/2025/apr/8/react-server-confusion/">React Server Confusion</a>) which also gives a good overview of the state of RSC support outside Webpack.</p>
</li>
<li><p>📦 <a target="_blank" href="https://www.apollographql.com/blog/apollo-client-integration-nextjs-officially-released">Apollo Client Next.js integration</a>: The experimental GraphQL client integration package is now officially stable, including a new implementation for <code>PreloadQuery</code> to help you avoid request waterfalls. Apollo Client v4 is now in alpha, and integration packages for React Router / TanStack Start being worked on.</p>
</li>
<li><p>📦 <a target="_blank" href="https://waku.gg/blog/api-routes">Waku 0.22 – Announcing API routes</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://astro.build/blog/astro-560/">Astro 5.6 – Global <code>astro:env</code> and experimental sessions on Cloudflare, experimental cookie-less sessions</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://hydrogen.shopify.dev/update/march-2025">Hydrogen – March 2025 release – Support for Vite 6, turn on Remix <code>v3_routeConfig</code> flag 6</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=lIUp8bdKiq4">Theo – A breakdown of style solutions for 2025</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=WSM2MpJIwFg">Youssef Benlemlih – The Magic Of Compound Components in React</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://appzung.com/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=this_week_in_react_250409"><img src="https://thisweekinreact.com/emails/issues/229/AppZ.jpg" alt="AppZung: the enterprise-ready CodePush alternative" /></a></p>
<p><a target="_blank" href="https://appzung.com/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=this_week_in_react_250409"><strong>AppZung: the enterprise-ready CodePush alternative</strong></a></p>
<p>With Microsoft AppCenter shutdown, choose the reliable and robust alternative that doesn't compromise on security, privacy or performance.</p>
<p>AppZung CodePush delivers:</p>
<ul>
<li><p>✅ Seamless transition: One-command migration from AppCenter</p>
</li>
<li><p>✅ Enterprise-grade security: Code signing, SAML SSO, IP allowlisting and more</p>
</li>
<li><p>✅ Performance at scale: High-availability architecture with fast global CDN</p>
</li>
<li><p>✅ Privacy-first approach: EU-based infrastructure with built-in GDPR compliance features</p>
</li>
<li><p>✅ Dedicated support: Priority handling and satisfied customers</p>
</li>
</ul>
<p>Our platform is built by developers managing high-traffic applications who understand what's at stake when pushing critical updates.</p>
<p><a target="_blank" href="https://appzung.com/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=this_week_in_react_250409">Start deploying</a> with AppZung today!</p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<p><a target="_blank" href="https://reactnative.dev/blog/2025/04/08/react-native-0.79"><img src="https://thisweekinreact.com/emails/issues/229/react-native-0.79.png" alt="React Native 0.79" /></a></p>
<p><a target="_blank" href="https://reactnative.dev/blog/2025/04/08/react-native-0.79"><strong>React Native 0.79 – Faster tooling and much more</strong></a></p>
<p>Recently, the React Native core team switched to more frequent release cycles, so this is a smaller release, but nonetheless exciting in terms of performance improvements. Here are the highlights:</p>
<ul>
<li><p>Metro: 3x faster cold startup and package exports support</p>
</li>
<li><p>JavaScriptCore (JSC) moving to a Community Package</p>
</li>
<li><p>iOS: Swift-Compatible Native Modules registration</p>
</li>
<li><p>Android: Faster app startup thanks to skipping the JS bundle compression</p>
</li>
<li><p>Removal of Remote JS Debugging</p>
</li>
</ul>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://ide.swmansion.com/?utm_source=thisweekinreact.com">Radon IDE – More than 20,000 engineers have already chosen it for a smoother, all-in-one development experience. It's your turn.</a></p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/expo/expo/pull/35866#issuecomment-2789891297">Expo – React 19.1 <code>captureOwnerStack</code> will enable improved error messages</a></p>
</li>
<li><p>💬 <a target="_blank" href="https://github.com/huntie/react-native-discussions-and-proposals/blob/proposal-deprecate-subpath-imports/proposals/0894-deprecate-subpath-imports.md">React Native RFC – Removing deep imports from react-native</a>: This change allows to define what functions are exported from packages shrinking the API surface area. The goal is to provide a more stable API throughout the ecosystem.</p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/benawad/status/1908860185113665889">Ben Awad – describes his journey to reduce Application Not Responding (ANR) errors on Android</a></p>
</li>
<li><p>☂️ <a target="_blank" href="https://github.com/facebook/react-native/issues/50513">Help React Native core team Kotlin-ify React Native tests</a>: Great way to start contributing to an open source project.</p>
</li>
<li><p>📅 <a target="_blank" href="https://guild.host/events/react-native-london-e0q1f1">React Native London Meetup – April 17th, 2025</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/understanding-and-comparing-fingerprints-in-expo-apps">Understanding and comparing fingerprints in Expo apps</a>: Using hashes to compare whether there was a change in a native build of a React Native &amp; Expo app.</p>
</li>
<li><p>📜 <a target="_blank" href="https://shift.infinite.red/cut-ci-from-20-minutes-to-6-with-eas-workflows-and-eas-updates-8d928fe5dcfc">Cut CI from 20 minutes to 6 with EAS Workflows and EAS Updates</a>: Infinite Red shows how they improved their CI time by fingerprinting native builds.</p>
</li>
<li><p>📜 <a target="_blank" href="https://addjam.com/blog/2025-04-04/playing-audio-in-react-native/">Playing Audio in React Native with react-native-track-player</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.thisdot.co/blog/vercel-and-react-native-a-new-era-of-mobile-development">Vercel &amp; React Native – A New Era of Mobile Development?</a>: Speculation on what steps Vercel might take in the React Native space.</p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.sentry.io/a-guide-to-logging-in-react-native/">A Guide to Logging in React Native</a>: Including console, native and system logs.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/callstack/react-native-builder-bob/releases/tag/react-native-builder-bob%400.40.0">Builder Bob 0.40</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=acj7-3-EQWM">Simon Grimm – The ultimate way to build apps in 2025</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=HmbBzw0rF6w">Catalin Miron – Expo Router: Tabs, Stacks, Deep Linking Fix</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://infinite.red/react-native-radio/rnr-327-automating-app-releases-with-pratul-kalia">React Native Radio 327 – Automating App Releases with Pratul Kalia</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>👀 <a target="_blank" href="https://github.com/tc39/agendas/blob/main/2025/04.md">Agenda for the 107th meeting of Ecma TC39</a>: Next week the TC39 committee meets again to discuss many new exciting proposals, including Enums, Composites, <code>export defer</code>, and more.</p>
</li>
<li><p>📜 <a target="_blank" href="https://bun.sh/blog/debugging-memory-leaks">Debugging JavaScript Memory Leaks</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://ishadeed.com/article/modern-attr/">First Look at The Modern CSS <code>attr()</code></a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.deepintodev.com/blog/how-data-travels-the-world-to-reach-your-screen">A Deep Dive into OSI, TCP/UDP, HTTP, and More</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://tailwindcss.com/blog/tailwindcss-v4-1">Tailwind CSS 4.1 – Text shadows, masks, and tons more</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://x.com/rspack_dev/status/1907336863096123484">Rspack 1.3.1 – Run JS loaders in parallel</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://turbo.build/blog/turbo-2-5">Turborepo 2.5</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/web-infra-dev/rstest">Rstest – The testing framework powered by Rspack (WIP)</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://bun.sh/blog/bun-v1.2.9">Bun 1.2.9 – Redis client, Node.js compatibility, <code>require</code> improvements</a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://x.com/thekitze/status/1907508349442339078"><img src="https://thisweekinreact.com/emails/issues/229/meme1.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/sebastienlorber/status/1909916465190383982"><img src="https://thisweekinreact.com/emails/issues/229/meme2.jpg" alt="alt" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #228: React 19.1, Next.js deployment, React-Email, Triplex, Tinybase, Rspack, i18n-check, React-Admin | 0.79 Golden RC...]]></title><description><![CDATA[Hey everyone!
Cyril and Matthieu here from Theodo Apps 👋 with your weekly dose of React and React Native updates, while Seb is busy enjoying the React Native Connection conf!
React 19.1 just dropped with better error handling and deeper integration ...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-228-react-191-nextjs-deployment-react-email-triplex-tinybase-rspack-i18n-check-react-admin-079-golden-rc</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-228-react-191-nextjs-deployment-react-email-triplex-tinybase-rspack-i18n-check-react-admin-079-golden-rc</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 04 Apr 2025 12:43:27 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1743770538222/b80bab0a-6aee-4bf9-9963-ad9eb54bdd8f.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hey everyone!</p>
<p>Cyril and Matthieu here from <a target="_blank" href="https://apps.theodo.com/">Theodo Apps</a> 👋 with your weekly dose of React and React Native updates, while Seb is busy enjoying the <a target="_blank" href="https://reactnativeconnection.io/">React Native Connection</a> conf!</p>
<p>React 19.1 just dropped with better error handling and deeper integration for Server Components in Parcel. Meanwhile, Tailwind CSS 4.1 is right around the corner, and the community is buzzing with hot takes on CSS-in-JS. On the React Native side, the golden RC for 0.79 is out, and ExecuTorch v0.4.0 is landing soon with exciting AI features.</p>
<p>Let’s get into it! 🚀</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://bit.cloud/?utm_source=ThisWeekInReact&amp;utm_id=551"><img src="https://thisweekinreact.com/emails/issues/228/bit.jpg" alt="Bit: Celebrating 10 Years of Composability" /></a></p>
<p><a target="_blank" href="https://bit.cloud/?utm_source=ThisWeekInReact&amp;utm_id=551"><strong>Bit: Celebrating 10 Years of Composability</strong></a></p>
<p>For a decade, we navigated the complexities of disconnected systems, facing integration headaches and scaling challenges. Our journey to build effectively at scale led us to a breakthrough: <a target="_blank" href="https://bit.dev/blog/meet-harmony-a-practical-solution-for-composability/"><strong>Harmony</strong></a>.</p>
<p>Discover our 10-year story of pioneering composable architecture and how Harmony finally delivered the monolithic simplicity and distributed power we always envisioned, transforming our development from struggle to exponential progress.</p>
<p><a target="_blank" href="https://bit.dev/blog/telling-the-bit-story-celebrating-10-years-of-composability/?utm_source=ThisWeekInReact&amp;utm_id=9&amp;utm_medium=newsletter"><strong>Read our story</strong></a></p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<p><a target="_blank" href="https://github.com/facebook/react/releases/tag/v19.1.0"><img src="https://thisweekinreact.com/emails/issues/228/react_19_1.jpg" alt="React 19.1" /></a></p>
<p><a target="_blank" href="https://github.com/facebook/react/releases/tag/v19.1.0"><strong>React 19.1</strong></a></p>
<p>React 19.1 has been released this week, the most notable changes are:</p>
<ul>
<li><p>A new <a target="_blank" href="https://react.dev/reference/react/captureOwnerStack"><code>captureOwnerStack()</code></a> API that will be used by frameworks to provide better error information in dev. It’s different from the existing component stacks in how it handles <code>children</code> and DOM nodes.</p>
</li>
<li><p>The “React side” of Server Components support in Parcel, that works hand-in-hand with the new features in Parcel 2.14.</p>
</li>
<li><p>An experimental <code>unstable_prerender()</code> for prerendering React Server Components on the server.</p>
</li>
</ul>
<p>This release also includes a slew of minor changes and fixes, most of them related to Server Components or <code>Suspense</code> boundaries.</p>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://strapi.link/twir">Strapi - Open-source headless Content Management, now with generous PaaS hosting, fully managed yet flexible and customizable.</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://fullystacked.net/css-in-js-still-a-thing/">Is CSS-in-JS still a thing?</a> It’s not trendy anymore (at least not without a compiler to avoid the performance penalty) but it’s still widely used.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.netlify.com/blog/how-we-run-nextjs/">Next.js Deployment Challenges: Why platforms need better open source collaboration</a>: Netlify explains why Next.js is complicated to deploy outside of Vercel (no adapter support, missing documentation, lack of visibility…) and what they would like to change.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.smashingmagazine.com/2025/03/adaptive-video-streaming-dashjs-react/">Adaptive Video Streaming With Dash.js In React</a>: You probably won’t be building something like this every day, but it turns out adaptive streaming is not that complicated thanks to the DASH standard</p>
</li>
<li><p>📜 <a target="_blank" href="https://lingual.dev/blog/i18n-check-end-to-end-react-i18n-testing/">i18n-check: End to end React i18n testing</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.thisdot.co/blog/keeping-costs-in-check-when-hosting-next-js-on-vercel">Keeping Costs in Check When Hosting Next.js on Vercel</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://reacttraining.com/blog/react-architecture-spa-ssr-rsc">React Architecture Tradeoffs: SPA, SSR, or RSC</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://reacttraining.com/blog/problems-you-face-with-spas">Understanding SPAs and their shortcomings</a></p>
</li>
<li><p>💸 <a target="_blank" href="https://omlet.dev/?utm_campaign=partner_this-week-in-react_newsletter-quick-link-mar-2025">VS Code extension: Get React component usage insights in VS Code</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://resend.com/blog/react-email-4">React Email 4.0</a>: adds useful tools (a linter, spam score, a compatibility checker) and a few components</p>
</li>
<li><p>📦 <a target="_blank" href="https://triplex.dev/blog/triplex-for-vscode">Triplex beta</a>: A VS Code extension to develop React apps visually. It was initially built for React Three Fiber but now supports any React component</p>
</li>
<li><p>📦 <a target="_blank" href="https://rspack.dev/blog/announcing-1-3">Rspack 1.3</a>: can be used to build React Router v7 apps</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/tinyplex/tinybase/releases/tag/v6.0.0">Tinybase 6.0</a>: compatible with React 19</p>
</li>
<li><p>📦 <a target="_blank" href="https://vike.dev/blog/vike-server">vike-server 1.0</a>: simplifies running and deploying the server side of vite-built apps anywhere, and handles HMR in dev.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/marmelab/react-admin/releases/tag/v5.7.0">React-Admin 5.7</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://front-end-fire.com/episodes/87/">Front-End Fire: Next.js’s Security Vulnerability, Remix Walks Away from RSCs, and Rsdoctor 1.0</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://creators.spotify.com/pod/show/reactiflux/episodes/TMiR-2025-03-Next-had-an-auth-vulnerability--TypeScript-is-porting-to-Golang-e30tvf5/a-abs3i7h">This Month in React 2025-03: Next had an auth vulnerability, TypeScript is porting to Golang</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://semaphor.cloud"><img src="https://thisweekinreact.com/emails/issues/228/semaphor.jpg" alt="Ship dashboards in minutes — not sprints" /></a></p>
<p><a target="_blank" href="https://semaphor.cloud"><strong>Ship dashboards in minutes — not sprints</strong></a></p>
<p>Sempahor is a React based SDK to launch fully-interactive dashboards in your customer-facing products.</p>
<p>Semaphor helps you decouple analytics from your product code, so you can iterate quickly, and ship new insights independently — without needing to redeploy your app.</p>
<p>The CPO of TalentsConnect sums it up best:</p>
<p>"Semaphor has transformed our product and data team's workflow. They can now more quickly prototype and test new use cases directly in our application with our clients, significantly reducing feedback cycle time. Plus, Semaphor's styling options are outstanding, fitting seamlessly with our product's design"</p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<p>It’s been a quiet week in the React Native community—perhaps because all eyes are on the React Native Connection happening right now in Paris. Hopefully, we’ll have plenty of exciting topics to dive into next week 🤗</p>
<ul>
<li><p>💸 <a target="_blank" href="https://ide.swmansion.com/?utm_source=thisweekinreact.com">Radon IDE – All-in-one tool for React Native &amp; Expo development. Now with Network Inspector and Outline Renders!</a></p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/S0LARIN/status/1905829104600875025">Nice animated SplashScreen using Expo SplashScreen and RN Masked View.</a></p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/swmansion/status/1907086132828934414">React Native ExecuTorch 0.4 is announced for end of May</a>: with Universal LLM Runner, Additional LLMs support, Embedding models, Multilingual Whisper, OCR, Image segmentation…</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/facebook/react-native/releases/tag/v0.79.0-rc.4">React Native 0.79 Golden RC</a>: We should have a stable release next week.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/lynx-family/lynx/discussions/1#discussioncomment-12660488">Lynx is exploring solutions for native plugin development</a></p>
</li>
<li><p>🗓️ <a target="_blank" href="https://appjs.co/?utm_source=thisweekinreact">App.js Conf</a> - 🇵🇱 Kraków - 28-30 May. We're thrilled to announce the first speakers for App.js Conf 2025: Charlie Cheever, Enzo Manuel Mangano &amp; Delphine Bugner! Grab your ticket now with a 15% discount using the code "TWIR".</p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/changelog/xcode-16-3-patches">SDK 52 patches for Xcode 16.3</a>: If you encountered build issues when upgrading to Xcode 16.3, you may have to install the latest SDK 52 patch and RN0.77. Or move back to Xcode 16.2 🫠</p>
</li>
<li><p>📜 <a target="_blank" href="https://shift.infinite.red/react-native-10-years-db9eb36c5af6">React Native: 10 years</a>: Infinite Red celebrates the birthday.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-screens/releases/tag/4.10.0">React Native Screens 4.10</a>: iOS min supported version bumped to v15.1, experimental support for scrollview header when using formsheet, many android bug fixes.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/jpudysz/react-native-unistyles/releases/tag/v3.0.0-rc.1">Unistyles 3.0 RC.1</a>: This has just been announced at React Native Connection conference, the library entered RC. Apart from the nice styling features, this version is quite exciting because it handles many things on the "Shadow Tree" of React Native using C++, allowing you to implement dynamic styles that do not need React to re-render components on the JS side when dependencies such as theme, signal, screen size/orientation and other dependencies change. This reminds how CSS works on the web: we don't need a React re-render when we cross a breakpoint.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/microsoft/react-native-macos/releases/tag/v0.78.0">React Native MacOS 0.78</a>: The library caught up. We also heard it now supports Skia and WebGPU.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/callstack/react-native-builder-bob/releases/tag/react-native-builder-bob%400.39.0">React Native Builder Bob 0.39 - Upgrades to ESLint v9</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-gesture-handler/releases/tag/2.25.0">React Native Gesture Handler 2.25</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=wUsFNlas620">William Candillon - The Shader's Gambit</a>: Don’t expect much talking in this video, but it shows how far you can go with react-native-skia.</p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=ucZx1ArrIVQ">Theo - Android just changed forever</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://infinite.red/react-native-radio/rnr-326-react-native-turns-10">RNR 326 - React Native Turns 10 🎉</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>👀 <a target="_blank" href="https://github.com/microsoft/TypeScript/pull/61505">PR on TypeScript by the ArkType maintainer</a>: A huge perf boost may be coming for codebases that use lots of “schemas” with eg Zod or ArkType.</p>
</li>
<li><p>📜 <a target="_blank" href="https://webkit.org/blog/16574/webkit-features-in-safari-18-4/">WebKit Features in Safari 18.4</a>: Ships various things including 3 TC39 proposals. Iterator Helpers is now available in all browsers and Node.js!</p>
</li>
<li><p>📜 <a target="_blank" href="https://blogs.igalia.com/compilers/2025/03/27/summary-of-the-february-2025-tc39-plenary/">Summary of the February 2025 TC39 plenary</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://claritydev.net/blog/faster-string-sorting-intl-collator">Faster String Sorting with Intl.Collator</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://macarthur.me/posts/forbidden-request-headers/">Forbidden Request Headers</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.nodejs-security.com/blog/nodejs-api-security-vulnerabilities-path-traversal-files-bucket-server/">Node.js API Security Vulnerabilities with Path Traversal in files-bucket-server</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/vitest-dev/vitest/releases/tag/v3.1.0">Vitest 3.1</a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://x.com/aidenybai/status/1904294570533572817"><img src="https://thisweekinreact.com/emails/issues/228/next_burn.jpg" alt="alt" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #227 :  Next.js, tRPC, React Query, React Router, StyledComponents, MUI, Base UI, Next Intl | React Native birthday, Lynx, EAS...]]></title><description><![CDATA[Hi everyone!
This week, you probably didn't miss the Next.js middleware drama, but that wasn't the only thing going on!
We also got many great releases such as tRPC, React Query, Rsdoctor and more!
Also, React Native is 10 years old today! 🥳

💡 Sub...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-227-nextjs-trpc-react-query-react-router-styledcomponents-mui-base-ui-next-intl-react-native-birthday-lynx-eas</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-227-nextjs-trpc-react-query-react-router-styledcomponents-mui-base-ui-next-intl-react-native-birthday-lynx-eas</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 28 Mar 2025 14:09:42 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1743170954173/8659d620-08ea-4026-a3cf-01a7289bf159.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>This week, you probably didn't miss the Next.js middleware drama, but that wasn't the only thing going on!</p>
<p>We also got many great releases such as tRPC, React Query, Rsdoctor and more!</p>
<p>Also, React Native is 10 years old today! 🥳</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://convex.link/thisweekai"><img src="https://thisweekinreact.com/emails/issues/227/convex.jpg" alt="Convex: The Database Designed for AI Coding" /></a></p>
<p><a target="_blank" href="https://convex.link/thisweekai"><strong>Convex: The Database Designed for AI Coding</strong></a></p>
<p>In the age of code generation, you need a backend that you can confidently generate with AI platforms. Convex is by far and away <a target="_blank" href="https://stack.convex.dev/introducing-fullstack-bench">best in class</a> in this respect.</p>
<p>This is because Convex is just TypeScript, allowing you to write <a target="_blank" href="https://docs.convex.dev/functions/query-functions/">queries as code</a> that are automatically transactional, cached, and realtime.</p>
<p>And that’s just the beginning. With Convex, you can:</p>
<ul>
<li><p>Easily schedule functions and write cron jobs</p>
</li>
<li><p>Set up file storage</p>
</li>
<li><p>Write efficient server functions</p>
</li>
<li><p>And so much more…</p>
</li>
</ul>
<p><a target="_blank" href="https://docs.convex.dev/quickstarts">Try a Quickstart today</a></p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<p><a target="_blank" href="https://vercel.com/blog/postmortem-on-next-js-middleware-bypass"><img src="https://thisweekinreact.com/emails/issues/227/middleware.png" alt="Postmortem on Next.js Middleware bypass" /></a></p>
<p><a target="_blank" href="https://vercel.com/blog/postmortem-on-next-js-middleware-bypass"><strong>Postmortem on Next.js Middleware bypass</strong></a></p>
<p>A few days ago, Vercel announced a critical 9.1 vulnerability in Next.js middleware system. With a simple but malicious <code>x-middleware-subrequest</code> header, you can bypass the middleware, possibly exposing sensitive information. Patches are available for Next.js 12/13/14/15. Note that this vulnerability only affects self-hosted apps using <code>output: ‘standalone’</code> and <code>next start</code> are affected. Customers of major serverless cloud providers are either not affected (Vercel, Netlify), or protection can be turned on (Cloudflare).</p>
<p>It's worth noting that even though Next.js middleware shouldn’t have this vulnerability, it is <a target="_blank" href="https://nextjs.org/docs/pages/building-your-application/authentication#optimistic-checks-with-middleware-optional">not the recommended place to manage user sessions and protect routes</a>, and shouldn’t be the only line of defense in your Next.js app. The middleware is more designed to perform lightweight optimistic checks, eventually rewriting/redirecting without hitting any DB.</p>
<p>This security event has caused a lot of drama in the ecosystem, which I'd rather not comment on much. Vercel could have handled the situation better, and they plan to do better in the future. I’ll let you make your own opinion based on various resources, and there’s too many, so this is just a subset:</p>
<ul>
<li><p>📜 <a target="_blank" href="https://zhero-web-sec.github.io/research-and-things/nextjs-and-the-corrupt-middleware">Next.js and the corrupt middleware: the authorizing artifact</a>: The original article from the security researchers who found the vulnerability.</p>
</li>
<li><p>📜 <a target="_blank" href="https://nextjs.org/blog/security-nextjs-server-components-actions">How to Think About Security in Next.js</a>: Older post but still a relevant read today.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.robinwieruch.de/next-authorization/">Authorization in Next.js</a>: Robin explains how he approaches authorization in Next.js projects, as close to the sensitive data as possible.</p>
</li>
<li><p>📜 <a target="_blank" href="https://eduardoboucas.com/posts/2025-03-25-you-should-know-this-before-choosing-nextjs/">You should know this before choosing Next.js</a>: The perspective from Netlify’s Principal Engineer.</p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/live/UbcrphhSAIs?si=QgihLKnhpyE3RxPO&amp;t=8243">Theo - Next.js security exploit</a>: A 1h stream that on this topic, also explaining what Vercel did wrong.</p>
</li>
</ul>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://dub.link/twir-mar26">Product for Engineers - Don't make these feature flag mistakes</a></p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/vercel/next.js/pull/77300">Next.js PR - <code>useLinkStatus()</code></a>: New hook to provide pending feedback during navigation transitions.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/vercel/next.js/pull/77209">Next.js PR - Link <code>onNavigate</code> prop</a></p>
</li>
<li><p>📣 <a target="_blank" href="https://opencollective.com/styled-components/updates/thank-you">Styled Components - Thank you</a>: The popular old-gen CSS-in-JS library is now in maintenance mode and not recommended for new projects.</p>
</li>
<li><p>🗓 <a target="_blank" href="https://reactsummit.com/?utm_source=Newsletter&amp;utm_medium=thisweekinreact">React-Summit</a> - 🇳🇱 Amsterdam - 13 &amp; 17 June. Creators of React Query (Tanner Linsley), Expo Router (Evan Bacon), Million.js (Aiden Bai) &amp; more will share knowledge at React Summit! Use promo code TWIR for 10% off tickets.</p>
</li>
<li><p>📜 <a target="_blank" href="https://frontendatscale.com/issues/43">Experimenting with React View Transitions</a>: Explains what View Transitions are and how React’s experimental <code>&lt;ViewComponent&gt;</code> API integrates this web feature. React starts view transitions automatically when using concurrent features, applies transition names automatically at the right time, and exposes convenient lifecycle props.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.bbss.dev/posts/sparkling-hooks/">Components Are Just Sparkling Hooks</a>: Shows how a component can be transformed into a hook, how the 2 are related, and introduces the concept of hook-based headless components as a flexible primitive.</p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.carlosn.com.br/post/writing-static-websites-with-vite-and-react/">Writing static websites with Vite and React</a>: Carlos created a Vite plugin to implement a simple React-based static site generator, using React only as a server-side templating system.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.kylegill.com/essays/next-vs-tanstack/">Next.js vs TanStack</a>: Kyle is done with Next.js complexity and thinks TanStack Start is the right abstraction.</p>
</li>
<li><p>📜 <a target="_blank" href="https://frontguys.fr/front-end/typescript-react-native-attributes/">Passing TypeScript react components native HTML attributes</a>: Shows how to wrap a native input while keeping the ability to pass any native input prop.</p>
</li>
<li><p>📜 <a target="_blank" href="https://storybook.js.org/blog/preview-the-new-accessibility-addon/">Storybook 9 sneak peek: Accessibility Addon refresh</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.robinwieruch.de/react-trends/">React Trends in 2025</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.premieroctet.com/blog/en/how-does-the-use-api-work-with-next-15-and-react-19">How does the use API work with Next 15 and React 19?</a></p>
</li>
<li><p>💸 <a target="_blank" href="https://omlet.dev/?utm_campaign=partner_this-week-in-react_newsletter-quick-link-mar-2025">Omlet for VS Code: Get React component usage insights in VS Code</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://trpc.io/blog/announcing-trpc-v11">tRPC 11.0</a>: This release brings many new React-related features, including TanStack Query v5 support, the new more native React Query integration based on <code>queryOptions</code>, improved Next.js/RSC support, the ability to download/upload binaries, and more.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/TanStack/query/releases/tag/v5.69.0">React Query 5.69 - <code>streamedQuery</code></a>: React Query can now handle <code>AsyncIterable</code> types and receive chunks of data. It will be <code>pending</code> only while waiting for the first chunk. This looks particularly useful for building AI/LLM chats.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/rspack-contrib/rsbuild-plugin-react-router/releases/tag/rsbuild-plugin-react-router%400.0.1">Rsbuild Plugin React Router</a>: Now available on npm, you can use React Router in framework mode with another bundler than Vite. It works well with all the React Router CLI templates and the Epic Stack.</p>
</li>
<li><p>📦 <a target="_blank" href="https://mui.com/blog/material-ui-v7-is-here/">Material UI 7.0 - Improved ESM support, consitent slot pattern implementation, <code>enableCssLayer</code></a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/mui/base-ui/releases/tag/v1.0.0-alpha.7">Base UI 1.0.0-alpha.7</a>: Another great release from the promising Radix UI challenger.</p>
</li>
<li><p>📦 <a target="_blank" href="https://next-intl.dev/blog/next-intl-4-0">Next Intl 4.0 - Type-safe locales, ICU arguments, format and more</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/wojtekmaj/merge-refs">Merge Refs 2.0 - Merges React refs into one</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://marmelab.com/blog/2025/03/24/react-admin-march-2025-update.html">React-Admin 5.5 &amp; 5.6 - March 2025 Update</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://ionic.io/blog/announcing-ionic-8-5">Ionic 8.5 - React 19 support</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=-W3_dxNDHVw&amp;list=PL53Z0yyYnpWitP8Zv01TSEQmKLvuRh_Dj">React Paris 2025 Playlist</a>: I was at the conf last Friday, great talks already available online, and it was nice to meet some of you there 👋!</p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://go.clerk.com/ovPb3z0"><img src="https://thisweekinreact.com/emails/issues/227/clerk.jpg" alt="Meet @clerk/agent-toolkit" /></a></p>
<p><a target="_blank" href="https://go.clerk.com/ovPb3z0"><strong>Meet @clerk/agent-toolkit</strong></a></p>
<p>Clerk's new experimental package for using Clerk in your AI agent workflows. Manage users, orgs, and more with Vercel AI SDK + LangChain support. Try it now: <code>npm install @clerk/agent-toolkit</code></p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<p><img src="https://thisweekinreact.com/emails/issues/227/rn-10.jpg" alt="React Native turns 10" /></p>
<p><strong>React Native turns 10! 🎉🤯</strong></p>
<p>Believe it or not, React Native was <a target="_blank" href="https://engineering.fb.com/2015/03/26/android/react-native-bringing-modern-web-techniques-to-mobile/">open-sourced exactly 10 years ago</a>, and React Native is celebrating its first decade today!</p>
<p>A huge shoutout to everyone who made it happen! Let’s take the opportunity to listen again to <a target="_blank" href="https://youtu.be/_cBqGenDCks?si=nrfF4D_FGEJhQsH3&amp;t=1504">this podcast episode with Christopher Chedeau</a> (Vjeux, co-creator of React Native) where he explains the backstory of React Native, and how this great project could easily have died without ambitious people willing to bet on it.</p>
<p>Also a shoutout to the amazing React Native community—tight-knit, always pushing forward, tackling challenges, and building the future of native declarative UI together 🚀</p>
<p>To the next promising decade! 🥂</p>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://codemagic.io/migration-from-app-center/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=app_center_this_week_react">Codemagic - a great App Center alternative for React Native devs! 8x faster builds, CodePush, automated distribution. 1-month free trial!</a></p>
</li>
<li><p>👀 <a target="_blank" href="https://bacon.expo.app/blog/expo-apps">Who's using Expo OSS in 2025</a>: Evan just updated his list of 2,262 top apps using Expo or React Navigation.</p>
</li>
<li><p>👀 <a target="_blank" href="https://pluginpro.dev/">Plugin Pro</a>: Preview of upcoming CLI that records your native platform changes and then generates an Expo config plugin. This reminds how patch-package works.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/LegendApp/legend-photos">Legend Photos - Open source photo viewing app - Built with React Native macOS</a></p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/Baconbrix/status/1904548835143409948">Evan Bacon - “What if you could just build mobile apps—on the go—from a mobile app?”</a>: This idea is quite interesting. Instead of using AI to generate server-driven UI, why not generating whole screens locally?</p>
</li>
<li><p>📣 <a target="_blank" href="https://expo.dev/changelog/eas-build-workflows-m4-pro">EAS Build &amp; Workflows - Introducing M4 Pro - 1.85x faster iOS builds</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://lynxjs.org/blog/lynx-open-source-roadmap-2025.html">Lynx Roadmap 2025</a>: The React Native competitor plans to open source desktop support for Windows, macOS, and OpenHarmony. New capabilities, UI elements and improved tooling are coming.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.callstack.com/blog/knowing-your-apps-bundle-contents-native-performance">Why Knowing Your App’s Bundle Contents Matters for React Native Performance</a>: Explains how to use Expo Atlas, and a trick to make it work even when not using Expo!</p>
</li>
<li><p>📜 <a target="_blank" href="https://medium.com/@louis.lagrange/migrating-from-firebase-dynamic-links-a-practical-guide-9905bbb8f04d">Migrating from Firebase Dynamic Links: a practical guide</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://addjam.com/blog/2025-03-24/react-native-modals-2025-comprehensive-guide/">React Native Modals in 2025</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-reanimated/releases/tag/4.0.0-beta.3">Reanimated 4 beta.3 - CSS transitions shorthand, edge-to-edge, remove Old Arch code, depends on react-native-worklets</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/callstackincubator/react-native-bottom-tabs/releases">Bottom Tabs 0.9 - Add <code>freezeOnBlur</code>, remove <code>ignoresTopSafeArea</code> (now it’s automatic)</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-audio-api/releases/tag/0.5.0">Audio API 0.5 - RN 0.78, pitch correction, in-memory audio decoding</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/LovesWorking/tanstack-query-dev-tools-expo-plugin">Tanstack Query DevTools Expo Plugin</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/pioner92/react-native-auto-skeleton">React Native Auto Skeleton - Automatically generates skeleton based on your existing UI layout</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/iosazee/expo-passkey">Expo Passkey - A Better Auth plugin enabling secure, passwordless authentication</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/AppAndFlow/react-native-magic-scroll/releases/tag/v0.1.25">React Native Magic Scroll 0.1.25 - Manage keyboards and ScrollViews on long forms - New Arch, Expo 52 support</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://podcast.galaxies.dev/episodes/063-from-idea-to-app-using-replit-with-matt-palmer">Rocket Ship 63 - From Idea to App using Replit with Matt Palmer</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=qlm1q0ZQ0ko">Callstack Webinar - Using React Native in Existing Apps for Faster Cross-Platform Features</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>👀 <a target="_blank" href="https://github.com/nodejs/node/pull/57609">Node PR - v24.0 release</a>: New Node.js LTS is in RC and should be released on April 22. It upgrades V8 to 13.4, which should unlock new JS features such as <code>Promise.try</code>, <code>Intl.DurationFormat</code> and <code>Atomics.pause</code>.</p>
</li>
<li><p>📜 <a target="_blank" href="https://frontendmasters.com/blog/one-thing-scope-can-do-is-reduce-concerns-about-source-order/">One Thing @scope Can Do is Reduce Concerns About Source Order</a>: TIL that <code>@scope</code> introduces a new concept of “scope proximity” to the CSS cascade! It’s in Interop 2025 and should be in all browsers very soon.</p>
</li>
<li><p>📜 <a target="_blank" href="https://developer.chrome.com/blog/carousels-with-css">Chrome 135 - Carousels with CSS</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://developer.chrome.com/blog/a-customizable-select">Chrome 135 - The &lt;select&gt; element can now be customized with CSS</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.joshuakgoldberg.com/blog/hybrid-linters-the-best-of-both-worlds/">Hybrid Linters: The Best of Both Worlds</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://rsdoctor.dev/blog/release/release-note-1_0">Rsdoctor 1.0 - Build analyzer for webpack and Rspack</a>: A great tool I’m using on Docusaurus to find build time bottlenecks.</p>
</li>
<li><p>📦 <a target="_blank" href="https://biomejs.dev/blog/biome-v2-0-beta/">Biome 2.0 beta - Plugins, domains, multi-file analysis and more</a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p>This week we have 2 videos, you need to click 😂</p>
<p><a target="_blank" href="https://x.com/sebastienlorber/status/1904152606181658966"><img src="https://thisweekinreact.com/emails/issues/227/meme.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/flexbox_/status/1903547233032712635"><img src="https://thisweekinreact.com/emails/issues/227/meme2.jpg" alt="alt" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #226: Parcel, TanStack, Astro, React-Scan, React-Router | Worklets, Enterprise Framework, Perf, Expo UI, FlatList...]]></title><description><![CDATA[Hi everyone!
Cyril and Matthieu from Theodo Apps here 👋, with some big updates in React and React Native!
React Server Components are now supported in Parcel, making it a more viable bundler for modern apps. Callstack is working on a new React Nativ...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-226-parcel-tanstack-astro-react-scan-react-router-worklets-enterprise-framework-perf-expo-ui-flatlist</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-226-parcel-tanstack-astro-react-scan-react-router-worklets-enterprise-framework-perf-expo-ui-flatlist</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 21 Mar 2025 16:03:36 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1742572974475/90a4d58b-1a98-47e5-ab06-59dc671a7b0d.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>Cyril and Matthieu from Theodo Apps here 👋, with some big updates in React and React Native!</p>
<p>React Server Components are now supported in Parcel, making it a more viable bundler for modern apps. Callstack is working on a new React Native framework aimed at enterprise teams, promising better build caching. React Native Worklets is bringing real multithreading to React Native, finally decoupling it from animations. And React 19 migrations are picking up speed, with teams sharing insights on adapting to the changes.</p>
<p>Exciting times ahead—let’s dive in! 🚀</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://dub.link/twir-mar19"><img src="https://thisweekinreact.com/emails/issues/226/dub.jpg" alt="The first newsletter for product engineers" /></a></p>
<p><a target="_blank" href="https://dub.link/twir-mar19"><strong>The first newsletter for product engineers</strong></a></p>
<p><a target="_blank" href="https://dub.link/twir-mar19">Product for Engineers</a> is PostHog’s newsletter dedicated to helping engineers flex their product muscles.</p>
<p>With over 50k subscribers, it bridges the gap between product and engineering, helping you ship products users love.</p>
<p>It covers topics like why deadlines suck, non-obvious behaviors that will kill your startup, and mistakes they learned the hard way. Best of all, it’s totally free.</p>
<p><a target="_blank" href="https://dub.link/twir-mar19"><strong>Subscribe for free.</strong></a></p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<p><a target="_blank" href="https://parceljs.org/blog/v2-14-0/"><img src="https://thisweekinreact.com/emails/issues/226/parcel.jpg" alt="Parcel v2.14.0" /></a></p>
<p><a target="_blank" href="https://parceljs.org/blog/v2-14-0/"><strong>Parcel v2.14.0</strong></a></p>
<p>Parcel is an interesting thing: it’s a very robust and feature-complete bundler. While not used/supported by any major React framework, it doesn’t prevent it from moving forward, with v2.14.0 adding a few big features:</p>
<ul>
<li><p>Server Components with client, server, and static rendering</p>
</li>
<li><p>Integrated MDX support (using the rust lib <code>mdx-rs</code>)</p>
</li>
<li><p>A <code>create-parcel</code> CLI that can be a replacement for <code>create-react-app</code></p>
</li>
<li><p>A new React error overlay</p>
</li>
</ul>
<p>If you’re “building your own framework” or have a niche use case, all this makes parcel even more attractive.</p>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://convex.link/thisweekmcp">Convex launched an MCP Server</a></p>
</li>
<li><p>🐦 <a target="_blank" href="https://bsky.app/profile/tkdodo.eu/post/3lkiuj7362k2a">Support for streaming coming to React Query</a></p>
</li>
<li><p>🗓 <a target="_blank" href="https://conf.strapi.io/?utm_source=thisweekinreact">StrapiConf</a> - 🇫🇷 Paris - 13 May. Discover the full lineup : Shruti Kapoor, Quentin de Quelen, Sebastien Chopin! And get a 10% discount with code "TWIR”</p>
</li>
<li><p>🗓 <a target="_blank" href="https://futurefrontend.com/?utm_source=thisweekinreact">Future Frontend</a> - 🇫🇮 Espoo - 26-28 May. Web development/design and AI meet on a single track. Secure your spot today with a 10% discount using code "TWIR”</p>
</li>
<li><p>📣 <a target="_blank" href="https://tanstack.com/blog/netlify-partnership">TanStack + Netlify Partnership</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.openstatus.dev/blog/live-mode-infinite-query">Live Mode</a>: Live data updates in React with TanStack's Infinite Queries.</p>
</li>
<li><p>📜 <a target="_blank" href="https://mui.com/blog/react-19-update/">How we migrated MUI X to React 19</a>: They needed to maintain compatibility with React 18 even though there are a few breaking changes in React 19 (with refs and StrictMode).</p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.carlosn.com.br/post/writing-static-websites-with-vite-and-react/">Writing static websites with Vite and React</a>: The author describes how the experimental <code>vite-ssg-react</code> package he’s working on works, and what he plans for the future.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.developerway.com/posts/ssr-deep-dive-for-react-developers">SSR Deep Dive for React Developers</a>: Your framework probably handles SSR for you, but you’ll learn how to implement it yourself, and how it works along the way</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.felgus.dev/blog/common-react-lib-architecture#react-19">Common React libraries architecture</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.gensx.com/blog/why-react-is-the-best-backend-workflow-engine">Why React is surprisingly the best model for LLM workflows</a></p>
</li>
<li><p>💸 <a target="_blank" href="https://omlet.dev/?utm_campaign=partner_this-week-in-react_newsletter-quick-link-mar-2025">VS Code extension: Get React component usage insights in VS Code</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://astro.build/blog/astro-550/">Astro 5.5 - Type-safe sessions, better Mermaid diagrams integration</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/aidenybai/react-scan/releases/tag/v0.3.0">React Scan 0.3 - See the parents of rendered components</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/TanStack/form/releases/tag/v1.1.0">TanStack Form 1.1 - Form reset util</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v740">React Router 7.4</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=aezimBnSJqY">Theo - Tanner just fixed forms</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.epicweb.dev/tips/upgrading-react-router">Epic Web Dev - Upgrading React Router</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=nHnw3pusFXw">Web Dev Simplified - Next.js Finally Fixed Caching</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://www.meticulous.ai?utm_source=thisweekinreact&amp;utm_campaign=mar19th"><img src="https://thisweekinreact.com/emails/issues/217/meticulous.jpg" alt="Tests are dead - Meticulous is here" /></a></p>
<p><a target="_blank" href="https://www.meticulous.ai?utm_source=thisweekinreact&amp;utm_campaign=mar19th"><strong>Tests are dead - Meticulous is here</strong></a></p>
<p>Meticulous creates and maintains an exhaustive suite of e2e ui tests with <strong>zero</strong> developer effort.</p>
<p>Dropbox, Bilt Rewards, Lattice and hundreds of engineering organizations rely on Meticulous for their frontend testing.</p>
<p>This quote from the CTO of Traba sums the product up best: "Meticulous has fundamentally changed the way we approach frontend testing in our web applications, fully eliminating the need to write any frontend tests. The software gives us confidence that every change will be completely regression tested, allowing us to ship more quickly with significantly fewer bugs in our code."</p>
<p>This <a target="_blank" href="https://www.meticulous.ai/blog/lessons-from-a-decade?utm_source=thisweekinreact&amp;utm_campaign=jan15th">post</a> from our CTO, who formerly led a large engineering group at Palantir, sets out the context of why exhaustive testing can double engineering velocity.</p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<p><a target="_blank" href="https://github.com/software-mansion/react-native-reanimated/discussions/7264"><img src="https://thisweekinreact.com/emails/issues/226/worklets.jpg" alt="React Native Worklets RFC" /></a></p>
<p><a target="_blank" href="https://github.com/software-mansion/react-native-reanimated/discussions/7264"><strong>React Native Worklets RFC</strong></a></p>
<p>React Native Worklets is a new library extracted from Reanimated that enables true multithreading in React Native. It lets you run JavaScript code on multiple runtimes. A new memory model introduces <code>Serializables</code>, <code>Shareables</code>, and <code>Synchronizables</code> to handle data across runtimes.</p>
<p>By decoupling multithreading from animations, Reanimated becomes leaner, which is especially beneficial for web apps aiming for smaller bundle sizes. At the same time, developers can now use multithreading for non-UI tasks like async storage, database operations, real-time audio processing, or AI-powered computations — without depending on an animation library.</p>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://dub.link/twir-mar19-rn">PostHog - How to set up a React Native remote config (with Expo Router)</a></p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/_atlj/status/1901990291306873047">React Native in Native apps: strategies and blockers</a></p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/o_kwasniewski/status/1884537940736393426">React Native Bottom Tabs integrate seamlessly with other native UI elements</a></p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/aleqsio/status/1902034184920584538">expo/ui will launch with Expo SDK 53</a>: It will include fully native input components, iOS form sections, context menus and iOS previews.</p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/Baconbrix/status/1900547469374574966">React Server Functions in Expo Router</a></p>
</li>
<li><p>📊 <a target="_blank" href="https://www.revenuecat.com/state-of-subscription-apps-2025/">RevenueCat State of Subscription Apps 2025</a>: Cross-platform subscription apps (in particular React Native ones) have better performances in retention and monetization compared to native apps. The top-performing ones excel by optimizing onboarding, surfacing paywalls early, and leveraging hybrid monetization.</p>
</li>
<li><p>📖 <a target="_blank" href="https://www.callstack.com/ebook/the-ultimate-guide-to-react-native-optimization">Ultimate Guide to React Native Optimization 2025</a>: Callstack just published their upgraded guide.</p>
</li>
<li><p>📖 <a target="_blank" href="https://docs.expo.dev/guides/using-push-notifications-services/">Expo Documentation - Using push notifications</a>: Fresh reminder on what services are available to implement push notifications in an Expo app.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.callstack.com/blog/were-building-a-new-react-native-framework">We’re Building a New React Native Framework</a>: Michał from callstack unveiled features of their React Native framework targeting large mobile teams, emphasizing fast native build caching. It's still not open sourced yet.</p>
</li>
<li><p>📜 <a target="_blank" href="https://brainsandbeards.com/blog/2025-dont-rerender-new-flatlist-items/">FlatList Optimization: Avoid Re-Rendering When Adding or Removing Items</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://docs.expo.dev/versions/latest/sdk/background-task/">Expo BackgroundTask Beta</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/callstack/react-native-builder-bob/releases/tag/create-react-native-library%400.48.0">Create React Native Library 0.48: Add template for Nitro modules</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/nandorojo/galeria/releases/tag/v1.1.0">Galeria 1.1 - Fix new architecture issues, support for edge-to-edge</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://infinite.red/react-native-radio/rnr-325-legend-list-with-jay-meistrich">RNR 325 - Legend List with Jay Meistrich</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>👀 <a target="_blank" href="https://github.com/nodejs/TSC/pull/1697">Node.js TSC - Should Corepack stay in the Node.js distribution?</a>: Corepack will stop being distributed with Node.js starting v25.</p>
</li>
<li><p>📜 <a target="_blank" href="https://nodejs.org/en/blog/announcements/official-discord-launch-announcement">Node.js Launches Official Community Space on Discord</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://web.dev/blog/eslint-baseline-integration?hl=en">Support for CSS and Baseline has shipped in ESLint</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://oxc.rs/blog/2025-03-13-minifier-alpha">Oxc Minifier Alpha</a>: A new minifier that already outperform esbuild and is used with Rolldown, which aims to become the next default bundler for Vite.</p>
</li>
<li><p>📦 <a target="_blank" href="https://oxc.rs/blog/2025-03-15-oxlint-beta">Oxlint Beta</a>: It features over 500 built-in linting rules with significant performance boosts, allowing small to medium projects to fully replace ESLint. ESLint plugin &amp; custom rules support should come in the next major release.</p>
</li>
<li><p>📦 <a target="_blank" href="https://valibot.dev/blog/valibot-v1-the-1-kb-schema-library/">Valibot 1.0 - 1kB alternative to Zod</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://nodejs.org/en/blog/release/v23.10.0">Node.js 23.10 - New <code>--experimental-config-file</code></a></p>
</li>
<li><p>📦 <a target="_blank" href="https://nodejs.org/en/blog/release/v20.19.0">Node.js 20.19 - require(esm) enabled</a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://x.com/IroncladDev/status/1899870309152342367"><img src="https://thisweekinreact.com/emails/issues/226/ts-go.jpg" alt="Rewrite TS in Rust" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #225: React Router, React Aria, Ark, moveBefore(), Ark | JSC, Lynx, Metro, Reanimated, AI, Radon, Galeria, Zeego...]]></title><description><![CDATA[Hi everyone!
This week we have:

React: A good variety of articles, and great releases from React Router and React Aria.

React Native: Lots of cool things happening, and the community reacting to Lynx.

Other: TypeScript announcing an exciting port ...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-225-react-router-react-aria-ark-movebefore-ark-jsc-lynx-metro-reanimated-ai-radon-galeria-zeego</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-225-react-router-react-aria-ark-movebefore-ark-jsc-lynx-metro-reanimated-ai-radon-galeria-zeego</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 14 Mar 2025 13:41:50 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1741959638042/29a9d55e-6a37-4513-87ad-4cd1b22b3dd7.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>This week we have:</p>
<ul>
<li><p><strong>React</strong>: A good variety of articles, and great releases from React Router and React Aria.</p>
</li>
<li><p><strong>React Native</strong>: Lots of cool things happening, and the community reacting to Lynx.</p>
</li>
<li><p><strong>Other</strong>: TypeScript announcing an exciting port to Go.</p>
</li>
</ul>
<p>Check our partner conf 🗓 <a target="_blank" href="https://futurefrontend.com/?utm_source=thisweekinreact">Future Frontend</a> - 🇫🇮 Espoo - 26-28 May. A single track conference in Finland to give you a glimpse of the future!</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://www.coderabbit.ai?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=this_week_in_react_mar25"><img src="https://thisweekinreact.com/emails/issues/225/coderabbit.jpg" alt="Cut React Code Review Time &amp; Bugs in Half" /></a></p>
<p><a target="_blank" href="https://www.coderabbit.ai?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=this_week_in_react_mar25"><strong>Cut React Code Review Time &amp; Bugs in Half</strong></a></p>
<p>Code reviews are critical but time-consuming. CodeRabbit acts as your AI co-pilot, providing instant Code review comments and potential impacts of every pull request.</p>
<p>Beyond just flagging issues, CodeRabbit provides one-click fix suggestions and lets you define custom code quality rules using AST Grep patterns, catching subtle issues that traditional static analysis tools might miss.</p>
<p>CodeRabbit has so far reviewed more than 5 million PRs, installed on 1 million repositories, and used by 50 thousand Open-source projects. CodeRabbit is free for all open-source repo's. <a target="_blank" href="https://www.coderabbit.ai?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=this_week_in_react_mar25">Get started today!</a></p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<p><a target="_blank" href="https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v730"><img src="https://thisweekinreact.com/emails/issues/225/rr.jpg" alt="React Router 7.3 - Route Middleware" /></a></p>
<p><a target="_blank" href="https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v730"><strong>React Router 7.3 - Route Middleware</strong></a></p>
<p>This React Router release introduces a major new middleware feature. It’s not production-ready yet but you can turn it on with the <code>future.unstable_middleware</code> future flag. You can use it in framework or library mode. There’s a distinction between client and server middleware. You can use it to implement logging, authentication, and other cross-cutting concerns.</p>
<p>Additional related community resources:</p>
<ul>
<li><p>📜 <a target="_blank" href="https://sergiodxa.com/tutorials/use-middleware-in-react-router">Use middleware in React Router</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://sergiodxa.com/tutorials/test-middleware-in-react-router">Test Middleware in React Router</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://sergiodxa.com/tutorials/create-a-per-request-singleton-with-react-router-middleware">How to Create a Per-Request Singleton with React Router Middleware</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=H9WmtBchWtQ">Alem Tuzlak - React Router middleware is here!</a></p>
</li>
</ul>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://dub.link/twir-mar12">Product for Engineers - WTF is activation and why should engineers care?</a></p>
</li>
<li><p>👀 <a target="_blank" href="https://bsky.app/profile/did:plc:hxmev3uady7j4litwnr5fzbg/post/3lk6phwfik226">React <code>moveBefore()</code> + <code>&lt;ViewTransition&gt;</code> demo</a>: This exciting browser feature permits to move/reorder DOM nodes while preserving their state (useful for video players, iframes…). It has been recently added to the DOM Living Standard, is supported in Chrome 133, and has just been enabled in the React DOM reconciler (experimental release only for now). I made a demo to see it in action combined with the upcoming ViewTransition component.</p>
</li>
<li><p>🗓️ <a target="_blank" href="https://www.dotjs.io/?utm_source=thisweekinreact">dotJS 2025</a> - 🇫🇷 Paris - 03 April - 3 weeks left before dotJS! Chat 1:1 with top contributors who are rarely in Europe – Ryan Dahl, Wes Bos and more. Secure your spot now and get 15% off tickets with code "TWIR”.</p>
</li>
<li><p>🗓 <a target="_blank" href="https://conf.strapi.io/?utm_source=thisweekinreact">StrapiConf</a> - 🇫🇷 Paris - 13 May. Don't miss our keynote speaker reveal : Sébastien Chopin, Matt Kane, Haris Ali Khan ! Get a 10% discount with code "TWIR".</p>
</li>
<li><p>📜 <a target="_blank" href="https://remix.run/blog/split-route-modules">React Router - Split Route Modules</a>: Explains how a new future flag enables React Router 7.2 to split a route module into multiple parts to avoid network waterfalls.</p>
</li>
<li><p>📜 <a target="_blank" href="https://cekrem.github.io/posts/beyond-react-memo-smarter-performance-optimization/">Beyond React.memo: Smarter Ways to Optimize Performance</a>: Before reaching for memoization, try to restructure your app and embrace composition.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.robinwieruch.de/react-server-actions-toast-useactionstate/">Server Actions with Toast Feedback (useActionState)</a>: Exploring multiple ways to display a toast notification after a Server Action. I prefer this version, not relying on <code>useEffect</code>.</p>
</li>
<li><p>📜 <a target="_blank" href="https://programmingarehard.com/2025/03/11/react-router-error-reporting.html/">React Router error reporting from scratch</a>: A pretty cool article showing how to send React Router loader errors to an email address with a great DX, reading source maps and displaying original source code around the error for each stack frame. Lessons are applicable in other JS contexts.</p>
</li>
<li><p>📜 <a target="_blank" href="https://open.nytimes.com/how-the-new-york-times-systematically-migrated-from-enzyme-into-react-testing-library-b3ea538d001c">How The New York Times systematically migrated from Enzyme into React Testing Library</a>: Using an incremental migration strategy, starting with the simplest tests so that contributors have templates to get inspired from.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.aha.io/engineering/articles/rails-views-web-components-react">Rails views, web components, React. Why make a choice?</a>: Each technology has its sweet spot. They use React only for rich, stateful interactions.</p>
</li>
<li><p>📜 <a target="_blank" href="https://martijnhols.nl/blog/how-much-traffic-can-a-pre-rendered-nextjs-site-handle">How much traffic can a pre-rendered Next.js site really handle?</a>: Author load testing his self-hosted Next.js blog with pre-rendering and SSR to see how many requests per second it can handle.</p>
</li>
<li><p>💸 <a target="_blank" href="https://omlet.dev/?utm_campaign=partner_this-week-in-react_newsletter-quick-link-mar-2025">VS Code extension: Visualize how and where components (and their props) are used</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://react-spectrum.adobe.com/releases/2025-03-05.html">React Aria - March 5, 2025 Release - Toast, Tree, Virtualizer, Tailwind 4, improved Autocomplete, Command Palette, DatePicker RTL, fix <code>usePress</code>, and more</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://ark-ui.com/react/docs/overview/changelog#:~:text=.-,%5B5.0.0%5D%20%2D%202025%2D03%2D06">Ark UI 5.0 - Cross-framework headless UI library - Now faster and smaller</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=e8yY9ZgPozw">Jack Herrington - React/Solid-JS Module Federation on TanStack!</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://front-end-fire.com/episodes/84/">Front-end Fire 84 - TanStack Form v1, ByteDance Debuts Lynx, &amp; VS Code AI Levels Up</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://www.reactile.net/?utm_source=ThisweekinReact"><img src="https://thisweekinreact.com/emails/issues/216/reactile.jpg" alt="Rethink your React apps' UX with Reactile" /></a></p>
<p><a target="_blank" href="https://www.reactile.net/?utm_source=ThisweekinReact"><strong>Rethink your React apps' UX with Reactile</strong></a></p>
<p>Reactile is an UI/UX turnkey framework which features an out-of-the-box, intuitive tiling display with workspaces. It encourages parallel workloads for large web solutions within a single browser tab. Implement your own view containers, widgets and logic using React and let Reactile handle the display for you.</p>
<p>On top of that, Reactile also offers:</p>
<ul>
<li><p>A promise-based persistence mechanism which permits a uniform workflow across time and on multiple devices.</p>
</li>
<li><p>The possibility to use nested tabs for your tiles.</p>
</li>
<li><p>A simplified global search mechanism.</p>
</li>
<li><p>CSS @container based responsiveness.</p>
</li>
<li><p>And much more.</p>
</li>
</ul>
<p>Version 2 coming out soon. Get started with your unique 30-day free trial. Learn more about it on <a target="_blank" href="http://reactile.net">reactile.net</a>.</p>
<p><a target="_blank" href="https://www.reactile.net/price?utm_source=ThisweekinReact">Reactile - The new React UI management system</a></p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<ul>
<li><p>💸 <a target="_blank" href="https://go.clerk.com/I4o9cHy">Introducing native Passkeys support for Expo - Unlock one of the fastest growing auth strategies for your next project</a></p>
</li>
<li><p>🧵 <a target="_blank" href="https://threadreaderapp.com/thread/1898114457634500692.html">Callstack’s Lynx Deep Dive - The takeaways from a 3h livestream</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.swmansion.com/how-react-native-reanimated-updates-the-styles-a-deep-dive-338ab22e9f21">How React Native Reanimated Updates the Styles</a>: A deep dive explaining how UI and native props are handled differently</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.callstack.com/blog/local-llms-on-mobile-are-a-gimmick">Local LLMs on Mobile Are a Gimmick—For Now</a>: An overview of the challenges running AI models on-device, such as model size/format, CPU/battery consumption, and quality/speed tradeoffs.</p>
</li>
<li><p>📜 <a target="_blank" href="https://shift.infinite.red/transitive-dependencies-and-react-native-autolinking-d4d4b7a651cf">Transitive Dependencies and React Native Autolinking</a>: Transitive dependencies are not auto-linked for good reasons, and you need to declare them explicitly as <code>peerDependencies</code>.</p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/how-to-build-a-solid-test-harness-for-expo-apps">How to build a solid test harness for Expo apps</a>: Helps you adopt the right mindset to test your RN apps.</p>
</li>
<li><p>📜 <a target="_blank" href="https://shift.infinite.red/react-native-vs-lynx-js-b1fffb0f0152">React Native vs Lynx JS</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://dev.to/amazonappdev/an-android-developers-guide-to-react-native-j66">An Android Developer's Guide to React Native</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/react-native-community/javascriptcore">React Native JavaScriptCore</a>: The Hermes runtime is widely used now, and the React Native team is extracting the JSC engine to a separate community repository. If you want to use JSC over Hermes, you can opt-in for it in RN 0.79. The built-in JSC will be removed in RN 0.81 or 0.82.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/facebook/metro/releases/tag/v0.82.0">Metro 0.82 - Enables <code>package.json#exports</code> resolution and lazy file hashing</a>: Upgrade included in RN 0.79.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-reanimated/tree/main/packages/react-native-worklets">React Native Worklets 0.1</a>: Software Mansion is extracting its Reanimated worklet system to a standalone multithreading library. WIP, we’ll probably know more soon.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/nandorojo/galeria/releases/tag/v1.0.0">Galeria 1.0 - Universal image viewer</a>: Supports New Arch, Web, and works with any image component.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/nandorojo/zeego/releases/tag/v3.0.1">Zeego 3.0 - Universal menus/dropdowns</a>: Supports New Arch, RN 0.77, Expo 52</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/callstackincubator/react-native-legal">React Native Legal - Automagically generate dependency/license acknowledgment screens</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-executorch/releases/tag/v0.3.0">React Native Executorch 0.3 - On-device AI experiences - Speech to Text, OCR</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/radon-ide/releases/tag/v1.4.0">Radon IDE 1.4 - React Query DevTools, React Scan re-render outliner, JS sampling profiler</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/callstack/react-native-testing-library/releases/tag/v13.1.0">Testing Library 13.1 - React 19 / React Native 0.78 support</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/okwasniewski/react-native-emoji-popup">React Native Emoji Popup - using native primitives - MCEmojiPicker on iOS, Emoji2 on Android</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=No0k-TMRuMA">Theo - Lynx is incredible (deep dive into Tiktok's React Native killer)</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=aqgQatFPNSw">Simon Grimm - Is React Native in trouble? (Lynx, React Native Framework &amp; Vercel)</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=6Va1yBFdUxI">Catalin Miron - Circular Carousel with Reanimated</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://infinite.red/react-native-radio/rnr-324-migrating-to-expo-with-alfred-lieth-are">React Native Radio 324 - Migrating to Expo with Alfred Lieth Årøe</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://share.transistor.fm/s/6a224b64">Rocket Ship 62 - Navigation, Styling &amp; The State of React Native with Beto</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>📜 <a target="_blank" href="https://devblogs.microsoft.com/typescript/typescript-native-port/">Microsoft - A 10x Faster TypeScript</a>: The compiler is being ported to Go, should become 10x and land in TS 7.0. Learn more in this <a target="_blank" href="http://Syntax.fm">Syntax.fm</a> <a target="_blank" href="https://www.youtube.com/watch?v=ZlGza4oIleY">podcast</a> interview with the TypeScript team, notably why they choose to use Go over Rust.</p>
</li>
<li><p>📜 <a target="_blank" href="https://almanac.httparchive.org/en/2024/javascript">Web Almanac 2024 - JavaScript</a>: The final chapter (JS) just dropped. React was found on 10% of pages (+25%) but still tiny compared to JQuery (74%).</p>
</li>
<li><p>📜 <a target="_blank" href="https://deno.com/blog/typescript-in-node-vs-deno">Node just added TypeScript support. What does that mean for Deno?</a>: The 2 runtimes support TS in different ways. For example, Deno has built-in type-checking and JSX/TSX support.</p>
</li>
<li><p>📜 <a target="_blank" href="https://leanrada.com/notes/inline-rendering-currentscript/">Inline rendering with document​.currentScript</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.vlt.sh/blog/reproducibility">Reproducibility vs. Provenance: Trusting the JavaScript Supply Chain</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://fast-check.dev/blog/2025/03/10/whats-new-in-fast-check-4-0-0/">Fast-check 4.0 - Property-based testing framework</a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://x.com/schlimmson/status/1895489183101440486"><img src="https://thisweekinreact.com/emails/issues/225/meme.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/sebastienlorber/status/1899482883472961833"><img src="https://thisweekinreact.com/emails/issues/225/meme2.jpg" alt="alt" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #224: Next.js, TanStack Form, Astro, RTK, State Machine, Remix, StyleX | Lynx, Entreprise, SwiftUI, VisionOS, Windows, Hermes...]]></title><description><![CDATA[Hi everyone!
This week we have:

React: A good mix of content and many community articles, but no major announcements.

React Native: The 2024 survey results are out, infra libraries now support RN 0.78, and Nitro Views have been released!

Other: Se...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-224-nextjs-tanstack-form-astro-rtk-state-machine-remix-stylex-lynx-entreprise-swiftui-visionos-windows-hermes</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-224-nextjs-tanstack-form-astro-rtk-state-machine-remix-stylex-lynx-entreprise-swiftui-visionos-windows-hermes</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 07 Mar 2025 13:19:47 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1741353529052/3b6157a0-a273-41ce-993e-94aea99bdf9b.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>This week we have:</p>
<ul>
<li><p><strong>React</strong>: A good mix of content and many community articles, but no major announcements.</p>
</li>
<li><p><strong>React Native</strong>: The 2024 survey results are out, infra libraries now support RN 0.78, and Nitro Views have been released!</p>
</li>
<li><p><strong>Other</strong>: Several TC39 proposals are progressing—my favorites are <code>import defer</code> and <code>RegExp.escape()</code>.</p>
</li>
</ul>
<p>I'm trying something new, let me know if you like the intro to be split by section like above.</p>
<p>Check our partner <a target="_blank" href="https://conf.strapi.io/?utm_source=thisweekinreact">StrapiConf</a> - 🇫🇷 Paris - 13 May. Strapi is a popular headless CMS in the React ecosystem, and like me, it's French 🥐! Get a 10% discount with code "TWIR".</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://marmelab.com/react-admin/?ref=TWIR"><img src="https://thisweekinreact.com/emails/issues/223/marmelab.jpg" alt="React-admin: The Open-Source Framework for B2B apps" /></a></p>
<p><a target="_blank" href="https://marmelab.com/react-admin/?ref=TWIR"><strong>React-admin: The Open-Source Framework for B2B apps</strong></a></p>
<p><a target="_blank" href="https://marmelab.com/react-admin/?ref=TWIR">React-admin</a> is the go-to framework for building B2B apps—because let’s be real, nobody dreams of writing yet another CRUD screen. Here’s why thousands of developers swear by it:</p>
<ul>
<li><p>🔌 <strong>Backend Agnostic:</strong> Connects to any API—because commitment issues aren't just for relationships.</p>
</li>
<li><p>🧩 <strong>200+ Building Blocks:</strong> More pre-built components than your project has TODOs.</p>
</li>
<li><p>🛠 <strong>Complete Customization:</strong> If you don’t like it, change it. We won’t take it personally (*wipes away tears*).</p>
</li>
<li><p>💻 <strong>Great Developer Experience:</strong> Makes you feel like a coding rockstar, minus the groupies (unless you count rubber ducks).</p>
</li>
</ul>
<p>With 7 years in production and 1 million daily users, react-admin is a sure bet. So why don’t you <a target="_blank" href="https://github.com/marmelab/react-admin?ref=TWIR">try it out</a> yourself?</p>
<hr />
<p>##⚛️ React</p>
<ul>
<li><p>💸 <a target="_blank" href="https://convex.link/thisweekbench">AI coding benchmarks for backends</a></p>
</li>
<li><p>👀 <a target="_blank" href="https://www.react-explorer.com/">React Explorer - Turns your React site into an interactive visualization</a></p>
</li>
<li><p>📖 <a target="_blank" href="https://docs.deno.com/examples/tanstack_tutorial/">Deno docs - Build an app with TanStack and Deno</a></p>
</li>
<li><p>🗓 <a target="_blank" href="https://reactsummit.com/?utm_source=Newsletter&amp;utm_medium=thisweekinreact">React-Summit</a> - 🇳🇱 Amsterdam - 13 &amp; 17 June. CFP is closing soon on March 2! Last chance to submit your talks for a top-tier tech audience.</p>
</li>
<li><p>📜 <a target="_blank" href="https://medium.com/preply-engineering/how-preply-improved-inp-on-a-next-js-application-without-react-server-components-and-app-router-491713149875">How Preply improved INP on a Next.js application (without React Server Components and App Router)</a>: A deep dive into this Core Web Vital metrics and various things Preply tried to improve it, using a data-driven approach.</p>
</li>
<li><p>📜 <a target="_blank" href="https://aurorascharff.no/posts/avoiding-server-component-waterfall-fetching-with-react-19-cache/">Avoiding Server Component Waterfall Fetching with React 19 cache()</a>: You can use <code>React.cache()</code> to deduplicate requests and preload data as soon as possible to avoid request waterfalls. This works but creates an implicit coupling. I’d prefer a more explicit model, hoisting all requests and passing promises down as props.</p>
</li>
<li><p>📜 <a target="_blank" href="https://gist.github.com/mitsuhiko/555b45f020a8d7e389516b51f6d03534">Armin's TanStack Router Notes</a>: Documents challenges encountered while trying to determine whether Sentry could adopt TanStack Router.</p>
</li>
<li><p>📜 <a target="_blank" href="https://smoores.dev/post/no_such_thing_isomorphic_layout_effect/">There’s no such thing as an isomorphic layout effect</a>: A possible interpretation of the story behind the <code>useIsomorphicLayoutEffect</code> pattern.</p>
</li>
<li><p>📜 <a target="_blank" href="https://programmingarehard.com/2025/02/24/debouncing-in-react-router-v7.html/">Debouncing in React Router v7</a>: Interesting technique relying on <code>clientLoader</code></p>
</li>
<li><p>📜 <a target="_blank" href="https://sergiodxa.com/tutorials/download-a-file-from-a-react-router-route">How to Download a file from a React Router route</a>: With/without dynamic params, with/without JS.</p>
</li>
<li><p>📜 <a target="_blank" href="https://ouassim.tech/notes/shadcn-registry-a-better-way-to-manage-your-ui-components/">Shadcn Registry: A Better Way to Manage Your UI Components</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://sergiodxa.com/articles/throwing-vs-returning-redirects-in-react-router">Throwing vs. Returning Redirects in React Router</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.56kode.com/posts/level-up-react-functional-programming-in-react/">Functional programming in React</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.sentry.io/react-js-performance-guide/">React Performance: Common Problems &amp; Their Solutions</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://tigerabrodi.blog/making-nextjs-apps-faster-a-practical-performance-guide-beyond-nextjs">Making Next.js Apps Faster: A Practical Performance Guide Beyond Next.js</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://waku.gg/blog/progressive-forms">Progressive forms with server actions</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/TanStack/create-tsrouter-app/releases/tag/v0.4.0">Create TanStack Router App 0.4 - Add-ons, SolidJS support, MCP support</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/aidenybai/react-scan/releases/tag/v0.2.0">React Scan 0.2 - Slowdown notifications, explanations and pre-generated prompts to fix them</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/jantimon/chrome-react-scan-inspector">React Scan Chrome Extension</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/storybookjs/storybook/releases/tag/v8.6.0">Storybook 8.6 - Storybook Test improvements</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/marmelab/react-admin/releases/tag/v5.6.0">React Admin 5.6 - Black &amp; white theme</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://bun.sh/blog/bun-v1.2.3">Bun 1.2.3 - Built-in React support with hot-reloading, React init template</a></p>
</li>
<li><p>🔨 <a target="_blank" href="https://laravel.com/starter-kits">Laravel Starter Kits</a>: Include a new official React 19 + Inertia 2 starter kit.</p>
</li>
<li><p>🔨 <a target="_blank" href="https://github.com/epicweb-dev/epic-stack/discussions/937">Remix Epic Stack update - Passkeys, Helmets, and more!</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=3EnathFYgz8">Jack Herrington - Fix Your Slow React App With React-Scan</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=Diy4XRSFTiA">Syntax - Should You Use Signals with React?</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=XcUpTPbY4Wg">Cosden - Combining React Query With Server Components (Next.js)</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://www.meticulous.ai?utm_source=thisweekinreact&amp;utm_campaign=feb26th"><img src="https://thisweekinreact.com/emails/issues/217/meticulous.jpg" alt="Tests are dead - Meticulous is here" /></a></p>
<p><a target="_blank" href="https://www.meticulous.ai?utm_source=thisweekinreact&amp;utm_campaign=feb26th"><strong>Tests are dead - Meticulous is here</strong></a></p>
<p>Meticulous creates and maintains an exhaustive suite of e2e ui tests with <strong>zero</strong> developer effort.</p>
<p>Dropbox, Bilt Rewards, Lattice and hundreds of engineering organizations rely on Meticulous for their frontend testing.</p>
<p>This quote from the CTO of Traba sums the product up best: "Meticulous has fundamentally changed the way we approach frontend testing in our web applications, fully eliminating the need to write any frontend tests. The software gives us confidence that every change will be completely regression tested, allowing us to ship more quickly with significantly fewer bugs in our code."</p>
<p>This <a target="_blank" href="https://www.meticulous.ai/blog/lessons-from-a-decade?utm_source=thisweekinreact&amp;utm_campaign=jan15th">post</a> from our CTO, who formerly led a large engineering group at Palantir, sets out the context of why exhaustive testing can double engineering velocity.</p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<p><a target="_blank" href="https://results.stateofreactnative.com/"><img src="https://thisweekinreact.com/emails/issues/223/state-of-rn.jpg" alt="State of React Native 2024 - Survey Results" /></a></p>
<p><a target="_blank" href="https://results.stateofreactnative.com/"><strong>State of React Native 2024 - Survey Results</strong></a></p>
<p>The survey results are out and I’m super proud that among all the React Native resources, this newsletter got the highest positivity score. Thank you ❤️!</p>
<p>I can’t summarize the whole survey, but here are a few things I discovered:</p>
<ul>
<li><p>61% of RN devs came from React (web)</p>
</li>
<li><p>iOS and Android remain the most common RN targets, but the Web also has a 22% market share</p>
</li>
<li><p>Libraries with the most positive sentiment are: Reanimated, TanStack Query, Zustand, React Navigation, Expo Router, Skia.</p>
</li>
<li><p>No clear winner in terms of styling. Devs like the built-in APIs such as StyleSheet and inline styles.</p>
</li>
</ul>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://dub.link/twir-feb26">PostHog - How we built mobile replay (and why it took so long)</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/how-to-build-custom-tabs-with-expo-router-ui">How to build Custom Tabs with Expo Router UI</a></p>
</li>
<li><p>🗓️ <a target="_blank" href="https://appjs.co/?utm_source=thisweekinreact">App.js Conf</a> -  🇵🇱 Kraków - 28-30 May. Don't miss your chance to grab your tickets and benefit from an exclusive 15% discount using the code "TWIR".</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/mrousavy/nitro/releases/tag/v0.23.0">Nitro 0.23 - Nitro Views</a>: A new convenient and perfomant way to integrate native Swift / Kotlin views into React Native apps. Requires 0.78+ and New Arch.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-reanimated/releases/tag/3.17.0">Reanimated 3.17 - Edge-to-Edge, LAB color space, animate <code>boxShadow</code></a>: Support for RN 0.78 coming in 3.17.1 soon.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/kuatsu/react-native-boost">React Native Boost - A powerful Babel plugin that automatically optimizes React Native apps</a>: Apply safe AST micro-optimizations to boost performance, like using faster native Text/View components instead of the RN JS wrappers.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/OP-Engineering/op-aws-lc">AWS-LibCrypto</a>: RN bindings to Rust AWS lib, with FIPS certification from the US government.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-screens/releases/tag/4.8.0">Screens 4.8 - Android 16 KB page size</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-screens/releases/tag/4.9.0">Screens 4.9 - RN 0.78</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-gesture-handler/releases/tag/2.24.0">Gesture Handler 2.24 - RN 0.78, Android 16 KB page size support</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/betomoedano/quick-push">QuickPush - A lightweight macOS menu bar utility for quickly testing Expo push notifications</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/facebook/metro/releases/tag/v0.81.2">Metro 0.81.2 - Package exports to clearly define public API surface, perf, experimental flags</a></p>
</li>
<li><p>🔨 <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=react-native-directory.vscode-react-native-directory">VSCode Extension for React Native Directory</a>: Find and install the right RND packages directly from your IDE.</p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=00VwmqqXDik">Simon Grimm - Your own iOS Widget in 12 Minutes</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://infinite.red/react-native-radio/rnr-322-building-react-native-libraries-with-builder-bob-6g-7gnty">RNR 322 - Building React Native Libraries With Builder Bob</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://share.transistor.fm/s/fde1972f">Rocket Ship 61 - Shipping Successful AI Apps with Your Average Tech Bro</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>👀 <a target="_blank" href="https://groups.google.com/a/chromium.org/g/blink-dev/c/stxSgTgMHog">Chromium - Intent to ship Observables API in Chrome 135</a></p>
</li>
<li><p>🎮 <a target="_blank" href="https://anchoreum.com/">Anchoreum - A game for learning CSS Anchor Positioning</a>: I didn’t expect Anchor Positioning to be as powerful. It’s in Interop 2025 and likely to land in all browsers this year, so now is a great time to learn!</p>
</li>
<li><p>📜 <a target="_blank" href="https://socket.dev/blog/tc39-advances-3-proposals-to-stage-4-regexp-escaping-float16array-and-redeclarable-global-eval">TC39 Advances 3 Proposals to Stage 4: RegExp Escaping, Float16Array, and Redeclarable global eval vars</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.scd31.com/posts/extreme-server-side-rendering">Extreme Server-Side Rendering</a>: Keeping the connection alive, a server can stream updates continuously to the client. The author implemented a Flappy Bird game relying on this technique, without any JS.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.heal.dev/docs/blog/testing-webauthn">Testing Web Authentication (WebAuthn)</a>: TIL you can leverage Chrome DevTools features in Playwright.</p>
</li>
<li><p>📜 <a target="_blank" href="https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-11/">Speeding up the JavaScript ecosystem - Rust and JavaScript Plugins</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.joshwcomeau.com/blog/whimsical-animations/">A Million Little Secrets - Deconstructing the “Whimsical Animations” landing page</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://jlongster.com/subverting-control-weak-refs">Subverting control with weak references</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=0mCsluv5FXA">TypeScript types can run DOOM</a>: Just 🤯.</p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://bsky.app/profile/sebastienlorber.com/post/3lijm77wxdk2b"><img src="https://thisweekinreact.com/emails/issues/223/meme.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/schlimmson/status/1892257891870265830"><img src="https://thisweekinreact.com/emails/issues/223/meme2.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/cramforce/status/1894781544851783754"><img src="https://thisweekinreact.com/emails/issues/223/meme3.jpg" alt="alt" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #223 : TanStack, React Router, React-Scan, Bun, Next.js, INP, Storybook | State of RN, Nitro Views, Reanimated, Gesture Handler...]]></title><description><![CDATA[Hi everyone!
This week we have:

React: A good mix of content and many community articles, but no major announcements.

React Native: The 2024 survey results are out, infra libraries now support RN 0.78, and Nitro Views have been released!

Other: Se...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-223-tanstack-react-router-react-scan-bun-nextjs-inp-storybook-state-of-rn-nitro-views-reanimated-gesture-handler</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-223-tanstack-react-router-react-scan-bun-nextjs-inp-storybook-state-of-rn-nitro-views-reanimated-gesture-handler</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 07 Mar 2025 13:18:08 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1740750019722/0e3b8b01-2b3d-4fb2-8d4a-35f19b20d5f3.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>This week we have:</p>
<ul>
<li><p><strong>React</strong>: A good mix of content and many community articles, but no major announcements.</p>
</li>
<li><p><strong>React Native</strong>: The 2024 survey results are out, infra libraries now support RN 0.78, and Nitro Views have been released!</p>
</li>
<li><p><strong>Other</strong>: Several TC39 proposals are progressing—my favorites are <code>import defer</code> and <code>RegExp.escape()</code>.</p>
</li>
</ul>
<p>I'm trying something new, let me know if you like the intro to be split by section like above.</p>
<p>Check our partner <a target="_blank" href="https://conf.strapi.io/?utm_source=thisweekinreact">StrapiConf</a> - 🇫🇷 Paris - 13 May. Strapi is a popular headless CMS in the React ecosystem, and like me, it's French 🥐! Get a 10% discount with code "TWIR".</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://marmelab.com/react-admin/?ref=TWIR"><img src="https://thisweekinreact.com/emails/issues/223/marmelab.jpg" alt="React-admin: The Open-Source Framework for B2B apps" /></a></p>
<p><a target="_blank" href="https://marmelab.com/react-admin/?ref=TWIR"><strong>React-admin: The Open-Source Framework for B2B apps</strong></a></p>
<p><a target="_blank" href="https://marmelab.com/react-admin/?ref=TWIR">React-admin</a> is the go-to framework for building B2B apps—because let’s be real, nobody dreams of writing yet another CRUD screen. Here’s why thousands of developers swear by it:</p>
<ul>
<li><p>🔌 <strong>Backend Agnostic:</strong> Connects to any API—because commitment issues aren't just for relationships.</p>
</li>
<li><p>🧩 <strong>200+ Building Blocks:</strong> More pre-built components than your project has TODOs.</p>
</li>
<li><p>🛠 <strong>Complete Customization:</strong> If you don’t like it, change it. We won’t take it personally (*wipes away tears*).</p>
</li>
<li><p>💻 <strong>Great Developer Experience:</strong> Makes you feel like a coding rockstar, minus the groupies (unless you count rubber ducks).</p>
</li>
</ul>
<p>With 7 years in production and 1 million daily users, react-admin is a sure bet. So why don’t you <a target="_blank" href="https://github.com/marmelab/react-admin?ref=TWIR">try it out</a> yourself?</p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<ul>
<li><p>💸 <a target="_blank" href="https://convex.link/thisweekbench">AI coding benchmarks for backends</a></p>
</li>
<li><p>👀 <a target="_blank" href="https://www.react-explorer.com/">React Explorer - Turns your React site into an interactive visualization</a></p>
</li>
<li><p>📖 <a target="_blank" href="https://docs.deno.com/examples/tanstack_tutorial/">Deno docs - Build an app with TanStack and Deno</a></p>
</li>
<li><p>🗓 <a target="_blank" href="https://reactsummit.com/?utm_source=Newsletter&amp;utm_medium=thisweekinreact">React-Summit</a> - 🇳🇱 Amsterdam - 13 &amp; 17 June. CFP is closing soon on March 2! Last chance to submit your talks for a top-tier tech audience.</p>
</li>
<li><p>📜 <a target="_blank" href="https://medium.com/preply-engineering/how-preply-improved-inp-on-a-next-js-application-without-react-server-components-and-app-router-491713149875">How Preply improved INP on a Next.js application (without React Server Components and App Router)</a>: A deep dive into this Core Web Vital metrics and various things Preply tried to improve it, using a data-driven approach.</p>
</li>
<li><p>📜 <a target="_blank" href="https://aurorascharff.no/posts/avoiding-server-component-waterfall-fetching-with-react-19-cache/">Avoiding Server Component Waterfall Fetching with React 19 cache()</a>: You can use <code>React.cache()</code> to deduplicate requests and preload data as soon as possible to avoid request waterfalls. This works but creates an implicit coupling. I’d prefer a more explicit model, hoisting all requests and passing promises down as props.</p>
</li>
<li><p>📜 <a target="_blank" href="https://gist.github.com/mitsuhiko/555b45f020a8d7e389516b51f6d03534">Armin's TanStack Router Notes</a>: Documents challenges encountered while trying to determine whether Sentry could adopt TanStack Router.</p>
</li>
<li><p>📜 <a target="_blank" href="https://smoores.dev/post/no_such_thing_isomorphic_layout_effect/">There’s no such thing as an isomorphic layout effect</a>: A possible interpretation of the story behind the <code>useIsomorphicLayoutEffect</code> pattern.</p>
</li>
<li><p>📜 <a target="_blank" href="https://programmingarehard.com/2025/02/24/debouncing-in-react-router-v7.html/">Debouncing in React Router v7</a>: Interesting technique relying on <code>clientLoader</code></p>
</li>
<li><p>📜 <a target="_blank" href="https://sergiodxa.com/tutorials/download-a-file-from-a-react-router-route">How to Download a file from a React Router route</a>: With/without dynamic params, with/without JS.</p>
</li>
<li><p>📜 <a target="_blank" href="https://ouassim.tech/notes/shadcn-registry-a-better-way-to-manage-your-ui-components/">Shadcn Registry: A Better Way to Manage Your UI Components</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://sergiodxa.com/articles/throwing-vs-returning-redirects-in-react-router">Throwing vs. Returning Redirects in React Router</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.56kode.com/posts/level-up-react-functional-programming-in-react/">Functional programming in React</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://blog.sentry.io/react-js-performance-guide/">React Performance: Common Problems &amp; Their Solutions</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://tigerabrodi.blog/making-nextjs-apps-faster-a-practical-performance-guide-beyond-nextjs">Making Next.js Apps Faster: A Practical Performance Guide Beyond Next.js</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://waku.gg/blog/progressive-forms">Progressive forms with server actions</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/TanStack/create-tsrouter-app/releases/tag/v0.4.0">Create TanStack Router App 0.4 - Add-ons, SolidJS support, MCP support</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/aidenybai/react-scan/releases/tag/v0.2.0">React Scan 0.2 - Slowdown notifications, explanations and pre-generated prompts to fix them</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/jantimon/chrome-react-scan-inspector">React Scan Chrome Extension</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/storybookjs/storybook/releases/tag/v8.6.0">Storybook 8.6 - Storybook Test improvements</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/marmelab/react-admin/releases/tag/v5.6.0">React Admin 5.6 - Black &amp; white theme</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://bun.sh/blog/bun-v1.2.3">Bun 1.2.3 - Built-in React support with hot-reloading, React init template</a></p>
</li>
<li><p>🔨 <a target="_blank" href="https://laravel.com/starter-kits">Laravel Starter Kits</a>: Include a new official React 19 + Inertia 2 starter kit.</p>
</li>
<li><p>🔨 <a target="_blank" href="https://github.com/epicweb-dev/epic-stack/discussions/937">Remix Epic Stack update - Passkeys, Helmets, and more!</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=3EnathFYgz8">Jack Herrington - Fix Your Slow React App With React-Scan</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=Diy4XRSFTiA">Syntax - Should You Use Signals with React?</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=XcUpTPbY4Wg">Cosden - Combining React Query With Server Components (Next.js)</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://www.meticulous.ai?utm_source=thisweekinreact&amp;utm_campaign=feb26th"><img src="https://thisweekinreact.com/emails/issues/217/meticulous.jpg" alt="Tests are dead - Meticulous is here" /></a></p>
<p><a target="_blank" href="https://www.meticulous.ai?utm_source=thisweekinreact&amp;utm_campaign=feb26th"><strong>Tests are dead - Meticulous is here</strong></a></p>
<p>Meticulous creates and maintains an exhaustive suite of e2e ui tests with <strong>zero</strong> developer effort.</p>
<p>Dropbox, Bilt Rewards, Lattice and hundreds of engineering organizations rely on Meticulous for their frontend testing.</p>
<p>This quote from the CTO of Traba sums the product up best: "Meticulous has fundamentally changed the way we approach frontend testing in our web applications, fully eliminating the need to write any frontend tests. The software gives us confidence that every change will be completely regression tested, allowing us to ship more quickly with significantly fewer bugs in our code."</p>
<p>This <a target="_blank" href="https://www.meticulous.ai/blog/lessons-from-a-decade?utm_source=thisweekinreact&amp;utm_campaign=jan15th">post</a> from our CTO, who formerly led a large engineering group at Palantir, sets out the context of why exhaustive testing can double engineering velocity.</p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<p><a target="_blank" href="https://results.stateofreactnative.com/"><img src="https://thisweekinreact.com/emails/issues/223/state-of-rn.jpg" alt="State of React Native 2024 - Survey Results" /></a></p>
<p><a target="_blank" href="https://results.stateofreactnative.com/"><strong>State of React Native 2024 - Survey Results</strong></a></p>
<p>The survey results are out and I’m super proud that among all the React Native resources, this newsletter got the highest positivity score. Thank you ❤️!</p>
<p>I can’t summarize the whole survey, but here are a few things I discovered:</p>
<ul>
<li><p>61% of RN devs came from React (web)</p>
</li>
<li><p>iOS and Android remain the most common RN targets, but the Web also has a 22% market share</p>
</li>
<li><p>Libraries with the most positive sentiment are: Reanimated, TanStack Query, Zustand, React Navigation, Expo Router, Skia.</p>
</li>
<li><p>No clear winner in terms of styling. Devs like the built-in APIs such as StyleSheet and inline styles.</p>
</li>
</ul>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://dub.link/twir-feb26">PostHog - How we built mobile replay (and why it took so long)</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/how-to-build-custom-tabs-with-expo-router-ui">How to build Custom Tabs with Expo Router UI</a></p>
</li>
<li><p>🗓️ <a target="_blank" href="https://appjs.co/?utm_source=thisweekinreact">App.js Conf</a> -  🇵🇱 Kraków - 28-30 May. Don't miss your chance to grab your tickets and benefit from an exclusive 15% discount using the code "TWIR".</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/mrousavy/nitro/releases/tag/v0.23.0">Nitro 0.23 - Nitro Views</a>: A new convenient and perfomant way to integrate native Swift / Kotlin views into React Native apps. Requires 0.78+ and New Arch.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-reanimated/releases/tag/3.17.0">Reanimated 3.17 - Edge-to-Edge, LAB color space, animate <code>boxShadow</code></a>: Support for RN 0.78 coming in 3.17.1 soon.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/kuatsu/react-native-boost">React Native Boost - A powerful Babel plugin that automatically optimizes React Native apps</a>: Apply safe AST micro-optimizations to boost performance, like using faster native Text/View components instead of the RN JS wrappers.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/OP-Engineering/op-aws-lc">AWS-LibCrypto</a>: RN bindings to Rust AWS lib, with FIPS certification from the US government.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-screens/releases/tag/4.8.0">Screens 4.8 - Android 16 KB page size</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-screens/releases/tag/4.9.0">Screens 4.9 - RN 0.78</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-gesture-handler/releases/tag/2.24.0">Gesture Handler 2.24 - RN 0.78, Android 16 KB page size support</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/betomoedano/quick-push">QuickPush - A lightweight macOS menu bar utility for quickly testing Expo push notifications</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/facebook/metro/releases/tag/v0.81.2">Metro 0.81.2 - Package exports to clearly define public API surface, perf, experimental flags</a></p>
</li>
<li><p>🔨 <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=react-native-directory.vscode-react-native-directory">VSCode Extension for React Native Directory</a>: Find and install the right RND packages directly from your IDE.</p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=00VwmqqXDik">Simon Grimm - Your own iOS Widget in 12 Minutes</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://infinite.red/react-native-radio/rnr-322-building-react-native-libraries-with-builder-bob-6g-7gnty">RNR 322 - Building React Native Libraries With Builder Bob</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://share.transistor.fm/s/fde1972f">Rocket Ship 61 - Shipping Successful AI Apps with Your Average Tech Bro</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>👀 <a target="_blank" href="https://groups.google.com/a/chromium.org/g/blink-dev/c/stxSgTgMHog">Chromium - Intent to ship Observables API in Chrome 135</a></p>
</li>
<li><p>🎮 <a target="_blank" href="https://anchoreum.com/">Anchoreum - A game for learning CSS Anchor Positioning</a>: I didn’t expect Anchor Positioning to be as powerful. It’s in Interop 2025 and likely to land in all browsers this year, so now is a great time to learn!</p>
</li>
<li><p>📜 <a target="_blank" href="https://socket.dev/blog/tc39-advances-3-proposals-to-stage-4-regexp-escaping-float16array-and-redeclarable-global-eval">TC39 Advances 3 Proposals to Stage 4: RegExp Escaping, Float16Array, and Redeclarable global eval vars</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.scd31.com/posts/extreme-server-side-rendering">Extreme Server-Side Rendering</a>: Keeping the connection alive, a server can stream updates continuously to the client. The author implemented a Flappy Bird game relying on this technique, without any JS.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.heal.dev/docs/blog/testing-webauthn">Testing Web Authentication (WebAuthn)</a>: TIL you can leverage Chrome DevTools features in Playwright.</p>
</li>
<li><p>📜 <a target="_blank" href="https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-11/">Speeding up the JavaScript ecosystem - Rust and JavaScript Plugins</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.joshwcomeau.com/blog/whimsical-animations/">A Million Little Secrets - Deconstructing the “Whimsical Animations” landing page</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://jlongster.com/subverting-control-weak-refs">Subverting control with weak references</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=0mCsluv5FXA">TypeScript types can run DOOM</a>: Just 🤯.</p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://bsky.app/profile/sebastienlorber.com/post/3lijm77wxdk2b"><img src="https://thisweekinreact.com/emails/issues/223/meme.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/schlimmson/status/1892257891870265830"><img src="https://thisweekinreact.com/emails/issues/223/meme2.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/cramforce/status/1894781544851783754"><img src="https://thisweekinreact.com/emails/issues/223/meme3.jpg" alt="alt" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #222: CRA, React Router, captureOwnerStack, TanStack, CTRA, tRPC, Astro, Preact | RN 0.78, React 19, Expo, noCompress, JitPack...]]></title><description><![CDATA[Hi everyone!
This week we have 2 official blog posts from the React and React Native core teams! CRA is deprecated and React Native 0.78 is out with React 19 support.
🎂 We're also celebrating this newsletter's 5th anniversary! The first issue went o...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-222-cra-react-router-captureownerstack-tanstack-ctra-trpc-astro-preact-rn-078-react-19-expo-nocompress-jitpack</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-222-cra-react-router-captureownerstack-tanstack-ctra-trpc-astro-preact-rn-078-react-19-expo-nocompress-jitpack</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 21 Feb 2025 13:48:28 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1740145681796/47901868-33b3-4489-8cc1-47a98ecccf1d.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>This week we have 2 official blog posts from the React and React Native core teams! CRA is deprecated and React Native 0.78 is out with React 19 support.</p>
<p>🎂 We're also celebrating this newsletter's 5th anniversary! The <a target="_blank" href="https://substack.thisweekinreact.com/p/react-hebdo-sebastien-lorber-1-20-02-13">first issue</a> went out on February 13th. For the first 2 years it was only in French. I’d love to know who's been reading since the early days—say hi if you have! 😀</p>
<p>Check our partner conf <a target="_blank" href="https://reactnativeconnection.io/?utm_source=thisweekinreact"><strong>React Native Connection</strong></a> -  🇫🇷 Paris - April 1-2 - 15% discount with code "TWIR". The French React Native conference is back with Britta Evans-Fenton (Shopify), Kadi Kraman (Expo), Krzysztof Piaskowy (Software Mansion), Saad Najmi (Microsoft) and more - and great deep-diving talks!</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://www.propelauth.com/?utm_source=newsletter&amp;utm_campaign=twinrfeb192024"><img src="https://thisweekinreact.com/emails/issues/218/propelauth.jpg" alt="PropelAuth: Make Authentication Your Advantage" /></a></p>
<p><a target="_blank" href="https://www.propelauth.com/?utm_source=newsletter&amp;utm_campaign=twinrfeb192024"><strong>PropelAuth: Make Authentication Your Advantage</strong></a></p>
<p>If your authentication isn't <strong>helping you grow</strong>, it's <strong>holding you back</strong>.</p>
<p>With <a target="_blank" href="https://www.propelauth.com/?utm_source=newsletter&amp;utm_campaign=twinrjan222024">PropelAuth</a>, you get everything you need to launch and scale your B2B product:</p>
<ul>
<li><p><strong>Easy to understand</strong> <a target="_blank" href="https://docs.propelauth.com/?utm_source=newsletter&amp;utm_campaign=twinrjan222024">documentation</a> and <strong>friendly, fast support</strong>.</p>
</li>
<li><p><strong>UIs that cover all your use cases</strong> - signup, login, MFA, organization management and more.</p>
</li>
<li><p><strong>User impersonation</strong> so you can provide top-notch support to your users.</p>
</li>
<li><p><strong>Enterprise SAML/SSO</strong> and <strong>advanced security features</strong> so you can be upmarket-ready.</p>
</li>
<li><p><strong>User insights</strong> to help you strategize and expand.</p>
</li>
</ul>
<p><a target="_blank" href="https://www.propelauth.com/?utm_source=newsletter&amp;utm_campaign=twinrjan222024">Get started today</a></p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<p><a target="_blank" href="https://react.dev/blog/2025/02/14/sunsetting-create-react-app"><img src="https://thisweekinreact.com/emails/issues/222/cra.jpg" alt="Sunsetting Create React App" /></a></p>
<p><a target="_blank" href="https://react.dev/blog/2025/02/14/sunsetting-create-react-app"><strong>Sunsetting Create React App</strong></a></p>
<p>Long overdue, CRA has received the latest React 19 fixes and is now officially deprecated. This article explains the limits of the CRA and build tools regarding routing, waterfalls, code splitting, and more. The React team encourages us to adopt a framework like Next.js, React Router, or Expo to address these issues. However, you can still <a target="_blank" href="https://react.dev/learn/build-a-react-app-from-scratch">build a React app from scratch</a> using Vite, Parcel, Rsbuild, or other modern build tools.</p>
<p>The initial announcement sparked heated debates on X and GitHub, mainly because it overemphasized frameworks at the expense of build tools like Vite. It was <a target="_blank" href="https://github.com/reactjs/react.dev/pull/7624">soon updated</a> to address these concerns. All this also led to potential collaboration opportunities between <a target="_blank" href="https://github.com/facebook/react/pull/31768#issuecomment-2666856223">Evan You (Vite) and the React team</a> to work together on an opinionated "official" way to integrate with Vite with React Server Components, with a commitment to maintain this integration over time in the React repository.</p>
<p>Related news:</p>
<ul>
<li><p>📜 <a target="_blank" href="https://reactnative.dev/blog/2024/06/25/use-a-framework-to-build-react-native-apps">Use a framework to build React Native apps</a>: A few months ago, the React Native team made a similar announcement, claiming “you’re either using a framework or you’re building your own framework”.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/TanStack/create-tsrouter-app">Create TanStack Router App</a>: Jack Herrington’s first contribution to the TanStack is an alternative to Create-React-App, also introduced it in a <a target="_blank" href="https://www.youtube.com/watch?v=10J6RyMOxN0">video</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/parcel-bundler/cra-to-parcel">CRA to Parcel</a>: A script to migrate a non-ejected Create React App to Parcel</p>
</li>
</ul>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://dub.link/twir-feb19">Product for Engineers - How we choose technologies</a></p>
</li>
<li><p>📣 <a target="_blank" href="https://vercel.com/changelog/support-for-react-router-v7">Vercel - Support for React Router v7</a>: First-class support for React Router in framework mode with support for SSR on the new optimized Fluid compute serverless feature.</p>
</li>
<li><p>📖 <a target="_blank" href="https://react.dev/reference/react/captureOwnerStack">React core docs - <code>captureOwnerStack()</code></a>: A new experimental React core API has been recently unflagged and is now officially documented. It is particularly useful for frameworks to enhance their custom error overlays. Unsurprisingly, Next.js is working on a new overlay that leverages this API (<a target="_blank" href="https://x.com/sebastienlorber/status/1890361565960151374">example</a>).</p>
</li>
<li><p>📖 <a target="_blank" href="https://sdk.vercel.ai/cookbook/next/human-in-the-loop">Vercel AI docs - Duman-in-the-Loop with Next.js</a>: A recipe to prompt users for yes/no confirmation before LLM tool calls.</p>
</li>
<li><p>📜 <a target="_blank" href="https://trpc.io/blog/introducing-tanstack-react-query-client">Introducing the new TanStack React Query integration</a>: The upcoming tRPC v11 is in RC and leverages React Query’s <code>queryOptions()</code> to remove an abstraction layer: you can now use the native <code>useQuery()</code> instead of the tRPC wrapper.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.vigilant.run/blog/designing-backgrounds-with-llms-and-react">Designing Backgrounds with LLMs and React</a>: Tools like Cursor are quite good at authoring artistic React components.</p>
</li>
<li><p>📜 <a target="_blank" href="https://brightinventions.pl/blog/snapshot-testing-styled-components-with-vitest/">Snapshot testing styled-components with Vitest</a>: The existing StyledComponents Jest snapshot serializer is also compatible with Vitest. I’m not a fan of snapshotting styles and usually prefer <a target="_blank" href="https://docusaurus.io/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing">visual regression tests</a>, but this might help existing codebases migrate to Vitest.</p>
</li>
<li><p>📜 <a target="_blank" href="https://tigerabrodi.blog/i-like-the-future-of-nextjs">I like the future of Next.js</a>: Thoughts on dynamic IO, PPR, and the <code>use cache</code> directive.</p>
</li>
<li><p>📜 <a target="_blank" href="https://playfulprogramming.com/posts/react-as-prop">React "as" Prop Using TypeScript</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.developerway.com/posts/client-side-rendering-flame-graph">Client-Side Rendering in Flame Graphs</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.robinwieruch.de/react-libraries/">React Libraries for 2025</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://spin.atomicobject.com/tanstack-start-nextjs/">Tanstack Start - Is it the Next NextJS?</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v720">React Router 7.2 - Type-safe <code>href()</code> utility</a>: A welcome improvement giving route path autocompletion and params validation. This release also include support for an SPA fallback static file, and 2 new future flags <code>unstable_splitRouteModules</code> and <code>unstable_viteEnvironmentApi</code>.</p>
</li>
<li><p>📦 <a target="_blank" href="https://tanstack.com/start/latest/docs/framework/react/server-functions#cancellation">TanStack Start 1.107 - AbortSignal for server functions</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://astro.build/blog/astro-530/">Astro 5.3 - Faster SSR, automatic session storage setup</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/preactjs/preact/releases/tag/10.26.0">Preact 10.26 - Support for React 19 <code>&lt;Context&gt;</code></a></p>
</li>
<li><p>📦 <a target="_blank" href="https://www.9ui.dev/">9ui - Beautiful, customizable components built with Base UI and Tailwind CSS</a>: Using the shadcn distribution model but using Base UI, a new interesting alternative to Radix. The author is also porting popular libs such as Vaul and cmdk.</p>
</li>
<li><p>📦 <a target="_blank" href="https://kokonutui.com/">Kokonut UI - Collection of components built for Next.js and React with Tailwind CSS</a>: Another option using the shadcn distribution model.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/DavidHDev/react-bits">React Bits - Collection of animated, interactive &amp; fully customizable React components for building stunning, memorable user interfaces</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=zyQjzId0H7s">Alem Tuzlak - Understanding the server/client boundary in react-router</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://front-end-fire.com/episodes/81/">Front-End Fire 81 - State of React Results, TypeScript 5.8, and v0 Upgrades</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://www.reactile.net/?utm_source=ThisweekinReact"><img src="https://thisweekinreact.com/emails/issues/216/reactile.jpg" alt="Rethink your React apps' UX with Reactile" /></a></p>
<p><a target="_blank" href="https://www.reactile.net/?utm_source=ThisweekinReact"><strong>Rethink your React apps' UX with Reactile</strong></a></p>
<p>Reactile is an UI/UX turnkey framework which features an out-of-the-box, intuitive tiling display with workspaces. It encourages parallel workloads for large web solutions within a single browser tab. Implement your own view containers, widgets and logic using React and let Reactile handle the display for you.</p>
<p>On top of that, Reactile also offers:</p>
<ul>
<li><p>A promise-based persistence mechanism which permits a uniform workflow across time and on multiple devices.</p>
</li>
<li><p>The possibility to use nested tabs for your tiles.</p>
</li>
<li><p>A simplified global search mechanism.</p>
</li>
<li><p>CSS @container based responsiveness.</p>
</li>
<li><p>And much more.</p>
</li>
</ul>
<p>Version 2 coming out soon. Get started with your unique 30-day free trial. Learn more about it on <a target="_blank" href="http://reactile.net">reactile.net</a>.</p>
<p><a target="_blank" href="https://www.reactile.net/price?utm_source=ThisweekinReact">Reactile - The new React UI management system</a></p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<p><a target="_blank" href="https://reactnative.dev/blog/2025/02/19/react-native-0.78"><img src="https://thisweekinreact.com/emails/issues/222/rn.jpg" alt="React Native 0.78 - React 19 and more" /></a></p>
<p><a target="_blank" href="https://reactnative.dev/blog/2025/02/19/react-native-0.78"><strong>React Native 0.78 - React 19 and more</strong></a></p>
<p>I bet you weren't expecting a React Native release so soon, but the team recently decided to releases smaller versions more frequently. Here are the highlights:</p>
<ul>
<li><p>React 19 support!</p>
</li>
<li><p>Simplified process to enable the React Compiler.</p>
</li>
<li><p>Metro log streaming is back in 0.78 and 0.77.1, but opt-in with a new <code>--client-logs</code> flag, and still deprecated.</p>
</li>
<li><p><code>&lt;Image&gt;</code> supports Android XML resources, unlocking possible perf improvements.</p>
</li>
<li><p><code>ReactNativeFactory</code> on iOS to ease brownfield usage in any ViewController</p>
</li>
</ul>
<p>React 19 itself unlocks many cool things:</p>
<ul>
<li><p>Actions (async transitions), <code>useActionState()</code>, <code>useOptimistic()</code>, all useful to submit forms and manage loading, error, and optimistic state</p>
</li>
<li><p>Use <code>ref</code> as a regular prop instead of <code>forwardRef()</code>, also supporting a ref cleanup function</p>
</li>
<li><p>Use <code>&lt;Context&gt;</code> instead of <code>&lt;Context.Provider&gt;</code></p>
</li>
<li><p>Read contexts and promises with <code>use()</code></p>
</li>
</ul>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://codemagic.io/migration-from-app-center/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=app_center_this_week_react">Codemagic - a great App Center alternative for React Native devs! 8x faster builds, CodePush, automated distribution. 1-month free trial!</a></p>
</li>
<li><p>📣 <a target="_blank" href="https://expo.dev/changelog/react-native-78">Expo support for React Native 0.78</a>: Due to the React 19 upgrade, v0.78 will not be supported in SDK52, but will be in the canary version. SDK 53 is scheduled for this spring and will likely upgrade directly to 0.79.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/facebook/react-native/pull/49449">Gradle Plugin PR - Add option to disable bundle compression</a>: Marc Rousavy proposing a <code>react.enableBundleCompression</code> Gradle property. Turning it off could greatly optimize Android app startup time became (and is now the new default), but it also increases the app install size.</p>
</li>
<li><p>💬 <a target="_blank" href="https://github.com/react-native-community/discussions-and-proposals/discussions/877">Making the JitPack Repository optional</a>: Android apps With v0.78, Android apps have a new <code>react.includeJitpackRepository=true</code> Gradle property. Turning it off could improve supply chain security, and may become the default in the future.</p>
</li>
<li><p>📜 <a target="_blank" href="https://reactiive.io/articles/checkbox-interactions">Checkbox Interactions - The beauty of Layout Animations</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.premieroctet.com/blog/en/universal-app-with-expo">Universal App with Expo</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/callstack/react-native-builder-bob/releases/tag/create-react-native-library%400.48.0">Create React Native Library 0.48 - Support for Nitro modules</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-screens/releases/tag/4.7.0">React Native Screens 4.7 - Fix Android formSheet transition</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://www.expoaichatbot.com/">Expo AI Chatbot - Starter to build a universal Expo + Next.js chatbot with premium option</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=OJ2u9tQCpr4">Expo - EAS Workflows: React Native CI/CD for app developers</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=P_gYeiFipsk">Catalin Miron - Apple Invites animation</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=fJb6f2Sw4Ek">Simon Grimm - The Fastest Way to Build a Mobile App (AI + Expo = Magic)</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://www.youtube.com/watch?v=wAfJqFX62ag">React Universe On Air 48 - Reanimated 4 is the Future of Smooth React Native Animations</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>📣 <a target="_blank" href="https://github.com/tc39/agendas/blob/main/2025/02.md">TC39 - Agenda for the 106th meeting</a>: Meeting in progress. Great proposals have already progressed, including <code>RegExp.escape()</code>, <code>import defer</code>, <code>Math.clamp(),</code> and more.</p>
</li>
<li><p>📣 <a target="_blank" href="https://web.dev/blog/interop-2025">Interop 2025</a>: Browsers agreed to work in priority on exciting features such as CSS anchor positioning, View Transition API, Navigation API, and many others.</p>
</li>
<li><p>📣 <a target="_blank" href="https://eslint.org/blog/2025/02/eslint-css-support/">ESLint now officially supports linting of CSS</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://e18e.dev/blog/bundling-dependencies.html">Bundling dependencies (and when not to do it)</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.bram.us/2025/02/18/css-at-function-and-css-if/">CSS @function + CSS if() = 🤯</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://kettanaito.com/blog/mocking-in-nodejs-has-just-changed-forever">Mocking in Node.js Has Just Changed Forever</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-8-rc/">TypeScript 5.8 RC - <code>erasableSyntaxOnly</code>` , <code>require(esm)</code>, dependent return type narrowing</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://nodejs.org/en/blog/release/v23.8.0">Node 23.8 - <code>URLPattern</code> API, thread names, zstd compression, using system CA</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://nodejs.org/en/blog/release/v22.14.0">Node 22.14 - <code>findPackageJSON</code>, glob <code>exclude</code>, Corepack pnpm fix</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://deno.com/blog/v2.2">Deno 2.2 - OpenTelemetry, Lint Plugins, <code>node:sqlite</code></a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://bsky.app/profile/sebastienlorber.com/post/3lifbkotlfc2v"><img src="https://thisweekinreact.com/emails/issues/222/meme.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/sebastienlorber/status/1891548981848834219"><img src="https://thisweekinreact.com/emails/issues/222/meme2.jpg" alt="alt" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #221 : State of React, React Router, Rsbuild, ProseMirror, Redux, React Hook Form, Base UI, RSC, React Admin | AI & RN, Expo...]]></title><description><![CDATA[Hi everyone!
Cyril and Matthieu from Theodo Apps here 👋, standing in for Seb to bring you the latest news from React and React Native!
This week we’ve been carefully reading the State of React 2024 survey results, and also found quite a few interest...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-221-state-of-react-react-router-rsbuild-prosemirror-redux-react-hook-form-base-ui-rsc-react-admin-ai-and-rn-expo</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-221-state-of-react-react-router-rsbuild-prosemirror-redux-react-hook-form-base-ui-rsc-react-admin-ai-and-rn-expo</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 14 Feb 2025 11:16:05 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1739531702549/ca7f4f5a-f65e-485a-bc6e-520bf78e87c4.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>Cyril and Matthieu from <a target="_blank" href="https://apps.theodo.com/en?utm_source=thisweekinreact">Theodo Apps</a> here 👋, standing in for Seb to bring you the latest news from React and React Native!</p>
<p>This week we’ve been carefully reading the <a target="_blank" href="https://2024.stateofreact.com">State of React 2024</a> survey results, and also found quite a few interesting articles. Things have been quieter when it comes to new releases.</p>
<p>Check our partner conf <a target="_blank" href="https://appjs.co?utm_source=thisweekinreact">App.js</a>, happening May 28-30 in 🇵🇱 Kraków! The biggest React Native and Expo-focused conference gives us a 15% discount with code "TWIR". Want to <a target="_blank" href="https://docs.google.com/forms/u/1/d/e/1FAIpQLSeKSqxwrTdJJavOFgK-UA25K-hJPmZ5wnZDY7UUo9ULDuckkA/viewform?usp=send_form">submit a talk</a>? Hurry—CFP is closing soon!</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://expo.dev/eas/workflows?utm_source=twir+newsletter&amp;utm_medium=email&amp;utm_campaign=twir-workflows&amp;utm_id=TWIR"><img src="https://thisweekinreact.com/emails/issues/221/eas-workflows.jpg" alt="EAS Workflows: Fast, flexible React Native CI/CD" /></a></p>
<p><a target="_blank" href="https://expo.dev/eas/workflows?utm_source=twir+newsletter&amp;utm_medium=email&amp;utm_campaign=twir-workflows&amp;utm_id=TWIR"><strong>EAS Workflows: Fast, flexible React Native CI/CD</strong></a></p>
<p>When you wake up in the morning how many different yaml files do you want to manage? With EAS Workflows, you have <strong>everything in one place</strong>.</p>
<p>• Automate builds<br />• Run e2e tests<br />• Send previews<br />• Submit to stores<br />• GitHub triggers, lint checks, slack notifications...so much more</p>
<p>With EAS Workflows you can <strong>automate and sequence</strong> all your builds/updates/submissions. Package up all the commands in a workflow and go drink a coffee. You deserve it.</p>
<p><a target="_blank" href="https://expo.dev/eas/workflows?utm_source=twir+newsletter&amp;utm_medium=email&amp;utm_campaign=twir-workflows&amp;utm_id=TWIR">Start building and deploying faster for FREE today →</a></p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<p><a target="_blank" href="https://2024.stateofreact.com"><img src="https://thisweekinreact.com/emails/issues/221/state-of-react.png" alt="State of React 2024 - Survey Results" /></a></p>
<p><a target="_blank" href="https://2024.stateofreact.com"><strong>State of React 2024 - Survey Results</strong></a></p>
<p>The results of State of React 2024 are out. It is a gold mine of information and we can’t possibly talk about everything here but here are a few highlights:</p>
<ul>
<li><p>Of the “new” React features, Server Components are the most popular with 40% of the ~7000 respondents having “used it”, probably thanks to Next.js…</p>
</li>
<li><p><code>forwardRef</code> is the most disliked React API, and is going away!</p>
</li>
<li><p>Have you heard about React’s Taint API? It looks like 80% of React devs have not, which is understandable since it’s experimental.</p>
</li>
<li><p>There’s not that much movement in the #1 spot: Next.js, TanStack Query, Axios, Jest, and Zod are still the most frequently used.</p>
</li>
<li><p>A few rising stars: Zustand and Vitest got more users, TanStack Start is #1 in interest even though almost no one has used it yet.</p>
</li>
</ul>
<p>Seb wrote the <a target="_blank" href="https://2024.stateofreact.com/en-US/conclusion/">survey conclusion</a> — be sure to check it out! 🙂</p>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://bit.dev/blog/meet-harmony-a-practical-solution-for-composability?utm_source=This-Week-In-React&amp;utm_id=7&amp;utm_medium=newsletter">Meet Harmony - An open source library for composing consistent and highly performant platforms from independent business features</a></p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/rspack-contrib/rsbuild-plugin-react-router">@rsbuild/plugin-react-router</a>: Not yet on npm, but may soon be a faster alternative to Vite for bundling React Router apps in framework mode.</p>
</li>
<li><p>📜 <a target="_blank" href="https://tigerabrodi.blog/how-react-router-works-under-the-hood">How React Router works under the hood</a>: From initial request to hydration, client-side navigation and actions.</p>
</li>
<li><p>📜 <a target="_blank" href="https://smoores.dev/post/why_i_rebuilt_prosemirror_view/">Why I rebuilt ProseMirror’s renderer in React</a>: Prosemirror (a text editor) manages its own state and virtual DOM, and it did not play well with React. This is a deep dive on the issues it caused, and the solution: using React directly instead of trying to “bridge the gap”.</p>
</li>
<li><p>📜 <a target="_blank" href="https://edspencer.net/2024/7/12/promises-across-the-void-react-server-components">Promises across the void: Streaming data with RSC</a>: React can send not-yet resolved promises from the server and finish awaiting them on the client. This article from a few months ago explains how this works.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.manuelsanchezdev.com/blog/what-to-do-with-old-react-upgrading-to-modern-react">What Do We Do with You, Old React?</a>: Tips on upgrading codebases that still use class components and “old” Redux.</p>
</li>
<li><p>📜 <a target="_blank" href="https://dagger.io/blog/replaced-react-with-go">We Replaced Our React Frontend with Go and WebAssembly</a>: They explain why this was the right choice for them, but probably don’t do this at home.</p>
</li>
<li><p>📜 <a target="_blank" href="https://marmelab.com/blog/2025/02/06/handling-relationships-in-react-admin.html">Handling Relationships in React Admin</a>: The included components (<code>&lt;ReferenceField&gt;</code> and its friends) usually do what you need, but this also explains how to build custom ones.</p>
</li>
<li><p>📜 <a target="_blank" href="https://socket.dev/blog/create-react-app-officially-deprecated?utm_medium=feed">Create React App Officially Deprecated Amid React 19 Compatibility Issues</a>: If you’ve not heard about this, catch up with this recap.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.robinwieruch.de/react-starter/">How to start a React Project in 2025</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://janhesters.com/blog/master-redux-action-best-practices-and-make-debugging-easy">Master Redux Action Best Practices &amp; Make Debugging Easy</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/react-hook-form/resolvers/releases/tag/v4.0.0">React Hook Form resolvers 4.0</a>: Adds a <a target="_blank" href="https://github.com/standard-schema/standard-schema">standard-schema</a> resolver, so you can switch easily between validation libraries that conform to the standard-schema specification.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/mui/base-ui/releases/tag/v1.0.0-alpha.6">Base UI v1.0.0 alpha 6</a>: This eagerly awaited collection of unstyled components is making its way through the alpha phase</p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=AJvbnNFHx0A">Jack Herrington - Proof That React With RSCs is 2X Faster!</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://share.transistor.fm/s/144c4947">Rocket Ship 60 - Module Federation, RSCs &amp; Universal Apps with Jack Herrington</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://pagepro.co/nextjs-hosting-cost-optimization?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=this-week-in-react-expert-session&amp;utm_id=this-week-in-react"><img src="https://thisweekinreact.com/emails/issues/221/pagepro.jpg" alt="Optimizing Vercel Costs: Real-World Strategies" /></a></p>
<p><a target="_blank" href="https://pagepro.co/nextjs-hosting-cost-optimization?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=this-week-in-react-expert-session&amp;utm_id=this-week-in-react"><strong>Optimizing Vercel Costs: Real-World Strategies</strong></a></p>
<p>Deploying Next.js apps on Vercel is easy, but optimizing hosting costs? That’s a different story.</p>
<p>Join Chris Lojniewski and Jakub Dakowicz of Pagepro on <strong>February 20th, 11 AM EST</strong> for a deep analysis of Vercel cost optimization strategies. Learn how to identify what drives your costs and reduce them with <strong>code-level optimizations</strong> like adjusting prefetching to avoid excessive function calls, choosing proper rendering methods, and trimming unnecessary data transfers.</p>
<p>They’ll also show you how to <strong>minimize reliance on Vercel’s premium features</strong> with feature externalization - offloading analytics, image optimization, and password protection. Plus, they’ll break down when enterprise pricing is worth considering and when you’re better off with alternatives. <strong>Stop overpaying, and</strong> <a target="_blank" href="https://pagepro.co/nextjs-hosting-cost-optimization?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=this-week-in-react-expert-session&amp;utm_id=this-week-in-react"><strong>register today</strong></a>.</p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<p><a target="_blank" href="https://expo.dev/blog/bolt-expo-integration-announcement"><img src="https://thisweekinreact.com/emails/issues/221/bolt-expo.jpg" alt="Bolt x Expo" /></a></p>
<p><strong>Building apps with AI</strong></p>
<p>We don't talk too much about LLMs in this newsletter (we guess you already hear about it more than enough 😅) but with all the announcements this week we thought it was a good time to give you an update.</p>
<p>The big news: <a target="_blank" href="https://expo.dev/blog/bolt-expo-integration-announcement"><strong>Bolt and Expo have partnered</strong></a> to add (React-)Native mobile apps support to Bolt. Right now you can preview your AI-generated apps on the web, but you need to download the code to go further. They plan to add an integration with EAS to deploy to production in the future.</p>
<p>Some competitors also had things to announce:</p>
<ul>
<li><p>There's now an official Expo template in Replit, and <a target="_blank" href="https://www.youtube.com/watch?v=mTm_dCF53qk">a demo video you can watch</a>. Replit has an app, so you can build apps from an app.</p>
</li>
<li><p>A startup called a0 <a target="_blank" href="https://a0.dev">launched a v0-like service</a> to generate RN apps.</p>
</li>
</ul>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://codemagic.io/migration-from-app-center/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=app_center_this_week_react">Codemagic - a great App Center alternative for React Native devs! 8x faster builds, CodePush, automated distribution. 1-month free trial!</a></p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/mrousavy/status/1889358737930068051">This is not React Native</a>: Mark is working on a new UI library based based React, JSI and NitroModules but <strong>without</strong> React Native. It uses SwiftUI and Compose under the hood.</p>
</li>
<li><p>🐦 <a target="_blank" href="https://x.com/SzymonRybczak/status/1889412928694002004">DeepSeek R1 running locally in a React App:</a> The repo is open-sourced <a target="_blank" href="https://github.com/callstackincubator/ai">here</a>. Please note that it is highly experimental and may add up to 1GB to your app.</p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/EvanBacon/expo-ai">Expo Universal React Server Components + AI chat app demo</a>: Evan Bacon just open-sourced the app he demoed on various conf talks.</p>
</li>
<li><p>💬 <a target="_blank" href="https://github.com/facebook/react-strict-dom/discussions/270">React Strict DOM - Production readiness and adoption</a>: Nicolas Gallagher shared an interesting update, mentioning RSD is used in production by Meta.</p>
</li>
<li><p>🗓 <a target="_blank" href="https://www.reactuniverseconf.com/?utm_campaign=RUC2025&amp;utm_source=TWIRpartnership&amp;utm_content=savethedate">React Universe Conf</a> - 🇵🇱 Wrocław - 2-4 September. Call for Papers is now open! Get a 10% discount with code "TWIR".</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.callstack.com/blog/bringing-webassembly-to-react-native-with-polygen">Bringing WebAssembly to React Native With Polygen</a>: Polygen allows WebAssembly to run in React Native with near-native performance by compiling modules to native code, overcoming iOS JIT restrictions. This is a novel approach compared to existing solutions like react-native-webassembly, which relied on Wasm interpretation.</p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/increase-your-expo-power-with-ignite-generators">Increase your Expo-nent power with Ignite Generators</a>: Ignite is a well known React Native app boilerplate, but it can be leveraged as a generator in any React Native project, including Expo apps, to automate the creation of screens, components, and state slices.</p>
</li>
<li><p>📜 <a target="_blank" href="https://dev.to/anishamalde/how-does-react-natives-new-architecture-affect-performance-1dkf">How does React Native's New Architecture affect performance?</a>: Anisha conducted a benchmark revealing performance improvements of up to 1000ms when enabling the New Architecture for a React Native TV app, where performance is crucial.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.callstack.com/blog/bridgeless-native-development">Bridgeless Native Development</a>: Short summary of the methods used over the years to bridge native code (NativeModule, TurboModule, NitroModule).</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.callstack.com/blog/how-to-profile-native-code-react-native-with-tracy">How to Profile Native Code in React Native Using Tracy</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://christopher.engineering/en/blog/live-activity-with-react-native/">How to build a live activity with Expo, SwiftUI and React Native</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/radon-ide/releases/tag/v1.3.0">Radon IDE v1.3</a>: built-in Network Inspector, Redux DevTools support, debugger improvements.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-gesture-handler/releases/tag/2.23.0">React Native Gesture Handler v2.23</a>: The old API will be deprecated.</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/microsoft/react-native-macos/releases/tag/react-native-macos%400.77.0">React Native macOS v0.77</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://rn-carousel.dev/migration-v4">React Native Reanimated Carousel v4.0</a>: Container Styling, Minimum Scroll Distance, Fixed Direction Scrolling, Progress Change Handling, Enhanced Pagination Components, Improved Web Support.</p>
</li>
<li><p>🎙️ <a target="_blank" href="https://www.reactnativeradio.com/episodes/rnr-321-expo-dom-with-evan-bacon">RNR 321 - Expo DOM with Evan Bacon</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>👀 <a target="_blank" href="https://github.com/nodejs/node/pull/56927"><code>require(esm)</code> has been backported to Node.js 20</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://2ality.com/2025/02/satisfies-operator.html">TypeScript: the <code>satisfies</code> operator</a>: Confirming object shape correctness without altering types, validating optional properties in objects, checking the structure of enum-like objects, ensuring proper object keys for APIs and more…</p>
</li>
<li><p>📜 <a target="_blank" href="https://macarthur.me/posts/long-tasks/">There are a lot of ways to break up long tasks in JavaScript</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://lea.verou.me/blog/2025/style-observer/">Style-observer: JS to observe CSS property changes, for reals</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://frontendmasters.com/blog/optimizing-images-for-web-performance/">Optimizing Images for Web Performance</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.bram.us/2025/02/09/css-custom-functions-teaser/">CSS Custom Functions experiments in Chrome Canary</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://prettier.io/blog/2025/02/09/3.5.0">Prettier 3.5 - TS config file, <code>objectWrap</code> option, <code>experimentalOperatorPosition</code> option</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/evanw/esbuild/releases/tag/v0.25.0">esbuild 0.25 - Various fixes and some backwards-incompatible changes</a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://x.com/andrii_sherman/status/1887492134426558849"><img src="https://thisweekinreact.com/emails/issues/221/meme.jpg" alt="React npm screenshot with downdloads at 0" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item><item><title><![CDATA[This Week In React #220: Next.js, Astro, Nuqs, CRA, React Scan, Fumadocs, Fusion, Radix, Inertia | Sortables, Contributors Summit, Windows...]]></title><description><![CDATA[Hi everyone!
This week we have a good variety of React articles and Next.js is finally adding support for Node.js runtime middleware!
Mobile developers will also discover future plans for React Native, including desktop support from Microsoft. A new ...]]></description><link>https://daily.sebastienlorber.com/this-week-in-react-220-nextjs-astro-nuqs-cra-react-scan-fumadocs-fusion-radix-inertia-sortables-contributors-summit-windows</link><guid isPermaLink="true">https://daily.sebastienlorber.com/this-week-in-react-220-nextjs-astro-nuqs-cra-react-scan-fumadocs-fusion-radix-inertia-sortables-contributors-summit-windows</guid><category><![CDATA[React]]></category><category><![CDATA[React Native]]></category><dc:creator><![CDATA[Sébastien Lorber]]></dc:creator><pubDate>Fri, 07 Feb 2025 11:23:30 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1738927374564/d9479db0-e829-4c26-90d0-6bf5fa089338.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<hr />
<p>Hi everyone!</p>
<p>This week we have a good variety of React articles and Next.js is finally adding support for Node.js runtime middleware!</p>
<p>Mobile developers will also discover future plans for React Native, including desktop support from Microsoft. A new sortables drag &amp; drop library should unlock new interactions in your app, considering it's quite hard to build all this yourself.</p>
<p>TypeScript continues to progress with a new beta including a flag to support the newly added native Node.js support, and the upcoming browser support. A polyfill for native browser support is already available!</p>
<p>I'm trying something new this week, splitting the newsletter title keywords with a <code>|</code>, following the pattern <code>React keywords | React Native keywords | Other keywords</code>. Do you think this is useful?</p>
<hr />
<p>💡 Subscribe to the <a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost">official newsletter</a> to receive an email every week!</p>
<p><a target="_blank" href="https://thisweekinreact.com?utm_source=dev_crosspost"><img src="https://thisweekinreact.com/img/TWIR_POST.png" alt="banner" /></a></p>
<hr />
<h2 id="heading-sponsor">💸 Sponsor</h2>
<p><a target="_blank" href="https://www.propelauth.com/?utm_source=newsletter&amp;utm_campaign=twinrfeb052024"><img src="https://thisweekinreact.com/emails/issues/218/propelauth.jpg" alt="PropelAuth: Make Authentication Your Advantage" /></a></p>
<p><a target="_blank" href="https://www.propelauth.com/?utm_source=newsletter&amp;utm_campaign=twinrfeb052024"><strong>PropelAuth: Make Authentication Your Advantage</strong></a></p>
<p>If your authentication isn't <strong>helping you grow</strong>, it's <strong>holding you back</strong>.</p>
<p>With <a target="_blank" href="https://www.propelauth.com/?utm_source=newsletter&amp;utm_campaign=twinrjan222024">PropelAuth</a>, you get everything you need to launch and scale your B2B product:</p>
<ul>
<li><p><strong>Easy to understand</strong> <a target="_blank" href="https://docs.propelauth.com/?utm_source=newsletter&amp;utm_campaign=twinrjan222024">documentation</a> and <strong>friendly, fast support</strong>.</p>
</li>
<li><p><strong>UIs that cover all your use cases</strong> - signup, login, MFA, organization management and more.</p>
</li>
<li><p><strong>User impersonation</strong> so you can provide top-notch support to your users.</p>
</li>
<li><p><strong>Enterprise SAML/SSO</strong> and <strong>advanced security features</strong> so you can be upmarket-ready.</p>
</li>
<li><p><strong>User insights</strong> to help you strategize and expand.</p>
</li>
</ul>
<p><a target="_blank" href="https://www.propelauth.com/?utm_source=newsletter&amp;utm_campaign=twinrjan222024">Get started today</a></p>
<hr />
<h2 id="heading-react">⚛️ React</h2>
<p><a target="_blank" href="https://github.com/vercel/next.js/pull/75624"><img src="https://thisweekinreact.com/emails/issues/220/nextjs-middleware.jpg" alt="Next.js PR - Support for Node.js middleware" /></a></p>
<p><a target="_blank" href="https://github.com/vercel/next.js/pull/75624"><strong>Next.js PR - Support for Node.js middleware</strong></a></p>
<p>A much-awaited feature for the Next.js community. The latest v15.2 canary has a new <code>experimental.nodeMiddleware</code> flag letting you opt-in for <code>runtime: ‘nodejs’</code>, enabling you to use Node.js APIs in middleware, and remove the constraints of being limited to APIs compatible with the edge runtime.</p>
<p>Vercel middleware has also been <a target="_blank" href="https://x.com/galstar/status/1886832573482934706">rebuilt from the ground up</a> to support multiple runtimes and run on <a target="_blank" href="https://vercel.com/blog/introducing-fluid-compute">Fluid compute</a>, a new cost-efficient way for Vercel to run serverless functions.</p>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://convex.link/0dtC5qE">Add a collaborative document editor to your app</a></p>
</li>
<li><p>👀 <a target="_blank" href="https://github.com/remix-run/react-router/pull/11871">Remix PR - Split Route Modules</a>: Introduce new <code>future.unstable_splitRouteModules</code> flag so that the route component and its clientLoader can be downloaded in parallel instead of sequentially.</p>
</li>
<li><p>🗓️ <a target="_blank" href="https://la-conf.typescript.paris/?utm_source=thisweekinreact">Paris TypeScript La Conf'</a> - 🇫🇷 Paris - 28 February - Last call to join the first ever TypeScript conference in the heart of Paris! Get 20% off tickets with code "TWIR"!</p>
</li>
<li><p>📖 <a target="_blank" href="https://motion.dev/docs/radix">Integrate Motion with Radix</a>: New docs page presenting integration examples for exit and layout animations.</p>
</li>
<li><p>📜 <a target="_blank" href="https://cekrem.github.io/posts/single-responsibility-principle-in-react/">Single Responsibility Principle in React: The Art of Component Focus</a>: I agree with this practice of designing your React app in “layers”.</p>
</li>
<li><p>📜 <a target="_blank" href="https://armand-salle.fr/post/persisting-form-data-in-react-a-modern-approach-with-nuqs/">Persisting Form Data in React: A Modern Approach with Nuqs</a>: Introduces a convenient lib to use search parameters in a typesafe way with integrations for Next.js and React Router.</p>
</li>
<li><p>📜 <a target="_blank" href="https://dnlytras.com/blog/phoenix-react-inertia">Using Phoenix with React and Inertia</a>: Explains the surprising technical choice of combining an Elixir/Phoenix backend with a React SPA, including the challenges encountered and caveats. The Inertia protocol permits stitching both technologies through an adapter.</p>
</li>
<li><p>📜 <a target="_blank" href="https://macwright.com/2025/01/30/ast-grep-to-ban-bad-nesting">An ast-grep rule to ban bad HTML nesting in React</a>: A possible alternative to ESLint rule.</p>
</li>
<li><p>📜 <a target="_blank" href="https://sergiodxa.com/tutorials/load-dynamic-stylesheets-in-react-router">How to Load Dynamic Stylesheets in React Router</a>: Presenting techniques to load custom styles per authenticated user/company, using resource routes and meta functions.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.openstatus.dev/blog/data-table-redesign">The React data-table I always wanted</a>: A full-featured demo of TanStack Table + shadcn/ui + Nuqs, documenting lessons learned. A good inspiration to build your own table.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.dash0.com/blog/how-to-inspect-react-server-component-activity-with-next-js">How to inspect React Server Component Activity with Next.js</a>: Using Next.js <code>instrumentation.js</code> and OpenTelemetry.</p>
</li>
<li><p>📜 <a target="_blank" href="https://tigerabrodi.blog/how-to-build-a-library-in-react">How to build a library in React</a>: Implementing and publishing a <code>useContextSelector</code> hook</p>
</li>
<li><p>📦 <a target="_blank" href="https://astro.build/blog/astro-520/">Astro 5.2 - Tailwind 4 support, trailing slash redirects, option to disable React streaming</a>: Streaming might be incompatible with runtime CSS-in-JS libraries.</p>
</li>
<li><p>📦 <a target="_blank" href="https://edspencer.net/2025/2/3/mdx-prompt-composable-prompts-with-jsx">mdx-prompt - Composable LLM Prompts with JSX</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/aidenybai/react-scan/releases/tag/v0.1.2">React Scan 0.1.2 - Re-render history, components tree</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://fumadocs.vercel.app/blog/v15">Fumadocs 15.0 - Tailwind 4 support</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/redwoodjs/redwood/releases/tag/v8.5.0">Redwood 8.5</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/pmndrs/xr/releases/tag/v6.6.0">React Three XR 6.6 - IWER debugging tools for mixed reality apps</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/mui/material-ui/releases/tag/v7.0.0-alpha.0">MUI 7.0 alpha</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=sa3XHjG1Kgs">Aaron Francis - Introducing Fusion - Seamlessly combine React and Vue with Laravel</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=aujVi7ipkfM">Theo - Create React App is finally dead</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=QepeuHTxiLo">Jack Herrington - Stop Using Recoil, Use This Instead!</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://open.spotify.com/episode/45LTSjvCA5k5YAC7EM4ixk">This Month in React 2025-01 - Movement on CRA, Redwood.js dead?</a></p>
</li>
</ul>
<hr />
<h2 id="heading-sponsor-1">💸 Sponsor</h2>
<p><a target="_blank" href="https://sentry.io/resources/find-fix-test/?utm_source=bytes&amp;utm_medium=paid-community&amp;utm_campaign=general-fy25q4-evergreen&amp;utm_content=newsletter-biweeklydemo-register"><img src="https://thisweekinreact.com/emails/issues/220/sentry.jpg" alt="See what’s broken and where with Sentry" /></a></p>
<p><a target="_blank" href="https://sentry.io/resources/find-fix-test/?utm_source=bytes&amp;utm_medium=paid-community&amp;utm_campaign=general-fy25q4-evergreen&amp;utm_content=newsletter-biweeklydemo-register"><strong>See what’s broken and where with Sentry</strong></a></p>
<p>Sentry's new bi-weekly live demos will show you how to catch, fix and prevent issues fast. Join one of their engineers Thursdays at 1 PM ET for 25 minute tour—no slides, no fluff, just code-level visibility from pre-release to production. <a target="_blank" href="https://sentry.io/resources/find-fix-test/?utm_source=bytes&amp;utm_medium=paid-community&amp;utm_campaign=general-fy25q4-evergreen&amp;utm_content=newsletter-biweeklydemo-register">RSVP</a></p>
<hr />
<h2 id="heading-react-native">📱 React-Native</h2>
<p><a target="_blank" href="https://react-native-sortables-docs.vercel.app/"><img src="https://thisweekinreact.com/emails/issues/220/rnsortables.jpg" alt="React Native Sortables" /></a></p>
<p><a target="_blank" href="https://react-native-sortables-docs.vercel.app/"><strong>React Native Sortables</strong></a></p>
<p>A new powerful React Native library for re-ordering items with drag &amp; drop gestures, including features such as:</p>
<ul>
<li><p>Support for Grid and Flex layouts</p>
</li>
<li><p>Support for different item sizes, spacing, and arrangements</p>
</li>
<li><p>Auto-scrolling when dragging outside screen</p>
</li>
<li><p>Seamless layout animations</p>
</li>
<li><p>Simple API, full TypeScript support</p>
</li>
<li><p>Compatible with Expo and both architectures</p>
</li>
</ul>
<hr />
<ul>
<li><p>💸 <a target="_blank" href="https://go.clerk.com/scFbrAu">Clerk - Build a daily workout tracker with Clerk, Convex, and Expo</a></p>
</li>
<li><p>📣 <a target="_blank" href="https://www.swift.org/blog/the-next-chapter-in-swift-build-technologies/">Apple open-sourcing Swift Build engine</a></p>
</li>
<li><p>💬 <a target="_blank" href="https://github.com/react-native-community/discussions-and-proposals/pull/871">React Native RFC - Oklab color space support</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://reactnative.dev/blog/2025/02/03/react-native-core-contributor-summit-2024">React Native Core Contributor Summit 2024 Recap</a>: Many contributors met last September before React Universe to discuss the future of React Native, including various topics such as the release process, the New Architecture, Lean Core 2.0, upcoming support for new Web APIs, and more.</p>
</li>
<li><p>📜 <a target="_blank" href="https://devblogs.microsoft.com/react-native/2025-01-29-new-architecture-on-0-76-0-77/">Microsoft - A look into the new architecture on RNW 0.76 and 0.77</a>: On Windows, the New Architecture is available in preview but isn’t enabled by default yet. Newly introduced features such as Modal support only support the New Architecture.</p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/universal-and-app-links">iOS Universal Links and Android App Links with Expo Router and EAS Hosting</a>: Using web URLs for deep linking provides benefits over custom app scheme links. Easy to set up with Expo Router.</p>
</li>
<li><p>📜 <a target="_blank" href="https://expo.dev/blog/dom-component-use-case">An elegantly simple DOM Component use case</a>: Useful to quickly integrate fancy web things, such as D3 charts.</p>
</li>
<li><p>📜 <a target="_blank" href="https://addjam.com/blog/2025-02-04/using-live-activities-react-native-app/">Using Live Activities in a React Native App</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://reactiive.io/articles/bottom-sheet-animation">Building a BottomSheet from scratch in React Native</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.monarchmoney.com/blog/pre-built-ios-binaries-reducing-react-native-dev-start-time-from-minutes-to">Pre-built iOS Binaries: Reducing React Native Dev Start Time from Minutes to Seconds</a></p>
</li>
<li><p>📜 <a target="_blank" href="https://www.devas.life/supporting-ios-share-extensions-android-intents-on-react-native/">Supporting iOS Share Extensions &amp; Android Intents on React Native</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion-labs/react-native-audio-api/releases/tag/0.4.0">Audio API 0.4</a>: Enables real-time waveform visualizations (<a target="_blank" href="https://x.com/sek_micha/status/1886814160735834540">cool demo</a>).</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/callstackincubator/react-native-bottom-tabs/releases/tag/react-native-bottom-tabs%400.8.4">Bottom Tabs 0.8.4 - Custom JS tabs</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/Shopify/react-native-skia/releases/tag/v1.11.0">Skia 1.11 - Reconciler perf improvements</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/facebook/metro/releases/tag/v0.81.1">Metro 0.81.1 - Performance improvements and fixes</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/software-mansion/react-native-screens/releases/tag/4.6.0">Screens 4.6 - Important fixes</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://axelmarciano.github.io/expo-open-ota/">Expo Open OTA - A Go implementation of the Expo Updates protocol, designed for production</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=3V43hhMIUXE">Fernando Rojo - Major 2025 Updates: Mix Blend Mode, CSS Animations, SwiftUI</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=ym51mhxFvPQ">Dan’s Lab - How to Create a Video Feed using Expo</a></p>
</li>
<li><p>🎙️ <a target="_blank" href="https://www.reactnativeradio.com/episodes/rnr-320-silky-smooth-animations">RNR 320 - Silky Smooth Animations with Catlin Miron</a></p>
</li>
</ul>
<hr />
<h2 id="heading-other">🔀 Other</h2>
<ul>
<li><p>📜 <a target="_blank" href="https://adventures.nodeland.dev/archive/you-should-not-use-urlpattern-to-route-http/">You should not use URLPattern to route HTTP requests on the server</a>: The upcoming Node.js 23 URLPattern feature, based on regexp, is not scalable enough.</p>
</li>
<li><p>📜 <a target="_blank" href="https://www.prisma.io/blog/from-rust-to-typescript-a-new-chapter-for-prisma-orm">From Rust to TypeScript: A New Chapter for Prisma ORM</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-8-beta/">TypeScript 5.8 beta - <code>erasableSyntaxOnly</code>, require(esm), dependent return type narrowing</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://guybedford.com/es-module-shims-2.0">ES Module Shims 2.0 - Polyfill for native ES module features</a>: Already supports TC39 Type Annotations stripping, letting you run TypeScript code with <code>erasableSyntaxOnly</code> natively in the browser today, similar to Node.js!</p>
</li>
<li><p>📦 <a target="_blank" href="https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#610-2025-02-05">Vite 6.1</a></p>
</li>
<li><p>📦 <a target="_blank" href="https://humanwhocodes.com/blog/2025/01/introducing-mentoss-fetch-mocker/">Mentoss - fetch() mocker for server/browser runtimes</a></p>
</li>
<li><p>🎥 <a target="_blank" href="https://www.youtube.com/watch?v=cRC9DlH45lA">Angular: The Documentary</a></p>
</li>
</ul>
<hr />
<h2 id="heading-fun">🤭 Fun</h2>
<p><a target="_blank" href="https://x.com/Steve8708/status/1886228651538264250"><img src="https://thisweekinreact.com/emails/issues/220/meme.jpg" alt="alt" /></a></p>
<p><a target="_blank" href="https://x.com/byteab/status/1880222322071859586"><img src="https://thisweekinreact.com/emails/issues/220/meme2.jpg" alt="alt" /></a></p>
<p>See ya! 👋</p>
]]></content:encoded></item></channel></rss>