Hey notJust Developers,

​React Universe Conf (formerly React Native EU), organized by Callstack, has recently concluded. The two-day event started on Sept 5th and was filled with exciting announcements.

So many announcements, that we had to cover them in 3 different issues.

In the previous issue, we covered The New Architecture as Default in 0.76 and the New React Native DevTools.

Today, let’s dive into:

1. Expo Dom Components with SDK 52 🔥
2. Tree Shaking in Expo 🤟

Expo Dom Components with SDK 52 🔥

To better understand Expo Dom Components, let’s imagine a scenario. Suppose you have a React website that you built over the last couple of years. One day, the operational team demanded to you to bring some of the website’s features into the mobile app, which was built using Expo (the only recommended framework by the React Native team). Ahh! But you are thinking that you have to write all those features again in the Expo mobile app, which is pretty boring and non-productive work! So, what is the productive way then? 🤔

“Use Dom” in action 🚀

So, the Expo team (with Evan Bacon on stage) introduced ‘Expo Dom Components.’ The Dom Components in the Expo app carry just web code (e.g., React or Next.js code with <div>, <h1>, etc) just like React Components. To create a DOM Component in your Expo project, you just need to copy and paste all of your web code into your Expo project and write “use dom" at the top of the component as shown below.

// DomComponent.jsx in Expo Project

"use dom";

export default function DomComponent() {
  return (
    <div>
      {/* Web code here */}
      <h1>Hello NotJust Developers 👋h1>
    div>
  );
}

Now, in the Expo app below, we see that the app throws some errors because we only copied and pasted the code from the website (React website) into the Expo app. We forgot to write “use dom”! Interestingly, all the errors immediately disappeared after simply writing “use dom” at the top of the component. Pretty cool, right? 💯

Access Native Modules 😳

Great, you’ve already saved months of development time by just copying the code from the web to your Expo app! Now you face another issue: Will it be possible to access any native modules (e.g., accessing the camera, push notifications, etc.) from those Dom Components (components that carry web code)?

The answer is yes! Let’s say we have a ‘Create New Order’ button in a DOM component like below. When we click on the button, a push notification should appear with a confirmation message.

So, you can call the native module method (push notification) directly from the ‘Create New Order’button’s onClick() event. Below, we call the notify() function from the onClick() event, and you’ll see a push notification message as soon as you click the ‘Create New Order’ button. That’s awesome! The DOM Components can access native module methods! 🚀

DOM Components Magic 🪄

Can you imagine? Now we can run lots of interesting React libraries and components in mobile apps using Expo DOM components! For example, Evan showed us how to integrate the three.js library of React into Expo using DOM components, as well as a rich text editor of React, and many more.

When will be available?

​DOM Components are still an experimental feature, but you can use them today. Evan Bacon released a canary build of Expo SDK 52 to test the codebase, which is now available on GitHub. It will be released as stable with the upcoming Expo SDK 52 🚀.

Tree Shaking in Expo 🤟

In the previous section on ‘Expo DOM Component,’ we saw that we can add our web code (React or Next.js code) directly into mobile code via the Expo ‘use dom’ directive. However, have you thought that DOM components might slow down the performance of the mobile app? Yes, they can! Let’s explore why DOM components can impact app performance.

JS Code Execution

First, let’s clear up a common misconception about React Native’s JavaScript code execution. Many believe that React Native runs JavaScript code directly on the device when we launch a React Native app. However, in reality, React Native apps execute optimized Hermes bytecode in production (at runtime) instead of running JavaScript code directly on the device. This Hermes bytecode is generated from JavaScript code during the app’s build time. Hermes bytecode is a low-level representation of JavaScript code stored in .hbc files.

Dom Components Execution

Now, DOM components are also JavaScript code and designed to render web elements (e.g., <div>, <h1>, etc.) directly within a React Native app. However, they are not the same as regular React Native components (e.g., <View>, <Text>, etc.) and rely on web technologies (DOM - Document Object Model), which are not natively supported by Hermes. As a result, DOM components cannot be converted to Hermes bytecode. During the app’s build time, these DOM components are directly inserted into the JS bundle. Therefore, at runtime (app launch time), the DOM components(JS codes) are executed directly by React Native, which can slow down the app’s performance.

So, what should we do then? We can’t avoid using ‘DOM components’! 🤦

Tree Shaking in Action 🔥

​Evan announced a new feature for Expo called Tree Shaking that makes DOM components run faster. Tree Shakingworks by searching through all the code of your Expo project and removing any unused imports and exports.

For example, if you’re using the lucide-react library in your web app and only use the ChevronLeft and ChevronRight icons out of thousands of icons available, Tree Shaking will keep only those two icons in your Expo app JS bundle. All the other unused icons will be removed from the bundle.

This process can reduce the bundle size by up to 87%, making your DOM Components execute much faster in Expo. Exciting, right? 🎯

When will be available?

It is coming as an experimental feature with Expo SDK 52. You can learn more about how to enable it in the upcoming SDK 52.

That’s it 🙌

There were lots of important announcements during the React Universe Conf 2024. Our goal is to pick what’s important, and help you stay up to date with what’s to come in React Native ecosystem.

So far, we have covered:

✅ The New Architecture as Default in 0.76 🚀

✅ New React Native DevTools 💯

✅ Expo Dom Components with SDK 52 🔥

✅ Tree Shaking in Expo 🤟

Next week, we will talk about:

1. Hermes V2 soon 🎯
2. Server-Defined Rendering in React Native 🚀

🔁 In case you missed it

Full Stack Meetup Clone with React Native, Expo and Supabase If you're looking to create a full-stack mobile app for local events, this tutorial covers everything from authentication to real-time data updates. Watch now

Everything you need to know from the React Universe Conf In this newsletter issue we'll dive deeper into key announcements such as New Architecture as Default in 0.76 and the New React Native DevTools Read article

🔥 Press worthy

1️⃣ I tried Cursors and I built an app in 30 minutes 🤯

2️⃣ Nitro Modules - a new framework for developing native modules focused on performance

3️⃣ TypeScript 5.6​

Did you learn something new today?

If you found this email valuable, forward it to one friend or coworker who can also benefit from it. That would be much appreciated 🙏

The newsletter was written by Anis and edited by Vadim Savin.

Vadim Savin Helping you become a better developer together with the notJust.dev team