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.

Today, let’s dive into:

1. The New Architecture as Default in 0.76 🚀
2. New React Native DevTools 💯

Sponsored by RevenueCat​

In-app subscriptions are a pain. The code can be hard to write, time-consuming to maintain, and full of edge cases. RevenueCat makes it simple, plus provides analytics, integrations, and tools to grow so you can get back to building your app.

​Get started with RevenueCat for free, and save weeks of development time integrating In-app subscriptions.

New Architecture as Default in 0.76 🚀

You may already understand the long-awaited announcement from the title 🎉. Before diving into the details, let’s explore a bit about both the Old & New Architecture of React Native.

Old Architecture

React Native previously used a bridge to communicate between the JavaScript layer and the Native layer. The Native layer is written in C++, Objective C, Java, or kotlin to access native features like cameras, sensors, etc. Unfortunately, the Bridge has some limitations.

One main limitation is that each time one layer communicates with another, it involves serializing (converting JS Object to JSON String) and deserializing (converting JSON String back to JS Object) data. Since the conversion takes time, this process adds a performance issue to the communication flow.

New Architecture in Action

The good news is that the React Native team was able to replace the bridge with an interface called JSI (JavaScript Interface). It was written in C++ and it opens up all the native features available to your JS code, which means that you can call native methods without any data serialization or deserialization, making the app super fast. And yeah, this new communication flow is called New Architecture 🙌.

New Architecture announced as Default 🚀

Since 2018, the React Native team has been working on the New Architecture. In March 2022, they made the New Architecture an experimental option in React Native 0.68. After lots of improvements, on May 16 of this year (2024), they promoted the New Architecture from experimental to Beta. Finally, at the conference last week, Nicola Cortiand Riccardo from Meta announced that starting with React Native 0.76, the New Architecture will be enabled by default 🚀.

NOTE: If you migrate your existing app to V0.76, the project will also have the New Architecture enabled by default.

Expo Update

For Expo lovers, Riccardo announced that the New Architecture will also be enabled by default with Expo SDK 52. He also mentioned in one of his tweets that all the Expo modules are compatible with the New Architecture 🚀.

Community Library Updates

The good news for all React Native users is that Riccardo also mentioned in another tweet that the React Native libraries with over 220k weekly downloads (used in 90% of projects) all work with the New Architecture 🔥.

Old Architecture as an Option

As we now know, starting with React Native 0.76, the new architecture will be enabled by default. However, if you still need to use the old architecture, you can do that by these steps.

1. Android: Redirect to gradle.properties file and set newArchEnabled as false.
2. iOS: Just run the CLI command RCT_NEW_ARCH_ENABLED=0 bundle exec pod install.
3. Expo: In SDK 52 and later, set newArchEnabled as false in the expo-build-properties config plugin like below.

When is 0.76 Stable?

​Riccardo announced on stage that they will release the first RC (Release Candidate) for version 0.76 next week. It will take 6-8 weeks to achieve a stable release of 0.76. He also mentioned that the team is expecting a stable release of 0.76 by October 2024.

New React Native DevTools 💯

To get into the details of the news, let’s first understand a bit about Browser DevTools and React DevTools, which were created by Meta.

What are Browsers DevTools?

Browser Developer Tools are useful for inspecting, debugging, and optimizing applications. Some of the most common features of every browser developer tool are:

1. JS Debugger
2. Console
3. Element Inspector
4. Performance Profiler (Analyzing app performance)

Below is how to open Developer Tools in Brave Browser and check network requests.

​React DevTools is a browser extension built in 2014 to help developers debug and profile (record performance) React applications. It provides a visual representation of the React component hierarchy, allowing you to view and edit the current props and state of any component, and offers many more features through two extra tabs (Components & Profiler) in the browser DevTools for projects built using React.

That’s great! Now, let’s understand what are the previous React Native DevTools provided by Meta and their issues.

Old React Native Dev Tools

