# This Week In React #153: Server Components, Astro, MUI, Next.js, Remix,  Yoga, Reanimated, React-Tweet, Expo-Router, Lottie, Bun, 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](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

[![Enterprise Grade APIs for Feeds, Chat, & Video!](https://thisweekinreact.com/emails/issues/153/stream.jpg align="left")](https://getstream.io/video/voice-calling/?utm_source=thisweekinreact&utm_medium=sponsorship&utm_content=&utm_campaign=thisweekinreact_July2023_video_klmh22)

[**Enterprise Grade APIs for Feeds, Chat, & Video!**](https://getstream.io/video/docs/react/?utm_source=thisweekinreact&utm_medium=sponsorship&utm_content=&utm_campaign=thisweekinreact_July2023_video_klmh22)

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**](https://getstream.io/chat/sdk/react/?utm_source=thisweekinreact&utm_medium=sponsorship&utm_content=&utm_campaign=thisweekinreact_July2023_video_klmh22), [**React-Native**](https://getstream.io/chat/sdk/react-native/?utm_source=thisweekinreact&utm_medium=sponsorship&utm_content=&utm_campaign=thisweekinreact_July2023_video_klmh22), 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!**](https://getstream.io/video/docs/react/?utm_source=thisweekinreact&utm_medium=sponsorship&utm_content=&utm_campaign=thisweekinreact_July2023_video_klmh22)

---

## ⚛️ React

[![Astro 2.9](https://thisweekinreact.com/emails/issues/153/astro.jpg align="left")](https://thisweekinreact.com/emails/issues/153/astro.jpg)

[**Astro 2.9**](https://astro.build/blog/astro-290/)

A new version of Astro has just been released with a long-awaited experimental feature: [View Transitions](https://developer.chrome.com/docs/web-platform/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](https://caniuse.com/?search=View%20Transition%20API) 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](https://twitter.com/dan_abramov/status/1682029195843739649)
    
* 👤 [Meta is hiring a React DX Engineering Manager (London)](https://twitter.com/sebastienlorber/status/1683529524414148608)
    
* 🧑‍🎓 [New Jotai tutorial](https://twitter.com/jotaijs/status/1682075111040630784)
    
* 💬 [Material UI RFC - Zero-runtime CSS-in-JS](https://github.com/mui/material-ui/issues/38137): 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](https://twitter.com/ryantotweets/status/1681696002883944451)
    
* 💡 [forwardRef type fix that works with generics](https://twitter.com/sebastienlorber/status/1683753462058610688)
    
* 📜 [React Query and React Context](https://tkdodo.eu/blog/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](https://raphael.badia.cc/posts/next-13-cookies-and-headers-explained): explains how Next.js uses `AsyncLocalStorage` (and [later AsyncContext?](https://twitter.com/sebastienlorber/status/1639183216799100928)) to expose its `cookies()` and `headers()` functions to RSCs.
    
* 📜 [Kuma UI vs Panda CSS – My first impressions](https://www.devas.life/my-first-impressions-of-kuma-ui-and-panda-css/): quick comparison of the 2 new CSS-in-JS libraries. The author settled on Kuma UI.
    
* 📜 [Recipe kits, a great alternative to installable libraries](https://andrewingram.net/posts/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](https://tailwindcss.com/blog/2023-07-18-tailwind-connect-2023-recap): written summary of the conference, which also presented Catalyst, the React UI Kit currently under development.
    
* 📜 [Introducing React-Tweet](https://vercel.com/blog/introducing-react-tweet): Vercel offers an RSC-compatible package for efficiently displaying tweets in web pages.
    
* 📜 [React Server Components Tips](https://echobind.com/post/react-server-components-tips): 5 good tips and mental models for understanding and using CSRs.
    
* 📜 [Origins of JSX and Why It Exists](https://dodov.dev/blog/origins-of-jsx-and-why-it-exists)
    
* 📜 [Lazy Loading in React and Next.js Apps](https://www.fullctx.dev/p/lazy-loading-in-react-and-nextjs)
    
* 📦 [Storybook 7.1 - in-app onboarding, zero-config styling support, TypeScript snippets...](https://storybook.js.org/blog/storybook-7-1/)
    
* 📦 [TanStack Query v5 beta - mostly stable, migration guide and code mods available](https://twitter.com/TkDodo/status/1683425919770173442)
    
* 📦 [Remix 1.19 - Improved dev server networking option, ESBuild metafiles, better Node polyfills...](https://github.com/remix-run/remix/releases/tag/remix%401.19.0)
    
* 📦 [Redwood v6.0.0 RC](https://community.redwoodjs.com/t/redwood-v6-0-0-rc-is-now-available/5044)
    
* 📦 [Vaul - Unstyled drawer component for React](https://twitter.com/emilkowalski_/status/1683832539490942978)
    
* 📦 [Framer-Motion 10.13 - Scroll API](https://twitter.com/mattgperry/status/1681663921072078851)
    
* 📦 [Downshift v8](https://github.com/downshift-js/downshift/releases/tag/v8.0.0)
    
* 🎥 [Jack Herrington - Why Panda: CSS for RSCs is Changing the Game](https://www.youtube.com/watch?v=fKSemrudovo)
    
* 🎥 [Addy Osmani - The Cost Of JavaScript - 2023](https://www.youtube.com/watch?v=ZKH3DLT4BKw)
    
* 🎥 [Jamon Holmgren - The Suspense is killing me](https://www.youtube.com/watch?v=3iRF63A_xbo)
    
* 🎥 [Lee Robinson - Responding to Reddit on the Next.js App Router](https://www.youtube.com/watch?v=-YO_z14dUyI)
    

---

## 💸 Sponsor

[![Porkbun.com - The Best Domain Name Registrar](https://thisweekinreact.com/emails/issues/150/porkbun.png align="left")](https://porkbun.com/?coupon=TWIREACT&utm_source=TWIREACT&utm_medium=Newsletter&utm_campaign=twirjune2023)

[**Porkbun.com**](http://Porkbun.com) [**\- The Best Domain Name Registrar**](https://porkbun.com/?coupon=TWIREACT&utm_source=TWIREACT&utm_medium=Newsletter&utm_campaign=twirjune2023)

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](https://porkbun.com/?coupon=TWIREACT&utm_source=TWIREACT&utm_medium=Newsletter&utm_campaign=twirjune2023) at [Porkbun.com](http://Porkbun.com)!

---

## 📱 React-Native

[![Solito 4](https://thisweekinreact.com/emails/issues/153/solito4.jpg align="left")](https://github.com/nandorojo/solito/releases/tag/v4.0.0)

[**Solito 4**](https://github.com/nandorojo/solito/releases/tag/v4.0.0)

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](https://expo.dev/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](https://sentry.io/resources/ama-debugging-react-native-apps-end-to-end/)
    
* 📜 [Redefining Navigation in React Native: the Potential of expo-router](https://www.bam.tech/en/article/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](https://twitter.com/mauro_codes/status/1682765642963861505)
    
* 📜 [EAS Build Will Require Using M1/M2 Builders This Fall](https://blog.expo.dev/eas-build-will-require-using-m1-m2-builders-this-fall-df40e8a9e930)
    
* 📦 [Yoga v2.0.0-beta.2](https://twitter.com/sebastienlorber/status/1683874650785210369): 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](https://twitter.com/swmansion/status/1683848307452289025): a great release with [Shared Element Transitions](https://twitter.com/piaskowyk/status/1683846036878393349), improvements to Worklets, React-Native 0.72 support and new APIs like `useReducedMotion`.
    
* 📦 [React-Native-Lottie v6 - New Architecture support](https://twitter.com/matinzd/status/1683623846992044034)
    
* 📦 [Tamagui Takeout](https://twitter.com/tamagui_js/status/1681925619997868033): 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!](https://www.youtube.com/watch?v=ucEBfIZOap8)
    
* 🎙️ [The React Native Show Podcast #24 - React Native at scale with Jacob Suñol (Abbott)](https://www.youtube.com/watch?v=tGGa885ycrg)
    
* 🎙️ [React Native Radio 272 - Real Life React Native: Nick Alekhine at NTWRK](https://reactnativeradio.com/episodes/rnr-272-real-life-react-native-nick-alekhine-at-ntwrk)
    

---

## 🧑‍💻 Jobs

🧑‍💼 [**Passionfroot - Senior Full-stack Engineer (Remix) - €160k+, Berlin/remote**](https://passionfroot.recruitee.com/o/senior-fullstack-engineer)

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**](https://www.callstack.com/senior-react-native-developer)

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**](https://twitter.com/gabe_g2i/status/1563204813881425926?s=20&t=ArRLC77BpRwXXCdx8fnUqw)

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](https://twitter.com/gabe_g2i) to learn more and don't forget to mention This Week in React.

💡 [How to publish an offer?](https://thisweekinreact.com/sponsor)

---

## 🔀 Other

* [Bun 0.7 - Improved Node.js compat, Vite support, Worker, AsyncLocalStorage...](https://twitter.com/jarredsumner/status/1682383403684106242)
    
* [Rspack 0.2.9](https://twitter.com/rspack_dev/status/1684039960230522880)
    
* [Microsoft TypeChat - Helps get TypeScript type-safe reponses from AI / LLM](https://microsoft.github.io/TypeChat/blog/introducing-typechat)
    
* [TypeScript and the dawn of gradual types](https://github.com/readme/featured/typescript-gradual-types)
    
* [pkg-size - Find the true size of an npm package (thanks to WebContainers)](https://twitter.com/privatenumbr/status/1681206731127554048)
    
* [Node.js Best Practices List - 2023 update](https://twitter.com/nodepractices/status/1683835221840654337)
    
* [How Turborepo is porting from Go to Rust](https://vercel.com/blog/how-turborepo-is-porting-from-go-to-rust)
    
* [Introducing Valibot, a &lt; 1kb Zod Alternative](https://www.builder.io/blog/introducing-valibot)
    
* [5 Inconvenient Truths about TypeScript](https://oida.dev/5-truths-about-typescript/)
    

---

## 🤭 Fun

[![alt](https://thisweekinreact.com/emails/issues/153/meme.jpg align="left")](https://twitter.com/fireship_dev/status/1682866059098095616)

See ya! 👋