This Week In React #153: Astro, MUI, Next.js, Remix, React-Query, AsyncLocalStorage, Reanimated, React-Tweet, TypeScript...

Hi everyone!

It looks like not everyone is on holiday: there's still plenty of news this week, both on the React and React-Native fronts.

I've got a question for you (you can email me back): would you prefer me to put direct links, or links to tweets?

direct: 1-click access to the resource
tweet: read related conversations

💡 Subscribe to the official newsletter to receive an email every week!

💸 Sponsor

Enterprise Grade APIs for Feeds, Chat, & Video!

Stream is the maker of enterprise-grade APIs and SDKs that help product and engineering teams solve two common problems at scale: in-app chat and social activity feeds.

With Stream, developers can integrate any type of messaging or feed experience into their app in a fraction of the time it would take to build these features from scratch. Stream Chat makes it easy for developers to integrate rich, real-time messaging into their applications.

Stream provides robust client-side SDKs for popular frameworks such as React, React-Native, Expo, Flutter, Android, Angular, Compose, Unreal, and iOS.
Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account.

Try the new React Video tutorial!

⚛️ React

Astro 2.9

A new version of Astro has just been released with a long-awaited experimental feature: View Transitions. This makes it easy to create fluid, animated transitions between HTML pages, without having to resort to client-side routing: there's no need for a <Link> component as with Next.js or Remix. For a React developer, this makes the framework more appealing and competitive in terms of UX compared with the classic SPA mode we're used to, while keeping a model simpler. Careful: these transitions won't preserve your React state across navigation, which could be a problem. Note support View Transitions remains weak, but is making rapid progress and can be considered as a progressive enhancement, plus Astro offers a fallback mode.

👤 Dan Abramov leaves his job at Meta, but remains in the React core team
👤 Meta is hiring a React DX Engineering Manager (London)
🧑‍🎓 New Jotai tutorial
💬 Material UI RFC - Zero-runtime CSS-in-JS: MUI plans to develop a zero-runtime CSS-in-JS solution inspired by Linaria/Compiled, compatible with RSCs. Also explains why it cannot rely on any existing solution.
💡 Server Components allow to pass promises over the network
💡 forwardRef type fix that works with generics
📜 React Query and React Context: Dominik explains how putting React-Query data into a React context can be useful in making your data dependencies more explicit. The future useSuspenseQuery hook could also be a good alternative.
📜 Next 13 cookies() and headers() explained: explains how Next.js uses AsyncLocalStorage (and later AsyncContext?) to expose its cookies() and headers() functions to RSCs.
📜 Kuma UI vs Panda CSS – My first impressions: quick comparison of the 2 new CSS-in-JS libraries. The author settled on Kuma UI.
📜 Recipe kits, a great alternative to installable libraries: discusses the emergence and interest of UI kits that are not distributed via npm: Shadcn UI, Tailwind UI (and soon Tailwind Catalyst).
📜 Tailwind Connect 2023 Recap: written summary of the conference, which also presented Catalyst, the React UI Kit currently under development.
📜 Introducing React-Tweet: Vercel offers an RSC-compatible package for efficiently displaying tweets in web pages.
📜 React Server Components Tips: 5 good tips and mental models for understanding and using CSRs.
📜 Origins of JSX and Why It Exists
📜 Lazy Loading in React and Next.js Apps
📦 Storybook 7.1 - in-app onboarding, zero-config styling support, TypeScript snippets...
📦 TanStack Query v5 beta - mostly stable, migration guide and code mods available
📦 Remix 1.19 - Improved dev server networking option, ESBuild metafiles, better Node polyfills...
📦 Redwood v6.0.0 RC
📦 Vaul - Unstyled drawer component for React
📦 Framer-Motion 10.13 - Scroll API
📦 Downshift v8
🎥 Jack Herrington - Why Panda: CSS for RSCs is Changing the Game
🎥 Addy Osmani - The Cost Of JavaScript - 2023
🎥 Jamon Holmgren - The Suspense is killing me
🎥 Lee Robinson - Responding to Reddit on the Next.js App Router

💸 Sponsor

Porkbun.com - The Best Domain Name Registrar

Porkbun offers hundreds of domain extensions for React and React-Native developers from .dev and .app to .cloud, .xyz, and .ai — all at the lowest prices around! Every domain name at Porkbun comes with tons of free features like:

SSL Certificates
WHOIS Privacy
DNS
URL Forwarding
Web and Email Hosting Trials

Check out our AI Generated Search tool that’s changing the way people look for domain names. All this is backed by incredible support 365 days a year plus thousands of real five-star reviews on Trustpilot.

Click the link and get $1 off your next domain name registration at Porkbun.com!

📱 React-Native

Solito 4

New version of the project that unifies React-Native and Next.js under shared abstractions. With v4, it is now possible to use Next.js App Router. New APIs have been introduced for this purpose. Note that React-Native does not yet support React-Server Components: it is still a bit early to be able to use them in a cross-platform way.

🎉 Expo Launch Party: an Expo launch week scheduled for the week of 8 August?
👥 Debugging React Native Apps End-to-End: AMA with Experts from Meta and Sentry - 26 July
📜 Redefining Navigation in React Native: the Potential of expo-router: good analysis of the trade-offs between Expo Router (v1) and React-Navigation.
📜 Setting Up Storybook Web and Native with Expo Router v2, SDK 49, and TypeScript
📜 EAS Build Will Require Using M1/M2 Builders This Fall
📦 Yoga v2.0.0-beta.2: v2 of the React-Native layout engine is in beta. The aim is to comply with the W3C spec, which is great news for writing cross-platform React code! Note that Yoga is not just for mobile developers: it is also used by many other projects such as Satori, React-Native-Skia, React-Three-Flex and the React Ink CLI renderer.
📦 Reanimated 3.4.0: a great release with Shared Element Transitions, improvements to Worklets, React-Native 0.72 support and new APIs like useReducedMotion.
📦 React-Native-Lottie v6 - New Architecture support
📦 Tamagui Takeout: template that self-updates to ship cross-platform apps. Paid product aiming to fund the open-source project.
🎥 Jamon Holmgren - Hacking Xcode with Colo Loco!
🎙️ The React Native Show Podcast #24 - React Native at scale with Jacob Suñol (Abbott)
🎙️ React Native Radio 272 - Real Life React Native: Nick Alekhine at NTWRK

🧑‍💻 Jobs

🧑‍💼 Passionfroot - Senior Full-stack Engineer (Remix) - €160k+, Berlin/remote

Passionfroot's mission is to empower the independent businesses of tomorrow via YouTube, Podcasts, Social Media, and Newsletters. Join us in building a tool that will empower creators globally to build scalable, sustainable businesses.

🧑‍💼 Callstack - Senior React Native Developer - Fully Remote, PLN 21-32k net on B2B, monthly

Do you want to work on the world's most used apps? Would you like to co-create the React Native technology? Join the Callstack team of React & React Native leaders. Check our website for more details. We are looking forward to seeing your application - show us what you've got!

🧑‍💼 G2i - 100% Remote React Native Jobs

We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.

💡 How to publish an offer?