This Week In React #158: Astro, Server Components, Next.js, Remix, Chakra, Skia, Biome, CSS, Node.js...
Tags: react, reactnative
Published: 2023-09-07 11:25:10

---
series: This Week In React
canonical_url: https://thisweekinreact.com/newsletter/158
---

Hi everyone!

We're covering 2 weeks of news, including 2 great releases: Astro 3.0 and VisionCamera 3.0. There have also been a lot of interesting articles, so I've had to filter a bit!

Bun 1.0 coming out tonight. I'm curious to see what they have planned. Having tested it on unit tests as a replacement for Jest, it's really very fast.

The React-Native EU conference kicks off today. I spotted some [🐦 very interesting talks](https://twitter.com/sebastienlorber/status/1696837186677530813), particularly the one on Static Hermes.

For those who want to visit Italy, go to [ReactJS Day](https://2023.reactjsday.it/) in Verona on 27 October 27. The conference is offering [-10% on tickets](https://ti.to/grusp/reactjsday-2023/discount/media_TWIR) and 2 online/remote tickets to our readers, which I'm giving away to the first 2 people who reply to this email and claim them.

I often forget to mention it here, but I "build in public". You can check out my latest [monthly Indie Hackers report](https://www.indiehackers.com/product/french-react-newsletter) and [🐦 more Twitter details](https://twitter.com/sebastienlorber/status/1699065823959421109).

---

💡 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)](https://thisweekinreact.com?utm_source=dev_crosspost)

---

## 💸 Sponsor

[![Frontendmasters](https://thisweekinreact.com/emails/issues/158/frontendmasters.jpg)](https://frontendmasters.com/learn/react/?utm_source=newsletter&utm_medium=thisweekinreact&utm_campaign=reactpath)

**[FrontendMasters – Complete React.js Learning Path to Senior React Developer](https://frontendmasters.com/learn/react/?utm_source=newsletter&utm_medium=thisweekinreact&utm_campaign=reactpath)**

Learn React.js from the ground up to advanced topics like performance, testing, and code quality. Start by building a real-world app in the Complete Introduction to React. Continue with Intermediate React, integrating the most popular tools from the ecosystem. Then learn performance, TypeScript, and even Next.js, the fullstack React framework!

---

## ⚛️ React

[![Astro 3.0](https://thisweekinreact.com/emails/issues/158/astro3.jpg)](https://astro.build/blog/astro-3/)

[**Astro 3.0**](https://astro.build/blog/astro-3/)

This new version of Astro innovates in particular through the use of the new View Transition API, and the ability to navigate fluidly and animatedly from one page to another, while preserving the state of the components displayed. This reduces the need for a SPA in many use cases.

Other notable improvements include:

- Image Optimization stable
- Faster Rendering Performance: Astro components render 30-75% faster.
- SSR Enhancements for Serverless: New ways to connect to your hosting platform.
- HMR Enhancements for JSX: Fast Refresh support for React and Preact.
- Optimized Build Output: Cleaner and more performant HTML.

---

[![Making Sense of React Server Components](https://thisweekinreact.com/emails/issues/158/rsc.jpg)](https://www.joshwcomeau.com/react/server-components/)

[**Making Sense of React Server Components**](https://www.joshwcomeau.com/react/server-components/)

Josh Comeau is back with a great introduction to React Server Components, taken from his [course](https://www.joyofreact.com/) that should become available next week. The many animated diagrams make it easy to understand this new React paradigm.

---

- 💸 [Zero To Shipped - Master Fast-Paced Fullstack Development and **Finally** ship that product](https://www.zerotoshipped.com/)
- 🐦 [Remix v2 pre-release](https://twitter.com/remix_run/status/1696525340640936190): if you have already enabled [future flags v2](https://remix.run/blog/future-flags), you should be able to upgrade easily and remove these flags.
- 🐦 [Dan Abramov joins Bluesky](https://twitter.com/dan_abramov/status/1695566446007386214): Dan has left Meta and joined this Twitter competitor based on a cross-platform Expo app. I think this is great news, we may have gained a great evangelist [to promote cross-platform and Expo](https://twitter.com/dan_abramov/status/1699476986727399933).
- 🐦 [WIP testing docs for Next.js App Router](https://twitter.com/leeerob/status/1698758756924825723)
- 🧑‍🎓 [Next.js App Router - Forms and Mutations docs](https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations): new doc page explaining the use of Server Actions and the React `useFormStatus` and `useOptimistic` hooks.
- 💬 [Next.js Tim Neutkens' Deep Dive - Caching and Revalidating](https://github.com/vercel/next.js/discussions/54075)
- 📜 [Parents & Owners in React: Data Flow](https://julesblom.com/writing/parents-owners-data-flow): original interactive and visual article, explaining the problem of props drilling and how to avoid it with slotted components. Explains the concepts of parent tree and owner tree. The props drilling problem becomes clearly visible in the diagrams.
- 📜 [Challenging Established Norms: Making Component Fetching the Exception](https://jjenzz.com/making-component-fetching-the-exception/): an interesting thought that encourages you to run your queries at route level to avoid waterfalls, and use composition to avoid props drilling.
- 📜 [Rust Server Components](https://anto.pt/articles/rust-server-components): proposes to partially reproduce RSC, MDX and Suspense using Rust, HTMX and a few other libs. "the Rust equivalent of T3 Stack". Nice to read, even though I don't do Rust. Not convinced that the end result solves all the problems RSCs do.
- 📜 [Chakra, Panda and Ark - What's the plan?](https://www.adebayosegun.com/blog/chakra-panda-ark-whats-the-plan): Segun answers a number of questions about his libraries. Chakra v3 arrives in Q4, but will still use Emotion. The addition of "use client" makes it easier to use in RSCs. Adoption of the Radix `asChild` pattern.
- 📜 [How to Pass a Component as a Prop in React](https://www.totaltypescript.com/pass-component-as-prop-react): Matt shares some TypeScript + React typing tips. The type to implement "as" prop is quite scary 😬.
- 📜 [Handling type-safe toast notifications with zod in Remix applications](https://alemtuzlak.hashnode.dev/handling-toasts-in-remix): explains how to use the Remix flash session to give feedback after an action.
- 📜 [Optimizing Next.js cold starts for Vercel](https://holocron.so/blog/optimizing-next.js-cold-starts-for-vercel)
- 📜 [Strongly Typing React Props with TypeScript](https://www.totaltypescript.com/react-props-typescript)
- 📜 [You Might Not Need A useEffectAsync Hook](https://krassnig.dev/blog/you-might-not-need-a-use-effect-async-hook.html)
- 📜 [Web Developers, CSS-in-JS is Ruining Your Product](https://cord.com/blog/migrating-from-css-in-js-to-vanilla-extract)
- 📜 [Build your own headless UI components](https://www.jacobparis.com/content/react-headless-submenus)
- 📜 [Building a toast component](https://emilkowal.ski/ui/building-a-toast-component)
- 📦 [next-flat-routes](https://github.com/ifyio/next-flat-routes)
- 📦 [Puck - Self-hosted drag and drop editor for React](https://github.com/measuredco/puck)
- 📦 [react-prod-sourcemaps](https://github.com/markerikson/react-prod-sourcemaps)
- 📦 [Reshaped 2.2 - Now available on NPM](https://reshaped.so/content/blog/2.2)
- 👥 [ReactJS Day](https://2023.reactjsday.it/) (Verona 🇮🇹, Octobre 27, 2023) is offering us [-10% on conference tickets](https://ti.to/grusp/reactjsday-2023/discount/media_TWIR) with code "media_TWIR"

---

## 💸 Sponsor

[![A Non-Cloud Alternative to Google Forms that has it all](https://thisweekinreact.com/emails/issues/155/surveyjs.jpg)](https://surveyjs.io/?utm_source=thisweekinreact&utm_medium=email)

**[A Non-Cloud Alternative to Google Forms that has it all](https://surveyjs.io/?utm_source=thisweekinreact&utm_medium=email)**

If you are looking to set up a robust form management system fully integrated in your IT infrastructure that allows you to retain full control over the data flow, and you don’t want to spend months and thousands of dollars to get it up and running, then SurveyJS is the way to go!

SurveyJS is a product suite of four open-source JavaScript libraries that allow you to create and edit multiple dynamic JSON-based forms in a drag-and-drop form builder, render them in your React app and store sensitive survey data within your in-house infrastructure. You can then render your custom surveys and forms as editable PDF files in a browser and visualize survey results with interactive charts and tables. [Learn more now](https://surveyjs.io/?utm_source=thisweekinreact&utm_medium=email).

---

## 📱 React-Native

[![VisionCamera 3.0](https://thisweekinreact.com/emails/issues/158/visioncamera3.jpg)](https://github.com/mrousavy/react-native-vision-camera/releases/tag/v3.0.0)

[**VisionCamera 3.0**](https://github.com/mrousavy/react-native-vision-camera/releases/tag/v3.0.0)

The new version of VisionCamera has just been released. Highlights:

- Full Android Camera2 rewrite
- Custom GPU OpenGL Video Pipeline
- New Camera Features
- New Frame Processor Engine (react-native-worklets-core)
- New Frame Processor Plugin API

Marc took the decision to finally [remove the integration with Skia](https://github.com/mrousavy/react-native-vision-camera/pull/1740) to keep the code size and complexity reasonable on VisionCamera.

In [**Pose Detection using VisionCamera V3, TFLite and Skia**](https://mrousavy.com/blog/VisionCamera-Pose-Detection-TFLite), he explains what is possible with such integration. The results are very impressive.

[![Pose Detection using VisionCamera V3, TFLite and Skia](https://thisweekinreact.com/emails/issues/158/frame-processing-skia.jpg)](https://mrousavy.com/blog/VisionCamera-Pose-Detection-TFLite)

---

- 📜 [Things to look forward to in React Native](https://buttondown.email/whatever_jamie/archive/things-to-look-forward-to-in-react-native/): offers a good overview of what we can expect from React-Native in the years to come. Web Conformance, Static Hermes, Node-API, React Server Components...
- 📜 [React Native Performance Measuring and Monitoring Tools](https://semaphoreci.com/blog/react-native-performance-measuring-monitoring-tools)
- 🧵 [All gestures from React Native Gesture Handler explained with real-world examples](https://twitter.com/kacperkapusciak/status/1698719844089160189)
- 👀 [Expo - Understand your users and grow your app with EAS Insights](https://expo.dev/changelog/2023/08-22-insights)
- 📦 [expo-ahap - Apple Haptic and Audio Pattern](https://github.com/EvanBacon/expo-ahap)
- 📦 [react-native-z-view](https://github.com/intergalacticspacehighway/react-native-z-view)
- 📦 [Universal Medusa - E-commerce starter using Expo, Solito, Next.js, Nativewind, Medusa](https://github.com/bidah/universal-medusa/)
- 🔗 [Awesome Universal React - Universal frameworks, libraries, design systems, apps and resources](https://github.com/axeldelafosse/awesome-universal-react)
- 🎥 [Experimental Blur Gradient in React Native](https://www.youtube.com/watch?v=oboF_H1MApo)
- 🎥 [iPhone wallpapers, but in React Native Skia](https://www.youtube.com/watch?v=Apqd749v34I)
- 👥 [React Native EU 2023](https://www.react-native.eu/) (Wrocław 🇵🇱, September 7–8) is offering us [-15% on conference tickets](https://ti.to/react-native-eu/2023/discount/thisweekinreact15) with code "thisweekinreact15".

---

## 🔀 Other

- 📊 [State of CSS 2023 - Survey Results](https://2023.stateofcss.com/)
- 📜 [My Node.js is a bit Rusty](https://gal.hagever.com/posts/my-node-js-is-a-bit-rusty)
- 📜 [Announcing Biome - The official fork of Rome (unmaintained)](https://biomejs.dev/blog/annoucing-biome)
- 📜 [View Transitions Break Incremental Rendering](https://ericportis.com/posts/2023/view-transitions-break-incremental-rendering/)
- 📜 [Use web components for what they’re good at](https://nolanlawson.com/2023/08/23/use-web-components-for-what-theyre-good-at/)
- 📜 [Type safe CSS design systems with @property](https://nerdy.dev/cant-break-this-design-system)
- 👀 [TypeScript 5.3 Iteration Plan](https://github.com/microsoft/TypeScript/issues/55486)
- 📦 [Announcing TypeScript 5.2](https://devblogs.microsoft.com/typescript/announcing-typescript-5-2/)
- 📦 [Node 20.6 - Built-in .env file support](https://nodejs.org/en/blog/release/v20.6.0)
- 📦 [Firefox 117 - CSS Nesting is now widely available](https://www.mozilla.org/en-US/firefox/117.0/releasenotes/)
- 📦 [Espresso Build - Experimental next-gen package registry, package manager, and toolchain](https://espresso.build/)

---

## 🤭 Fun

[![alt](https://thisweekinreact.com/emails/issues/158/meme.jpg)](https://twitter.com/sebastienlorber/status/1687456078198394882)


See ya! 👋