New Architecture of React Native

New Architecture of React Native
3 min read
31 October

After 6 years of development, the React Native team unveiled a completely rewritten framework architecture (0.76) - the most significant update since React Native's inception. This is the result of extensive work to improve the performance, stability, and features of the platform.

Key changes

The new version provides full support for modern React features, including Suspense, Transitions, and automatic batching. React Native finally has a full-fledged useLayoutEffect - now leyout handling is now synchronous and predictable. This allows you to correctly position UI elements without intermediate states and visual artifacts.

Performance Improvements

The bridge between JavaScript and native code has been completely removed. Communication now happens directly through the JavaScript Interface (JSI), which significantly speeds up application performance and startup. The new renderer can process multiple component trees simultaneously in different threads with different priorities. This allows low-priority updates to be interrupted to process user input, ensuring a responsive interface even with complex calculations.

Technical improvements

The native module system has been completely redesigned. Synchronized access to native interfaces with full type-safety between JavaScript and native code is now available. It is now possible to write cross-platform C++ code that works on all supported platforms: iOS, Android, Windows and macOS. Modules are loaded lazily, significantly reducing app startup time and memory consumption.

View Flattening, previously only available on Android, now works on iOS as well thanks to a common C++ renderer. This optimization automatically simplifies deep component trees, improving rendering performance.

Proven in production

The new architecture is already in active use in major applications: Facebook, Instagram, Expensify, Kraken, and BlueSky. Facebook and Instagram for Meta Quest are also built on the new architecture. This demonstrates its readiness for use in projects of any scale and complexity.

Migration process

Most applications will be able to upgrade with the same level of effort as a normal release. Over 850 popular libraries already support the new architecture, including all libraries with over 200 thousand weekly downloads. Thanks to an automatic compatibility layer with the old architecture, migration can be gradual - no need to rewrite the entire application at once.

Popular libraries such as react-native-mmkv and Reanimated have already seen significant improvements from the transition to the new architecture. MMKV has become a fully cross-platform C++ module with improved type-safety, and Reanimated 4 has gained the ability to manage animations and leyout in different threads.

Further development

The React Native team plans to improve built-in components and expand support for modern web standards. Event Loop now works according to HTML Standard web specifications, which in the future will allow the use of APIs such as microtasks, MutationObserver and IntersectionObserver.

Practical information

The compatibility of the libraries used can be checked at reactnative.directory. The official documentation contains a detailed migration guide. If problems arise, there is always the option to disable the new architecture via project configuration.

In case you have found a mistake in the text, please send a message to the author by selecting the mistake and pressing Ctrl-Enter.
Kelly 2.8K
I'm your source for the latest in tech news and updates. Stay informed with my articles on the most exciting developments in the tech world
Comments (0)

    No comments yet

You must be logged in to comment.

Sign In