This Week In React #162: Lit-React, Remix, Next.js, Fresh, next-safe-actions, Starlight, RN 0.73 RC, RCTText, canvaskit-js, vxrn, Rolldown, Vite, Japa

This Week In React #162: Lit-React, Remix, Next.js, Fresh, next-safe-actions, Starlight, RN 0.73 RC, RCTText, canvaskit-js, vxrn, Rolldown, Vite, Japa

Hi everyone!

This week, I've been looking at the release of Lit 3.0 to see if the use of Web Components has become easier with React.

On the React-Native side, version 0.73 is in release candidate with a number of DX improvements. There's also interesting activity regarding the possible optimisation of the Text and View components. Canvaskit-js makes it possible to run Skia on the web for just 20kb!

There were some interesting announcements at ViteConf last week. Notably a Rust port of Rollup, and the usage of Vite with Remix and React-Native.

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


💸 Sponsor - The open-source, full-stack monitoring Platform is a truly open-source application monitoring solution. They support Session Replay, Error Monitoring, and Logging platform; a perfect solution for your next project.

Don't waste time trying to guess why a bug happens. Use highlight and get a clear picture of your browser and server-side application.

It is super easy to install in your favorite framework: React.js, Next.js, Remix, or anything else!

⚛️ React

Lit React v1.0

Lit React v1.0

Google's Web Components framework Lit has just been released in v3.0. In addition to improvements to the framework (decorators, template compiler, Preact Signals), there is in particular the @lit/react integration package, which has graduated from the Lab, is now stable and in v1.0.

This integration facilitates the use of Web Components in a React app (or Preact) by creating a wrapper that maps React props to the properties of the custom element, manages event handlers and facilitates TypeScript typing. It fills certain gaps in React 18, which does not integrate easily with Web Components: props are mapped to attributes rather than properties. See the documentation for the React framework.

But can a modern React dev use all this easily? Lit offers experimental packages @lit-labs/ssr, @lit-labs/ssr-react and @lit-labs/nextjs but support is limited and won't work with Next.js App Router. The Declarative Shadow DOM, which allows SSR, is not yet implemented in Firefox, but a polyfill exists. In short, Lit should work well on a CRA app, but still feels a bit risky if you need SSR and SEO.

💸 Sponsor

Drop-in Authentication & User Management for React

Drop-in Authentication & User Management for React

Clerk is the easiest way to add authentication and user management to your React app. It’s purpose-built for the modern web and designed to get you up and running in minutes.

With Clerk you get:

  • 💅 Pre-built UI components for sign-in, sign-up, user profiles, and organizations

  • 📦 SDKs for React, React Native, Next.js, Redwood, Remix, and other frameworks

  • ⚡ Integrations with Firebase, Supabase, Convex, and other BaaS providers

  • 🎁 User management, social login, magic links, MFA, and more out of the box

Get started with Clerk’s quickstarts and tutorials 🚀

📱 React-Native

Using RCTView & RCTText in React Native for Performance Gains

Using RCTView & RCTText in React Native for Performance Gains

At the moment, React-Native devs are talking a lot on Twitter about the perf of the Text and View components, which are JS wrappers and add overhead compared to the respective native RCTText and RCTView elements. William Candillon had already 🎥 explained this problem in 2021, with the possibility of optimising Text rendering. It is possible to optimize as long as you don't need a few features like onPress listeners. This article presents a benchmark and measures the impact of using the native components instead of regular components, and reports a gain of around 15%, with variations depending on the platform and architecture.

Now that this trick became mainstream, React-Native devs are keen to take advantage of it. We can note the creation of react-native-fast-text, or the POC of a Babel plugin react-native-optimizer which would apply this optimisation automatically.

🔀 Other

🤭 Fun


See ya! 👋

Did you find this article valuable?

Support Sébastien Lorber by becoming a sponsor. Any amount is appreciated!