Latest Developments

React Native’s latest update 0.76

React Native is a continuously evolving and improving library. It provides rapid iteration, feedback to developers and stakeholders and recently has undergone a major rewrite.

With release 0.76 React Native has now made this rewrite called the New Architecture, the default choice and the improvements will be felt in a snappier and more responsive end user product.

The improvements are a new:
1. Native Module System
2. Renderer
3. Event Loop
4. Native Communication mechanism

There were few other changes that mainly affect developers such as React Native Dev Tools as the default debugging experience, 15x faster Metro resolution when looking for imports, and aligning some of the Box shadows and Filter style props with the main React library, but the main thing to affect end users is going to be the New Architecture.

The 0.76 release of React Native makes default the super responsive and snappy new architecture.

Now this is not going to be a deep dive in to the changes which can be read here https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here rather this is just to highlight the performance improvements you can expect from new versions of React Native using the New Architecture.

Native Module System

This is an improved way of loading all the things the app needs when starting up and loading. The changes mean that modules required in the app are lazily loaded, so they don’t block the user. This gives a 15x performance boost to the user using the app. It also allows synchronous access to the native layer (the core bits underneath), and allows the renderer to handle events, schedule updates and read layout both synchronously and asynchronously. This is important in animations such as tooltips looking more responsive.

The Renderer (Fabric)

For the renderer rework, the React Native team have prioritised the scheduling of user input but in a way that doesn’t block or interrupt any in-progress rendering making the app feel much snappier.

The technical verbiage would be it can now have multiple in-progress trees across multiple threads allowing React Native to process concurrent update priorities on the main or background thread. It can then read layout from multiple threads both synchronously and asynchronously.

In other words to the end user it’s more responsive and less “janky”.

The Event Loop

The Event Loop can now process tasks a specific order. This means that user inputs can be classed as urgent high priority and can interrupt the queue to go ahead of other low priority tasks and give a snappier more responsive feel to the app.

It also makes it more aligned with the web’s latest React code base, allowing support for things like microtasks, MutationObserver and IntersectObserver.

Native Communication mechanism

The slower bridge layer that used to have messages serialised and placed on the queue to be read has been replaced with the JavaScript Interface (JSI). This allows direct comms with JavaScript and the native layer. It’s quicker and snappier to the end user and for devs allows better error reporting, debugging, whilst reducing crashes from undefined behaviour.

Conclusion

The latest release of 0.76 means a better more responsive app for end users. Is your app taking advantage of the new architecture and have you updated your modules to take advantage of the latest improvements?

We’re here to help if you want support.

Share This :

Leave a Reply

Your email address will not be published. Required fields are marked *

Related News