# This Week In React #190 : Suspense, Internals Explorer, DevTools, RSC + Vite, Codemod, Astro, INP, composition, Reassure, Fumadocs, tscircuit...

---

Hi everyone!

I (Seb) am back, and happy to share that the newsletter crossed **40 000 subscribers**! 🎉

Thanks for your support and for sharing the newsletter with your friends.  
Any idea to make it even better, share feedback, or submit a link? Just reply to this email!

This week the React 19 stable release that we expected very soon is delayed a bit due to a controversial change in how Suspense behaves.

On the React Native side, the first RC of 0.75 is expected very soon, running under React 19.

---

💡 Subscribe to the [official newsletter](https://thisweekinreact.com?utm_source=dev_crosspost) to receive an email every week!

[![banner](https://thisweekinreact.com/img/TWIR_POST.png align="left")](https://thisweekinreact.com?utm_source=dev_crosspost)

---

## 💸 Sponsor

[![The Category-Defining React Grid for Your Enterprise ](https://thisweekinreact.com/emails/issues/190/advertfinal.jpg align="left")](https://1771technologies.com/graphitegrid)

[**The Category-Defining React Grid for Your Enterprise**](https://1771technologies.com/graphitegrid)

Data grids are complex components of web applications, but current solutions are inefficient, require a lot of maintenance, and perform poorly. [Graphite Grid](https://1771technologies.com/graphitegrid) transforms the landscape with two key features: retargetable rendering and reactive signal state.

**Graphite Grid** separates grid state from view logic, allowing a single unified state model to support a variety of render targets, declaratively or imperatively. It includes a **DOM and Canvas** renderer, giving developers flexible, high-performance options 🚀.

Graphite Grid is declarative and consistent, leveraging state signals to ensure seamless integration with your application. Designed with **React in mind**, it is the only JavaScript data grid built with React's state management primitives. [Try it now!](https://1771technologies.com/graphitegrid/demo)

---

## ⚛️ React

![Suspense with siblings](https://thisweekinreact.com/emails/issues/190/suspense.jpg align="left")

[**React 19 and Suspense - A Drama in 3 Acts**](https://tkdodo.eu/blog/react-19-and-suspense-a-drama-in-3-acts)

React 19 RC.0 was released 2 weeks ago and could have become the React 19 stable release we've been waiting for. Unfortunately, it contains a controversial change to the Suspense behavior, leading the React team to talk and decide to delay the release until a solution is found.

Unlike React 18, in v19 if a component suspends, its siblings won't render anymore, leading to potential waterfalls. In many situations (using “fetch-on-render” pattern, using React.lazy()...), async code might run sequentially instead of in parallel. There’s a good reason motivating this change: the ability to display Suspense fallbacks sooner, and avoid rendering components uselessly. In theory, waterfalls could be avoided if requests were “hoisted” at the router level (using the “render-as-you-fetch” pattern), but many existing apps do not do that and would suffer from degraded performances.

**Related resources**:

* 📜 [How React 19 (Almost) Made the Internet Slower](https://blog.codeminer42.com/how-react-19-almost-made-the-internet-slower/)
    
* 🔗 [React 19 Issue - Disabling prerendering siblings of suspended components breaking common pattern](https://github.com/facebook/react/issues/29898)
    
* 🎥 [Jack Herrington - Big Suspense Changes in React 19: Explained In Code](https://www.youtube.com/watch?v=sgnw8dRZa3Q)
    
* 🎥 [Josh tried coding - React 19 has a Problem](https://www.youtube.com/watch?v=PZYXTFnP2po)
    

---

![React Internals Explorer - screenshot + logo](https://thisweekinreact.com/emails/issues/190/rie.jpg align="left")

[**React Internals Explorer - easily see how React works**](https://jser.dev/2024-05-11-introducing-rie/)

A new interactive playground to see how React works under the hood. It’s possible to explore internals step-by-step. You can even select the React version, and it’s particularly relevant for today’s issue because it can show the Suspense behavior difference between React 18 and React 19!

---

* 💸 [Meilisearch - Build search-as-you-type for React](https://www.meilisearch.com/with/react?utm_campaign=sponsoring&utm_content=june-19&utm_source=thisweekinreact)
    
* 👀 [React Core PR - Badge Environment Name on Thrown Errors from the Server](https://github.com/facebook/react/pull/29846): A convenient DX improvement to know where the error comes from thanks to a \[server\] console badge.
    
* 🐦 [React Router 7 - Ryan Florence Sneak Peek video](https://x.com/ryanflorence/status/1801388170891903252)
    
* 🗓️ [The Geek Conf](https://www.thegeekconf.com/?utm_source=thisweekinreact) - 🇩🇪 Berlin - 18 & 25 July - Get a 10% discount with code "TWIR". Tomasz Sapeta (Expo/Software Mansion), Carmen Huidobro (DevCraft Academy), and Atila Fassina (CrabNebula) will speak !
    
* 🗓 [dotJS](https://www.dotjs.io/?utm_source=thisweekinreact) - 🇫🇷 Paris - June 27 - Just 1 week left before the conference! 10% discount with code "TWIR"
    
* 📜 [Codemod partnering with the React team](https://codemod.com/blog/react-announcement): The Codemod company is partnering with React to maintain the react-codemod repo and help us upgrade to React 19.
    
* 📜 [Future of Astro series - Zero-JS view transitions, Astro Content Layer, and Server Islands](https://astro.build/blog/future-of-astro-zero-js-view-transitions/): Astro betting on new browser features like cross-document view transitions makes us question the need for client-side routing and SPAs. I hope they’ll figure out how to persist component state across navigation in this new mode. They also plan to improve their (CMS integration, composable, using LibSQL) and provide a new “server:defer” directive (similar to Suspense, but not using streaming).
    
* 📜 [Demystifying INP: New tools and actionable insights](https://vercel.com/blog/demystifying-inp-new-tools-and-actionable-insights): Vercel CTO explains that the new Core Web Vital INP (Interaction to Next Paint) is a misleading metric. Surprisingly preloading data can even give you a lower INP score. Using a React example from the Next.js docs site (js/ts code block language picker), he explains that user input must be acknowledged within 200ms. He suggests using either his package “await-interaction-response” or React transitions to separate user input handling from rendering the meaningful result.
    
* 📜 [Experimenting with React Server Components and Vite](https://danielnagy.me/posts/Post_usaivhdu3j5d): A quite advanced article recreating a RSC setup with Vite from scratch. Very useful resource for framework authors looking to support RSCs. All this work to run a blog for your cat Dan 😄.
    
* 📜 [How to compose JavaScript functions that take multiple parameters](https://jrsinclair.com/articles/2024/how-to-compose-functions-that-take-multiple-parameters-epic-guide/): Shows how to use a compose() function with React useState, among other things that will interest functional programming enthusiasts.
    
* 📜 [React Form with Loading State (Pending Action)](https://www.robinwieruch.de/react-form-loading-pending-action/): Shows 3 possible ways to can get the loading state of a form, using useActionState, useFormStatus and useTransition.
    
* 📜 [Redwood “Love reloaded" - A DX Story](https://redwoodjs.com/blog/love-reloaded-a-dx-story): Redwood briefly explains the tradeoffs of 3 instant feedback mechanisms. For their RSC experience, they’ll start by shipping live reload, and plan to implement fast refresh later.
    
* 📜 [Using React Query with Astro](https://hounie.me/writings/how-to-use-react-query-with-astro/): Using nanostores instead of React Context.
    
* 📜 [Next.js Server Actions with next-safe-action](https://www.davegray.codes/posts/nextjs-server-actions-with-next-safe-action): The library handles typesafety and input validation (with zod).
    
* 📜 [Hybrid i18n with Next and Astro - 4-part series](https://www.ericburel.tech/blog/hybrid-i18n-next-astro-1)
    
* 📜 [Write SOLID React Hooks](https://www.perssondennis.com/articles/write-solid-react-hooks)
    
* 📜 [Full Stack Web Push API Guide - Add push notifications to Remix Indie Stack](https://www.bocoup.com/blog/full-stack-web-push-api-guide)
    
* 📦 [React DevTools 5.3 - Dim StrictMode extra console logs, fixes and refactors](https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md#530)
    
* 📦 [Vercel AI SDK 3.2](https://vercel.com/blog/introducing-vercel-ai-sdk-3-2): you can now build generative UI chatbots client-side with just useChat() and streamText in your React projects
    
* 📦 [Reassure 1.0 - Performance testing companion for React and React Native](https://github.com/callstack/reassure/releases/tag/reassure%401.0.0)
    
* 📦 [Fumadocs 12 - Documentation framework for Next.js](https://fumadocs.vercel.app/blog/v12)
    
* 📦 [react-distributed-components - Effortlessly compose client and server components](https://github.com/daniel-nagy/react-distributed-components)
    
* 📦 [tscircuit - Design Electronics with React & AI](https://tscircuit.com/)
    
* 📦 [Relay 17.0](https://github.com/facebook/relay/releases/tag/v17.0.0)
    
* 📦 [Sonner 1.5 - Toast library - x3 smaller and many other improvements](https://github.com/emilkowalski/sonner/releases/tag/v.1.5.0)
    
* 📦 [Remix Privacy Stack - Indie Stack + GDPR/CCPA flows + self-hosted](https://www.bocoup.com/blog/announcing-the-privacy-stack-for-remix)
    
* 🎥 [Delba - Next.js: Authentication (Best Practices for Server Components, Actions, Middleware)](https://www.youtube.com/watch?v=N_sUsq_y10U)
    
* 🎥 [Jolly Coding - Why You Should Use React Aria Components](https://www.youtube.com/watch?v=lTPh6NGLAmk)
    

---

## 💸 Sponsor

[![Join The React Native Performance Optimization Course](https://thisweekinreact.com/emails/issues/190/AdCourseTWIR.jpg align="left")](https://hubs.li/Q02B4mFd0)

[**Join The React Native Performance Optimization Course**](https://hubs.li/Q02B4mFd0)

**No App Can Be A Patchwork Planet**

So if you want to react well to its performance bottlenecks, you need to understand their origins.

This [live training program](https://hubs.li/Q02B4mFd0) will help you **solve optimization mysteries based on a data-driven approach called DMAIC 🕵️**

**5** Interactive Modules, **3** Seasoned React Native Experts, and **1** Future-Proof Framework that will nurture your development lifecycle holistically.

Want to join the mission? 🚀 [**Sign up for the waiting list today**](https://hubs.li/Q02B4mFd0) and mark your calendar for July 9-10!

---

## 📱 React-Native

This section is authored by [Benedikt](https://twitter.com/bndkt).

![](https://thisweekinreact.com/emails/issues/190/rn.jpg align="left")

As there is no “big headline news” this week, I want to take the opportunity to celebrate two projects within the React Native community. The team behind React Native [visionOS received the React Open Source Award](https://x.com/michalchudziak/status/1801632496100008121) in the category “Most Exciting Use of Technology,” and the team at Infinite Red released the [300th episode of the React Native Radio](https://reactnativeradio.com/episodes/rnr-300-special-episode-ask-us-anything) podcast this week. Congratulations to both teams and thank you for the work you all do for our community!

---

* 💸 [WithFrame - Pre-Built React Native Components](https://withfra.me/?utm_source=thisweekinreact&utm_medium=email&utm_campaign=quick-link--3)
    
* 🐦 [React Native visionOS receives React Open Source Award](https://x.com/michalchudziak/status/1801632496100008121): Congratulations!
    
* 🐦 [New React Native IDE beta with speed improvements](https://x.com/kzzzf/status/1801367065086816449)
    
* 👀 [React Native 0.75 PRs - bump dependency to React 19](https://github.com/facebook/react-native/pull/44990)
    
* 👀 [React Native PR - requestIdleCallback](https://github.com/facebook/react-native/pull/44759) : Schedule background and low-priority work on the main event loop.
    
* 📖 [Expo Docs - React Compiler - Available from Expo SDK 51](https://docs.expo.dev/guides/react-compiler/): Still experimental, of course.
    
* 🗓 [Chain React Conf](https://chainreactconf.com/?utm_source=thisweekinreact) - 🇺🇸 Portland, OR - July 17-19. The U.S. React Native Conference is back with engaging talks and hands-on workshops! Get 15% off your ticket with code “TWIR”
    
* 📜 [Infinite Red maintains a list of the Top React Native Apps](https://shift.infinite.red/top-react-native-apps-1cae78fdee22): I didn’t know Burger King and Pizza Hut apps were built with RN. If you know of a great app that should be on that list, you can nominate it - even if it’s not a fast food chain!
    
* 📜 [Reanimated Can Block Your JS Thread](https://andrei-calazans.com/posts/reanimated-blocking-js-thread/): Yes, you can shoot yourself in the foot when using shared values, this is a good reminder to evaluate whether a value needs to be a Shared Value.
    
* 📜 [Testing Expo Web3 Apps With Wagmi and Anvil](https://www.callstack.com/blog/testing-expo-web3-apps-with-wagmi-and-anvil): Even if you’re like me and instantly fall asleep when you hear the word Web3 these days, this article is a good example walkthrough of different aspects of testing, including mocking.
    
* 📜 [Baseball + React Native = Success](https://www.thewidlarzgroup.com/portfolio/flexpro-grip): I love seeing apps built with RN that are a bit unusual (and not just consist of lists of records). This is an example of such an app for the FlexPro Grip, a device that Baseball players use to train their grip.
    
* 📜 [Bringing native AI to your mobile apps with ExecuTorch— part I — iOS](https://blog.swmansion.com/bringing-native-ai-to-your-mobile-apps-with-executorch-part-i-ios-f1562a4556e8)
    
* 📦 [react-navigation-bottom-sheet](https://github.com/th3rdwave/react-navigation-bottom-sheet): I’m a big fan of @gorhom/bottom-sheet, this new library integrates it with React Navigation.
    
* 📦 [react-native-screens 3.32.0 - Back button display mode on iOS, navigationBarTranslucent prop on Android](https://github.com/software-mansion/react-native-screens/releases/tag/3.32.0)
    
* 📦 [react-native-config 1.5.2 adds visionOS support](https://github.com/lugg/react-native-config/releases/tag/v1.5.2)
    
* 📦 [react-native-gesture-handler 2.17.0](https://github.com/software-mansion/react-native-gesture-handler/releases/tag/2.17.0)
    
* 🎙️ [RNR 300 - Special Episode: Ask Us Anything!](https://reactnativeradio.com/episodes/rnr-300-special-episode-ask-us-anything)
    
* 🎙️ [Rocket Ship 43 - React Native Best Practices Template with Youssouf El Azizi](https://share.transistor.fm/s/cc24a442)
    
* 🎥 [notJust․dev - Building an e-Scooter App with React Native and Mapbox](https://www.youtube.com/live/uxj8jnlooP8)
    
* 🎥 [Simon Grimm - 5 React Native Tips to Wow Your Users](https://www.youtube.com/watch?v=pZgjlh5ezd4)
    
* 🎥 [Baptiste Devessier - XState at Expo](https://www.youtube.com/watch?v=HuXnUGfHKZs): TIL that Expo Updates uses XState.
    

---

## 🔀 Other

* 📣 [Updates from the 102nd TC39 meeting - Promise.try, isError, Discard Bindings, RegExp.escape, Iterators…](https://dev.to/hemanth/updates-from-the-102nd-tc39-meeting-i4i)
    
* 📜 [CSS Conditionals (if) on Custom Properties](https://geoffgraham.me/conditionals-on-custom-properties/)
    
* 📜 [Introducing Drizzle](https://frontendmasters.com/blog/introducing-drizzle/)
    
* 📜 [Node.js is Here to Stay](https://blog.platformatic.dev/nodejs-is-here-to-stay)
    
* 📜 [The latest in CSS and web UI: I/O 2024 recap](https://developer.chrome.com/blog/new-in-web-ui-io-2024?hl=en)
    
* 📜 [Using Arktype in Place of Zod - How to Adapt Parsers](https://dev.to/seasonedcc/using-arktype-in-place-of-zod-how-to-adapt-parsers-3bd5)
    
* 📜 [Blazing Fast Websites with Speculation Rules](https://www.debugbear.com/blog/speculation-rules)
    
* 📦 [Node 22.3 - Snapshot testing, module mocking (experimental), fs.cp() stable](https://nodejs.org/en/blog/release/v22.3.0)
    
* 📦 [htmx 2.0](https://htmx.org/posts/2024-06-17-htmx-2-0-0-is-released/)
    

---

## 🤭 Fun

[![alt](https://thisweekinreact.com/emails/issues/190/meme.jpg align="left")](https://x.com/trashh_dev/status/1803151970078957936)

See ya! 👋