Skip to main content

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

· 8 min read
Sébastien Lorber
Sébastien Lorber
Newsletter Editor - Docusaurus maintainer

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.

💡 Check this newsletter on Twitter - visual format 🎨

To support me:

Don't miss the next email!

    💸 Sponsor​

    highlight.io

    highlight.io - The open-source, full-stack monitoring Platform

    highlight.io 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.

    Don't miss the next email!

      💸 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​

      alt

      See ya! 👋


      Don't miss the next email!