# This Week In React#149: Panda CSS, React-Native 0.72, Server Actions, Isograph, Remix, Gatsby, Storybook, OpenNext, Wrap-Balancer, Docusaurus...

---

Hi everyone!

This week has been busier than last. In particular, there have been 2 great releases, one of them I was [eagerly waiting for](https://twitter.com/sebastienlorber/status/1671433559280607235) to hit publish!

* Panda CSS: a very promising CSS-in-JS library
    
* React-Native 0.72: great improvements, particularly those related to Metro
    

---

💡 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

[![Tina.io is a headless CMS for Markdown-powered sites](https://thisweekinreact.com/emails/issues/140/tinacms.jpg align="left")](https://tina.io/?utm_source=newsletter&utm_term=this-week-in-react)

[**Tina.io**](http://Tina.io) [**is a headless CMS for Markdown-powered sites**](https://tina.io/?utm_source=newsletter&utm_term=this-week-in-react)

* Editing UI for your Markdown files
    
* UI for MDX components
    
* Supports static (SSG) and server-side rendering (SSR)
    
* Option for visual editing (live-preview)
    
* Build with reusable blocks
    

Test a starter site

* [Docusaurus](https://github.com/tinacms/tinasaurus) (Github)
    
* [Next.js + Tailwind with visual editing](https://github.com/tinacms/tina-cloud-starter) (Github)
    

Or run  `npx create-tina-app@latest` then visit [`localhost:3000/admin`](http://localhost:3000/admin)

Watch the [4-min demo video](https://www.youtube.com/watch?v=zRkeKSZjlyw)

---

## ⚛️ React

[![Panda CSS](https://thisweekinreact.com/emails/issues/149/panda.jpg align="left")](https://panda-css.com/)

[**Panda CSS**](https://panda-css.com/)

Segun Adebayo (creator of Chakra UI) unveils his long-awaited CSS-in-JS library ([trailer](https://twitter.com/thesegunadebayo/status/1669732623994834946)). It offers very great DX, is based on modern CSS features (cascade layers), is performant (static analysis at build time, no runtime, atomic CSS)... In short, it ticks a lot of boxes and is generating a lot of interest. It integrates particularly well with React (JSX style props, React Server Components compatible, etc.), but can also be used with other frameworks.

This is a library to keep a close eye on and one that could well compete with Tailwind: it integrates better with the target frameworks and doesn't force you to use a lengthy `className`.

---

* 👀 [State of React - Survey Preview](https://github.com/Devographics/surveys/issues/85#issuecomment-1586439053): design of the new React survey is almost complete. You can have a [preview](https://survey.devographics.com/en-US/survey/state-of-react/2023) and give feedback.
    
* 👀 [Lee Robinson - "Dev server performance is our top priority"](https://twitter.com/leeerob/status/1671260151347830784): Next.js' dev server app dir has been criticised for its slowness, but Vercel plans to remedy this.
    
* 👀 [Remix - Dev Server v2 is now stable](https://twitter.com/pcattori/status/1669828506044203008): can be activated in v1 with a flag.
    
* 👀 [MDX - new GitHub syntax highlighting](https://twitter.com/wooorm/status/1671159366085672968)
    
* 👀 [MDX - new playground options](https://twitter.com/sebastienlorber/status/1669332176431894533)
    
* 📊 [Stack Overflow Developer Survey 2023](https://survey.stackoverflow.co/2023/): as expected, React remains the most widely used web framework this year and Next.js has moved up the rankings.
    
* 💬 [Gatsby RFC - Adapters](https://github.com/gatsbyjs/gatsby/discussions/38231): a new type of plugin to adapt the build to a deployment platform (Vercel, Netlify...) regarding caching, headers, redirects...
    
* 📖 [Improved Next.js image docs](https://twitter.com/leeerob/status/1670815761508581376)
    
* 📜 [Introduction to Next.js Server Actions](https://makerkit.dev/blog/tutorials/nextjs-server-actions): great overview of Server Actions in Next.js 13.4. TIL that they can be invoked from a button.
    
* 📜 [Introducing Isograph](https://isograph.substack.com/p/introducing-isograph): Robert Balicki (ex Relay) shares the POC of a new GraphQL client for React based on the concept of resolvers.
    
* 📜 [SpiderMonkey Newsletter - Firefox 114-115](https://spidermonkey.dev/blog/2023/06/09/newsletter-firefox-114-115.html): Firefox devs announced that they are working on optimisations for frameworks such as React. With Firefox 115, [all browsers now support Change Array By Copy](https://twitter.com/sebastienlorber/status/1671166785738133505), a new ES2023 feature super useful to update your React state.
    
* 📜 [React Admin June 2023 Update](https://marmelab.com/blog/2023/06/13/react-admin-june-2023-update.html): presents a fine list of features introduced over the last 3 months.
    
* 📜 [Ryan Bigg - Rails 7, React, TypeScript, ESBuild and View Components](https://ryanbigg.com/2023/06/rails-7-react-typescript-setup): explain how to manually integrate React into a Rails app. SPA mode, or with several entry points.
    
* 📜 [Replay for Test Suites](https://blog.replay.io/replay-for-test-suites): the time-travel debugging tool integrates with Cypress and raises $13m.
    
* 📜 [Storybook - New API references, TypeScript code snippets, and docs DX](https://storybook.js.org/blog/docs-updates/)
    
* 📜 [A Visual Guide to Layouts in Next.js 13](https://www.builder.io/blog/layouts-in-nextjs-13-visual)
    
* 📜 [Building a `<Button>` in React](https://catjam.fi/articles/ultimate-button-component)
    
* 📜 [Test your React hooks with Vitest efficiently](https://mayashavin.com/articles/test-react-hooks-with-vitest)
    
* 📜 [Add Prisma to a Remix app](https://www.jacobparis.com/content/remix-prisma)
    
* 📦 [Docusaurus v3 alpha - MDX 2 + React 18](https://twitter.com/docusaurus/status/1669370649326895105)
    
* 📦 [Vercel AI SDK](https://vercel.com/blog/introducing-the-vercel-ai-sdk)
    
* 📦 [React Wrap Balancer v1.0 - now uses the native CSS feature](https://twitter.com/shuding_/status/1669602326481387522)
    
* 📦 [OpenNext 2.0 - revamped ISR support](https://twitter.com/fanjiewang/status/1670941900302368768)
    
* 📦 [Fresh 1.2 – welcoming a full-time maintainer, sharing state between islands...](https://deno.com/blog/fresh-1.2)
    
* 📦 [Melange 1.0 - compiles OCaml / Reason to JavaScript](https://buttondown.email/anmonteiro/archive/melange-hits-v10/)
    
* 📦 [Waku 0.12](https://twitter.com/dai_shi/status/1670650381762961408)
    
* 🎥 [Are React client components bad?](https://www.youtube.com/watch?v=6jM_0wDOw4g)
    
* 🎥 [React Summit 2023 - Youtube Playlist](https://www.youtube.com/playlist?list=PLNBNS7NRGKME880lcYdw9QwkCiDYQFgCK)
    

---

## 💸 Sponsor

[![Leverage the power of React in prototyping](https://thisweekinreact.com/emails/issues/149/uxpin.png align="left")](https://www.uxpin.com/merge/developers?utm_source=partnerships&utm_medium=partner&utm_campaign=thisweekinreact_newsletter_merge_for_devs_05_23)

[**Leverage the power of React in prototyping.**](https://www.uxpin.com/merge/developers?utm_source=partnerships&utm_medium=partner&utm_campaign=thisweekinreact_newsletter_merge_for_devs_05_23)

Bring React components into the design process and let designers prototype with the same elements that you use to build the end product.

Remove the disconnect between design & code and release products faster!

[Try component-driven prototyping with UXPin Merge.](https://www.uxpin.com/merge/developers?utm_source=partnerships&utm_medium=partner&utm_campaign=thisweekinreact_newsletter_merge_for_devs_05_23)

---

## 📱 React-Native

[![RN 0.72](https://thisweekinreact.com/emails/issues/149/rn.jpg align="left")](https://reactnative.dev/blog/2023/06/21/0.72-metro-package-exports-symlinks)

[**React Native 0.72 - Symlink Support, Better Errors, and more**](https://reactnative.dev/blog/2023/06/21/0.72-metro-package-exports-symlinks)

After several Golden RCs, the latest version of React-Native has finally been released and will shortly be used in the Expo 49 SDK. There are quite a few improvements mentioned (DX, Hermes, performance...) and some breaking changes. I particularly like these 2 new features in the Metro bundler:

* Symlinks (beta): long-awaited feature to simplify monorepo and pnpm support
    
* [Package Exports](https://reactnative.dev/blog/2023/06/21/package-exports-support) (beta): better encapsulation of libs, compatibility with the rest of the frontend ecosystem and ability to expose a specific React-Native entry point.
    

---

* 📜 [Environment Variables in React Native: The Right Way](https://elazizi.com/posts/environment-variables-in-react-native-the-right-way/): great article on typesafe management of environment variables in the Expo context.
    
* 💬 [New Renderer Interop Layer](https://twitter.com/cortinico/status/1671089178107363329): with RN v0.72, an experimental interop layer allows legacy React-Native components to be used with the new Fabric renderer. This enables an incremental adoption of the new architecture.
    
* 💬 [Upcoming changes for libraries in React Native 0.73 - Android](https://github.com/react-native-community/discussions-and-proposals/issues/671): you will need to add a namespace to the Gradle build.
    
* 👀 [React-Native macOS 0.71 - New Architecture on init template](https://github.com/microsoft/react-native-macos/pull/1853)
    
* 👀 [1/5 of the top 100 Medical apps in the App Store use React Native](https://twitter.com/Baconbrix/status/1671171049336221697)
    
* 👀 [Expo Updates - upcoming Brotli compression support](https://twitter.com/JI/status/1671368239463690240)
    
* 📦 [react-native-colo-loco 1.1 - Colocate native and js code](https://twitter.com/jamonholmgren/status/1671009094545846273)
    
* 📦 [react-native-mmkv 2.9 - RN 0.73 support](https://twitter.com/mrousavy/status/1671127232113266689)
    
* 📦 [Maestro 1.29](https://twitter.com/mobile__dev/status/1670940310460043266)
    
* 🎙️ [RNR 269 - React Native VisionCamera v3 with Marc Rousavy](https://reactnativeradio.com/episodes/rnr-269-react-native-visioncamera-v3-with-marc-rousavy)
    

---

## 🧑‍💻 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

* [Chrome for Testing: reliable downloads for browser automation](https://developer.chrome.com/blog/chrome-for-testing/)
    
* [Miško Hevery's Take on a Unified Theory of Reactivity](https://www.builder.io/blog/unified-reactivity-theory)
    
* [Modern component-driven HTML email](https://fullystacked.net/posts/modern-component-driven-email/)
    
* [The 2023 State of CSS survey is now open](https://dev.to/sachagreif/the-2023-state-of-css-survey-is-now-open-18bk)
    
* [The gotchas of CSS Nesting](https://kilianvalkhof.com/2023/css-html/the-gotchas-of-css-nesting/)
    
* [NestJS 10.0](https://trilon.io/blog/nestjs-10-is-now-available)
    
* [Rspack v0.2.3](https://twitter.com/rspack_dev/status/1671035874770038784)
    
* [TypeScript 5.2's New Keyword: 'using'](https://www.totaltypescript.com/typescript-5-2-new-keyword-using)
    
* [Vitest 1.0 Roadmap](https://twitter.com/sheremet_va/status/1669740155391864833)
    

---

## 🤭 Fun

[![alt](https://thisweekinreact.com/emails/issues/149/meme.jpg align="left")](https://twitter.com/JLarky/status/1669741878324113408)

See ya! 👋