After 6 years of growth, the React Native staff unveiled a very rewritten framework structure (0.76) – essentially the most important replace since React Native’s inception. That is the results of in depth work to enhance the efficiency, stability, and options of the platform.
Key modifications
The brand new model offers full assist for contemporary React options, together with Suspense, Transitions, and automated batching. React Native lastly has a full-fledged useLayoutEffect – now leyout dealing with is now synchronous and predictable. This lets you accurately place UI parts with out intermediate states and visible artifacts.
Efficiency Enhancements
The bridge between JavaScript and native code has been utterly eliminated. Communication now occurs straight via the JavaScript Interface (JSI), which considerably hastens utility efficiency and startup. The brand new renderer can course of a number of element bushes concurrently in several threads with completely different priorities. This enables low-priority updates to be interrupted to course of person enter, making certain a responsive interface even with complicated calculations.
Technical enhancements
The native module system has been utterly redesigned. Synchronized entry to native interfaces with full type-safety between JavaScript and native code is now obtainable. It’s now doable to write down cross-platform C++ code that works on all supported platforms: iOS, Android, Home windows and macOS. Modules are loaded lazily, considerably lowering app startup time and reminiscence consumption.
View Flattening, beforehand solely obtainable on Android, now works on iOS as properly due to a standard C++ renderer. This optimization routinely simplifies deep element bushes, enhancing rendering efficiency.
Confirmed in manufacturing
The brand new structure is already in energetic use in main functions: Fb, Instagram, Expensify, Kraken, and BlueSky. Fb and Instagram for Meta Quest are additionally constructed on the brand new structure. This demonstrates its readiness to be used in tasks of any scale and complexity.
Migration course of
Most functions will be capable of improve with the identical degree of effort as a standard launch. Over 850 fashionable libraries already assist the brand new structure, together with all libraries with over 200 thousand weekly downloads. Because of an automated compatibility layer with the outdated structure, migration could be gradual – no have to rewrite all the utility directly.
Widespread libraries resembling react-native-mmkv and Reanimated have already seen important enhancements from the transition to the brand new structure. MMKV has grow to be a totally cross-platform C++ module with improved type-safety, and Reanimated 4 has gained the power to handle animations and leyout in several threads.
Additional growth
The React Native staff plans to enhance built-in parts and increase assist for contemporary internet requirements. Occasion Loop now works in accordance with HTML Customary internet specs, which sooner or later will permit using APIs resembling microtasks, MutationObserver and IntersectionObserver.
Sensible data
The compatibility of the libraries used could be checked at reactnative.listing. The official documentation incorporates an in depth migration information. If issues come up, there may be at all times the choice to disable the brand new structure through undertaking configuration.
In case you might have discovered a mistake within the textual content, please ship a message to the writer by choosing the error and urgent Ctrl-Enter.
Signal In
