This Week In React 149
Panda CSS, React-Native 0.72, Server Actions, Isograph, MDX, Remix, Gatsby, Storybook, OpenNext, Wrap-Balancer, Fresh, 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
💡 Check this newsletter on Twitter - visual format 🎨
To support me:
😘 Recommend the newsletter to your friends: it really helps!
💸 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)
Or run npx create-tina-app@latest then visit localhost:3000/admin
Watch the 4-min demo video
⚛️ React
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.
📊 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...
📜 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
📜 Building a
<Button>in React📦 React Wrap Balancer v1.0 - now uses the native CSS feature
📦 Fresh 1.2 – welcoming a full-time maintainer, sharing state between islands...
💸 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
🧑💻 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.
🔀 Other
🤭 Fun
See ya! 👋