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

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 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 to receive an email every week!

💸 Sponsor

Tina.io is a headless CMS for Markdown-powered sites

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 (Github)
Next.js + Tailwind with visual editing (Github)

Or run npx create-tina-app@latest then visit localhost:3000/admin

Watch the 4-min demo video

⚛️ React

Panda CSS

Segun Adebayo (creator of Chakra UI) unveils his long-awaited CSS-in-JS library (trailer). 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: design of the new React survey is almost complete. You can have a preview and give feedback.
👀 Lee Robinson - "Dev server performance is our top priority": 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: can be activated in v1 with a flag.
👀 MDX - new GitHub syntax highlighting
👀 MDX - new playground options
📊 Stack Overflow Developer Survey 2023: as expected, React remains the most widely used web framework this year and Next.js has moved up the rankings.
💬 Gatsby RFC - Adapters: a new type of plugin to adapt the build to a deployment platform (Vercel, Netlify...) regarding caching, headers, redirects...
📖 Improved Next.js image docs
📜 Introduction to Next.js Server Actions: great overview of Server Actions in Next.js 13.4. TIL that they can be invoked from a button.
📜 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: 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, a new ES2023 feature super useful to update your React state.
📜 React Admin June 2023 Update: presents a fine list of features introduced over the last 3 months.
📜 Ryan Bigg - Rails 7, React, TypeScript, ESBuild and View Components: explain how to manually integrate React into a Rails app. SPA mode, or with several entry points.
📜 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
📜 A Visual Guide to Layouts in Next.js 13
📜 Building a <Button> in React
📜 Test your React hooks with Vitest efficiently
📜 Add Prisma to a Remix app
📦 Docusaurus v3 alpha - MDX 2 + React 18
📦 Vercel AI SDK
📦 React Wrap Balancer v1.0 - now uses the native CSS feature
📦 OpenNext 2.0 - revamped ISR support
📦 Fresh 1.2 – welcoming a full-time maintainer, sharing state between islands...
📦 Melange 1.0 - compiles OCaml / Reason to JavaScript
📦 Waku 0.12
🎥 Are React client components bad?
🎥 React Summit 2023 - Youtube Playlist

💸 Sponsor

Leverage the power of React in prototyping.

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.

📱 React-Native

React Native 0.72 - Symlink Support, Better Errors, and more

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 (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: great article on typesafe management of environment variables in the Expo context.
💬 New Renderer Interop Layer: 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: you will need to add a namespace to the Gradle build.
👀 React-Native macOS 0.71 - New Architecture on init template
👀 1/5 of the top 100 Medical apps in the App Store use React Native
👀 Expo Updates - upcoming Brotli compression support
📦 react-native-colo-loco 1.1 - Colocate native and js code
📦 react-native-mmkv 2.9 - RN 0.73 support
📦 Maestro 1.29
🎙️ RNR 269 - React Native VisionCamera v3 with Marc Rousavy

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