This Week In React #178: Remix and Vite, Type-safe Children, Astro DB, React Compiler, Firebolt...
Tags: react, reactnative
Published: 2024-03-22 09:52:42

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

Hi everyone!

This week is different and important for me. I took a little newsletter break, and instead of having no issue (as I did before), this time it's [Benedikt](https://twitter.com/bndkt) writing the whole newsletter. Back to you Benedikt!

---

💡 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

[![Headless CMS with Inline Visual editing for Next.js](https://thisweekinreact.com/emails/issues/169/reactbricks.jpg)](https://reactbricks.com?utm_source=twir&utm_campaign=twir_2024&utm_medium=email)

**[Headless CMS with Inline Visual editing for Next.js](https://reactbricks.com?utm_source=twir&utm_campaign=twir_2024&utm_medium=email)**

[**Set up a project in just 1 minute**](https://reactbricks.com/sign-up?utm_source=twir&utm_campaign=twir_2024&utm_medium=email) with the CLI and define your own Visual blocks as React components to convey your pixel-perfect corporate brand, using any CSS framework. Try the new Next.js starter with Server Components!

Content editors can easily use content blocks to compose pages visually, just like using a word processor, without compromising the design.

React Bricks is enterprise-ready with Digital Assets Management, Advanced SEO, Real-time Collaboration, Scheduled Publishing, Multilanguage, integration with external APIs, Approval Workflow, Multiple environments, Change history and more.

Trusted by corporate clients such as The Weather Channel, Deel.com, La Banque Postale, leading eCommerce sites and over 9,000 users worldwide.
[**Get started today!**](https://reactbricks.com/sign-up?utm_source=twir&utm_campaign=twir_2024&utm_medium=email)

---

## ⚛️ React

[![Remix Vite-first](https://thisweekinreact.com/emails/issues/178/remix_heart_vite.jpg)](https://twitter.com/markdalgleish/status/1770224011831890036)

🐦 [**Remix is now Vite-first**](https://twitter.com/markdalgleish/status/1770224011831890036)

After a relatively short period of transition where Remix introduced a Vite-integration marked as unstable, this has now been marked stable and immediately became the new default. I personally really enjoyed seeing this quick transition and think Remix plus Vite is a strong combination, and having Vite be the development environment and compiler for Remix allows the Remix team to decrease their surface area and concentrate on core framework capabilities, which is a good thing! A newly created Remix project now only has a Vite config file referencing a Remix plugin, which I think is a beautiful instance of simplification!

- 💸 [Document Generation with Apryse - Transforming Templates into Tailored Documents with React](https://apryse.com/blog/docx-generation-from-templates-react?utm_source=email&utm_medium=newsletter&utm_campaign=thisweekinreact4)
- 📜 [Astro DB: A Deep Dive](https://astro.build/blog/astro-db-deep-dive/): Astro partnered with Turso to integrate libSQL. Also interesting to read why they thought about and ultimately didn’t choose Cloudflare’s D1.
- 📜 [The Astro Developer Portal](https://astro.build/blog/dev-portal/): An official theme marketplace for Astro.
- 📜 [How Next.js breaks React Fundamentals](https://ondrejvelisek.github.io/how-nextjs-breaks-react-fundamentals/): I don’t agree with the title and the conclusion, but it’s still an interesting exploration of the limitations of RSC (most of them not specific to Next.js).
- 📜 [Type system of the React compiler](https://www.recompiled.dev/blog/type-system/): This is quite deep and theoretical, but if you want to learn more about the relation of compilers and type inference, it might be interesting to you.
- 📜 [Two Types of Composition](https://kyleshevlin.com/two-types-of-composition/): I think sometimes it’s good to revisit the fundamentals of what we’re doing as developers every day. Composition is one of React’s basic principles, and this article looks at the basics of nesting composition and merging composition.
- 📜 [Migrate Next.js app away from "Vercel + PlanetScale" to "Fly.io"](https://www.crispyscript.com/articles/13)
- 📜 [Astro Studio - first impression](https://maciekpalmowski.dev/blog/astro-studio-first-impression/)
- 📜 [You Are Leaking Your Next.js Application Features](https://www.rexforde.com/blog/conditional-render-problem)
- 📜 [Embracing the Future and Moving Back Again: From Server Actions to tRPC](https://documenso.com/blog/removing-server-actions)
- 📜 [You Can't Make Children "Type Safe" in React & TypeScript](https://www.totaltypescript.com/type-safe-children-in-react-and-typescript)
- 📜 [How to test React custom hooks and components with Vitest](https://www.thisdot.co/blog/how-to-test-react-custom-hooks-and-components-with-vitest)
- 📜 [OpenTelemetry in Practice: Instrumenting JavaScript Apps for Tracing](https://marmelab.com/blog/2024/03/14/opentelemetry-in-practice-instrumenting-javascript-apps-for-tracing.html)
- 🗓 [React Connection - 22 April](https://reactconnection.io/) + [React-Native Connection - 23 April](https://reactnativeconnection.io/) - 🇫🇷 Paris - 2 days of web/mobile conferences. Get a -20% discount with code "TWIR".
- 📦 [Firebolt](https://firebolt.dev/): A new simple React framework that reminds a bit of Remix. See also the [introductory blog post](https://firebolt.dev/blog/introducing-firebolt). RSC support is in progress.
- 📦 [remix-nitro - An example on how to run Remix with Nitro with HMR using Vite's 5.1 experimental runtime API](https://github.com/alessandrojcm/remix-nitro)
- 📦 [remix-hono v0.0.16 - now on Hono v4](https://github.com/sergiodxa/remix-hono/releases/tag/v0.0.16)
- 📦 [Next.js AI Chatbot 2.0 - Now on AI SDK 3.0](https://vercel.com/changelog/next-js-ai-chatbot-2-0)
- 🎥 [Daniel Kanem - Understanding the Steps of Migrating Your Remix App to Vite.js](https://www.youtube.com/watch?v=CTgQhNFqn5E)
- 🎥 [Brooks Lybrand - Deploying Remix to GitHub Pages](https://www.youtube.com/watch?v=EO_-KwSslWQ)
- 🎥 [Theo Browne - Million Lint](https://youtu.be/fcY9TthQnI4?si=bROdHJmIumw24AlO)
- 🎥 [UI Engineering - Goodbye, forwardRef](https://www.youtube.com/watch?v=m4QbeS9BTNU)
- 🎥 [Jack Herrington - Pigment-CSS: Material-UI Fixed on NextJS and React 19](https://www.youtube.com/watch?v=fyja_ldjxwA)
- 🎙️ [Rocket Ship 34 - React Architecture Tips with Charlotte Isambert](https://share.transistor.fm/s/48a4b223)
- 🎙️ [PodRocket - Partial pre-rendering in Next.js with Delba de Oliveira and Wyatt Johnson](https://podrocket.logrocket.com/partial-pre-rendering-next-js-delba-oliveira-wyatt-johnson)

---

## 💸 Sponsor

[![FormBuilder SDK for React](https://thisweekinreact.com/emails/issues/171/tripetto.jpg)](https://tripetto.com/sdk/this-week-in-react/?utm_source=thisweekinreact&utm_medium=sponsor&utm_campaign=sdk)

**[FormBuilder SDK for React](https://tripetto.com/sdk/this-week-in-react/?utm_source=thisweekinreact&utm_medium=sponsor&utm_campaign=sdk)**

A complete form solution for React projects, used by Fortune 500 companies. With easy-to-use open-source components for building and running powerful forms inside your React app. Extensively documented, up in minutes, and deeply customizable.

- Builder for creating powerful forms;
- Runner for deploying forms and collecting data;
- Flexible form layouts (conversational, chat etc.) and styling;
- Extensible with custom question types;
- Complete docs, examples, and demos;
- Self-hosted without external dependencies;
- Start, test, and perfect for free.

TWIR exclusive: [Get 25% off your FormBuilder SDK license](https://tripetto.com/sdk/this-week-in-react/?utm_source=thisweekinreact&utm_medium=sponsor&utm_campaign=sdk).

---

## 📱 React-Native

[![React Native RSC](https://thisweekinreact.com/emails/issues/178/rn_rsc.jpg)](https://github.com/mui/material-ui/tree/master/packages/pigment-css-react)

🐦 [**Demo of React Server Components on React Native**](https://twitter.com/SzymonRybczak/status/1769747995862384756)

Conference season is coming up, and the announcements get fewer as people are saving the best for the big stages. One of the topics I’m looking most forward to hearing more about at the upcoming conferences is React Server Components on React Native. Now Szymon Rybczak from Callstack has published an interesting demo of RSC running in RN. I’m really curious to learn more about it, and glad that Szymon has announced that he’ll publish a detailed blog post and the code soon.

- 💸 [React Universe Conf - Last days to submit talk proposals: CFP closes on March 22. Don’t want to speak at RUC? Grab your early bird ticket!](https://www.reactuniverseconf.com/?utm_campaign=React_Universe_Conf&utm_source=email&utm_content=This_Week_in_React)
- 📖 [Expo Docs: Migrate from CodePush](https://docs.expo.dev/eas-update/codepush/): Visual Studio App Center is scheduled for retirement on March 31, 2025. Users of CodePush should start thinking about alternatives.
- 📜 [What is the Expo Router?](https://www.themorrow.digital/blog/what-is-the-expo-router)
- 📜 [React navigation & state machine - Perfecting app flows](https://www.bam.tech/article/react-navigation-state-machine-perfecting-app-flows): Interesting exploration of how to realize complex flows in React Navigation, using either a state machine or a custom navigator.
- 📜 [Expo Blog - 12 tips for setting up your next Expo project](https://expo.dev/blog/12-tips-for-setting-up-your-next-expo-project): Some of them quite obvious (use TS), but others like app variants for dev and prod or automatic build versioning are valuable reminders.
- 📜 [Ship OTA (Over-The-Air) When in an Emergency](https://www.callstack.com/blog/ship-over-the-air-when-in-an-emergency)
- 📦 [TenTap - typed, customizable, and extendable Rich Text editor for React Native](https://github.com/10play/10tap-editor)
- 📦 [React Native 0.74.0-rc.4](https://github.com/facebook/react-native/releases/tag/v0.74.0-rc.4)
- 📦 [expo-atlas - Experimental library to inspect bundle stats from Metro](https://github.com/byCedric/expo-atlas)
- 📦 [New Expo Dev tools plugin for debugging React Native MMKV](https://www.npmjs.com/package/@dev-plugins/react-native-mmkv)
- 📦 [First Expo SDK 51 canary releases showing up](https://www.npmjs.com/package/expo/v/51.0.0-canary-20240318-dd8f245)
- 🎙️ [RNR 291 - RNR Explains: The Dev Menu](https://reactnativeradio.com/episodes/rnr-291-rnr-explains-the-dev-menu)
- 🎥 [The Best Stack for Universal React Apps](https://www.youtube.com/watch?v=2yvjgwTZOUY)
- 🎥 [Let’s build a Native Library using Expo Modules](https://www.youtube.com/watch?v=UczTzTBYRhA)
- 🎥 [How to create an App Icon and Splash Screen for an Expo Project](https://www.youtube.com/watch?v=QSNkU7v0MPc)

---

## 🔀 Other

- 👀 [TypeScript 5.5 PR merged - Infer type predicates from function bodies using control flow analysis](https://github.com/microsoft/TypeScript/pull/57465)
- 📜 [Improved Cloudflare Workers testing via Vitest and workerd](https://blog.cloudflare.com/workers-vitest-integration/)
- 📜 [Build a Node App with TypeScript](https://www.totaltypescript.com/typescript-and-node)
- 📜 [Type Predicate Inference: The TS 5.5 Feature No One Expected](https://www.totaltypescript.com/type-predicate-inference)
- 📜 [Hide extension requests plus more Network panel improvements](https://developer.chrome.com/blog/network-panel-improvements?hl=en)
- 📜 [require(esm) in Node.js](https://joyeecheung.github.io/blog/2024/03/18/require-esm-in-node-js/)
- 📜 [Comparing ECMAScript Modules and CommonJS](https://wanago.io/2024/03/18/ecmascript-modules-esm-commonjs/)
- 📜 [A Beginner's Guide to Node.js Worker Threads](https://betterstack.com/community/guides/scaling-nodejs/nodejs-workers-explained/)
- 📦 [Elysia 1.0 - Bun web framework](https://elysiajs.com/blog/elysia-10)
- 📦 [Bun 1.0.31](https://bun.sh/blog/bun-v1.0.31)
- 📦 [AnalogJS 1.0 - Angular meta-framework](https://dev.to/analogjs/announcing-analogjs-10-19an)
- 📦 [Rsbuild 0.5 - Lightning CSS](https://rsbuild.dev/community/releases/v0-5)

---

## 🤭 Fun

[![Dropped Animation Frames](https://thisweekinreact.com/emails/issues/178/meme.jpg)](https://twitter.com/ryanflorence/status/1769842701904822774)


See ya! 👋