Since the very beginning, the React Native team has been very concerned about the smooth debugging process and dev tools for React Native projects. Below is the sequence of improvements and debugging tools built by the team to solve various problems of other dev tools:

1. JSC Direct Debugging (Safari): It was launched 9 years ago for React Native. It worked well, but it only supports the Apple JavaScript core engine on iOS. To solve this issue, the team built ‘Remote JS Debugging (V8)’.
2. Remote JS Debugging (V8): So, the Remote JS Debugging (V8) works for both Android and iOS and uses Chrome for debugging. However, the issue is that instead of running the code in Hermes engine (the default JS engine for React Native from 0.64), it runs the code in V8 engine (the JS engine for Chrome) on the device. As a result, it makes the code execution different from the production behavior of the app. To solve this issue, the team launched the ‘Direct Hermes Debugging (Chrome)’ tool.
3. Direct Hermes Debugging (Chrome): It allows communication between V8 and Hermes on the device. However, the issue with this approach is that many complex tasks need to be done manually (e.g., setting breakpoints, etc.).
4. Flipper: It was launched back in React Native 0.62. It was great as it provided various native debugging plugins (e.g., crash reporter for native code). However, one of the main issues was the complexity of direct Hermes debugging. Considering all the cases, the team deprecated in React Native 0.73.
5. In-App Developer Tools/ Dev Menu: The team also created another dev tool for the React Native app that can be opened directly on your device, simulator, or emulator in debug mode. However, these tools overlap with browser dev tool capabilities and are not very helpful.

With all these React Native dev tools (mentioned above), you may already feel that debugging with them is really hard and unreliable, causing a lot of confusion about which debugging tool to use! 😫

New React Native DevTools in Action 🔥

So, to remove all the confusion and unreliability, the React Native team (with Alex Hunt on stage) announced new React Native DevTools, on which the entire team worked over the past year. The team built a next-gen debugging stack and named it ❝ React Native DevTools ❞ 🚀.

By using this new debugging stack, you can debug nearly every component of the Dev Server (the server that serves the app during development), including Hermes, Metro, and many more. This new debugging stack improved reliability as it is now the single debugging tool for every component of React Native app development.

NOTE: This new React Native DevTools also includes React DevTools built-in. As a result, it now has the powerful React components checker and React profiler from the web.

Zero Setup React Native DevTools

​Alex Hunt also presented that the new React Native DevTools require zero setup to start debugging. You can launch it directly from your app via the Dev menu or CLI (as shown below). You only need to have Chrome or Microsoft Edge installed on your device. No other setup is required.

When will it be available?

​Alex announced that the new React Native DevTools will be included by default with React Native 0.76, supporting both the old and new architecture 🚀.

That’s it 🙌

React Universe Conf 2024’s key announcements included the New Architecture as Default in 0.76 and the New React Native DevTools.

But that’s not it. In the next issues, we will cover:

1. Expo Dom Components with SDK 52 🔥
2. Tree Shaking in Expo 🤟
3. Hermes V2 soon 🎯
4. Server-Defined Rendering in React Native 🚀

🔴 Join me live

This Friday we will build Meetup Clone with React Native. It's going to be a tutorial packed with value, so set a reminder and don't miss it out 👇

​

​

​

🔁 In case you missed it

Meetup Clone with React Native We'll guide you step-by-step through building a Meetup clone app using 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

In-app Subscriptions & Paywalls with RevenueCat This video will provide you with the knowledge needed to implement a strong paywall, effectively manage your subscription products on both the App Store and Google Play Market, and elevate the profitability of your application to new levels. Watch now

🔥 Press worthy

1️⃣ Subscribe to This Week in React and stay up-to-date with the latest React news

2️⃣ React Native 0.76 Release Candidate​

3️⃣ Help us improve this newsletter by answering 4 simple questions (3 min)
​

Did you learn something new today?

If you found this email valuable, forward it to one friend or coworker that can benefit from it as well. 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