React Native 0.74 is released

Hi React Native Developers, Version 0.74 has been released, stable and ready for use now, with more than 1600 commits. You can see the full changelog at React Native 0.74.1 Change Log.

The main updates in this release are:

1. Using Yarn 3 for new projects by default.

2. Bridgeless is enabled by default when using the New Architecture.

3. Rendering multiple updates in onLayout changes in the New Architecture.

4. Yoga updated to version 3.

Let's explain each main update in detail.

Yarn 3:

Yarn 3 replaces the classic Yarn (1.x) for new projects as it is deprecated. Yarn 3 provides better performance when installing and updating dependencies. It also optimizes the process of storing dependencies.

Bridgeless is enabled by default in New Architecture :

React Native is moving towards implementing a new architecture by default in future releases and is gradually taking steps to deprecate the old architecture to boost performance. In the old architecture, the bridge is the main component used to enable communication between JavaScript and native modules. Because native features like camera, Bluetooth, etc., are accessed using native code written in Kotlin, Java, Objective-C, Swift, or C++, but to enable applications to access these features in JavaScript, the bridge uses the process of serialization (Javascript object to JSON string) and deserialization (JSON string to javascript object), which causes performance issues in the app.

To counter this issue, React Native introduced the New Architecture, which relies on the JSI (JavaScript interface) written in C++. This enables all native code features to be accessible in JavaScript code without depending on serialization and deserialization, resulting in significantly improved app performance.

But right now, the old architecture is still in use and to enable new architecure (JSI) the dependencies of OLD architecture first needs to be removed and React Native Team has three steps to do that.

1. Turbo Modules: Introduced in React Native version 0.68 to remove the app's dependency on native calls from the bridge.

2. Fabric Renderer: Also introduced in V0.68 to render components without the old bridge architecture.

3. Bridgeless Mode: Introduced in V0.73 to remove the remaining dependencies on the old architecture, such as error handling, global event emitters, timers, and more.

As you can see, the Bridgeless Mode was introduced in V0.73, which required manual enabling. However, in V0.74, when you opt for the New Architecture in your app, the Bridgeless mode will be enabled by default.

Multiple onLayout updates in single render:

The React Native team not only depends on the new architecture but also enhances the rendering process in the old architecture. In React Native, the onLayout prop serves to manage layout adjustments for a component. Whenever there's a change in layout because of size alterations, rotation, or mounting, the onLayout callback activates for that component. Below is the code snippet to activate the onLayout callback:

function CustomComponent(){
  return (
      <View
         onLayout={() => {
          console.log('Custom Component onLayout has been invoked')
         }}
      />
   )
}

Now let's see how onLayout with complete code example:

function CustomComponent() {
 const [firstState, setFirstState] = useState(false)
 const [secondState, setSecondState] = useState(false)
 const [thirdState, setThirdState] = useState(false)

 console.log('COMPONENT RE-RENDERED .....')

 return (
 <View>
 <View
 onLayout={() => {
 console.log('FIRST View onLayout invoked')
 setFirstState(true) // Update first state on view mount
 }}>
</View>

 <View
 onLayout={() => {
 console.log('SECOND View onLayout invoked')
 setSecondState(true) // Update second state on view mount
 }}>
</View>

 <View
 onLayout={() => {
 console.log('THIRD View onLayout invoked')
 setThirdState(true) // Update third state on view mount
 }}>
</View>
 </View>
 )
}

In React Native V0.73, the component above will be rendered in the following sequence:

FIRST View onLayout invoked
COMPONENT RE-RENDERED .....
SECOND View onLayout invoked
COMPONENT RE-RENDERED .....
THIRD View onLayout invoked
COMPONENT RE-RENDERED .....

Notice that when the onLayout is triggered for a view, we experience the re-rendering of the entire view. This approach can potentially impact performance, especially if you have logic that triggers numerous onLayout callbacks.

Now, let's execute the same code in the latest V0.74, and here's the output:

FIRST View onLayout invoked
SECOND View onLayout invoked
THIRD View onLayout invoked
COMPONENT RE-RENDERED .....

You can observe that the component is now re-rendered only once, and multiple onLayout callbacks are handled in a single render, improving performance.

What's new in Yoga 3.0:

Yoga 3 introduced some new properties such as:

1. 'space-evenly' property for alignContent style

2. 'static' property for position style

In previous versions of React Native, there were some UI and rendering issues, including incorrect behavior with the 'row-reverse' style. However, in version 0.74 of React Native, using flexDirection: 'row-reverse' now functions as expected.

The other key updates in this version are:

1. The minimum Android SDK requirement has been increased to version 23 (Android 6.0) to enhance compatibility and performance.

2. Deprecated PropTypes have been removed, reducing app size and memory overhead.

3. There have been API changes to PushNotificationIOS, as it prepares for relocation to a community package.

4. Additionally, various other breaking changes and enhancements have been implemented across platforms.

That's it, Please feel free to like, comment and share if you found this post helpful :)