Editor’s note: This post was updated on 30 November 2021 to reflect updates to React Native.
In early 2015, Facebook first launched React Native, a framework for building native apps using the React library. Since its initial release, React Native has become a favorite reliable framework of many developers, used by tech giants like Pinterest, Uber, Spotify, and Microsoft. On the other hand, React Native has been the subject of some skepticism, for example, when Airbnb called off its React Native development efforts in 2018, sparking questions about whether React Native was effectively dead.
In this article, we’ll go over some of the features of React Native that quell this rumor. We’ll review the many reasons why a developer should learn React Native, covering some of its recent additions and future plans. Let’s get started!
Table of contents:
Let’s take a look at the major reasons why a developer would choose React Native to build their next mobile application or add a new feature in an existing mobile app.
Today, fast-paced development doesn’t provide a substantial edge for tech companies, rather, it’s essential to a company’s survival. Enormous competition demands companies move at a faster pace with greater stability.
Let’s imagine a company is managing three different frontend teams, Android, iOS, and web, working on a single product. Not only is this approach costly from a monetary perspective, it can also hinder the product’s pace. React Native allows teams to share up to 95 percent of their code across Android and iOS, which is a huge benefit in the era of agile development.
There is also the possibility of sharing a React Native codebase with a web team as well, which we’ll review in the coming section.
Without a doubt, the declarative UI and component-based architecture have revolutionized frontend development. These features have allowed frontend developers to build large-scale applications that are more predictable and experience fewer bugs.
Since its beginning, React’s motto has been “learn once, write anywhere.” We can leverage these concepts while working on mobile applications, making React Native an essential element of React’s overall progress and growth.
Both React and React Native are open source, meaning releases are first tested with Facebook’s production applications, making it easier for other companies to upgrade their applications to newer versions.
Although updates to any framework or build tool are never easy for large-scale applications to implement, if that upgrade has already been tested at Facebook’s scale, teams should feel confident implementing changes in their own applications.
Besides being used extensively at Facebook, React Native has been adopted by several tech giants. This list includes Microsoft, which uses React Native for its various products, both as Greenfield and Brownfield. Ecommerce giants Walmart and Shopify are relying on React Native for their mobile applications. Be sure to check out more apps using React Native in production today.
The official React Native project mainly targets Android and iOS mobile platforms. However, the React renderer architecture is flexible and extendable. For example, Microsoft forked the main React Native project and extended it for Windows and macOS desktop platforms. Also, many community forks extend React Native for Linux. Therefore, you can port React Native apps easily into any desktop platform.
As we know, Flutter is a universal framework. Because of these community forks, we can argue that React Native is a universal framework as well, making React Native more competitive with Flutter.
Let’s take a look at some of the newer features of React Native, which have made a real impact on the performance, debugging, and management of React Native projects.
In mid-2019 Facebook announced Hermes, a JavaScript engine optimized for React Native. Hermes came to iOS with the v0.64 release. At the time of writing, the React Native team is planning to make Hermes the default JavaScript engine due to its performance improvements.
Not only has Hermes helped to optimize the performance of React Native apps, it has improved application usability, reduced the application bundle size, and optimized battery usage.
The mobile user community still uses low-end and mid-end devices, which Hermes supports by providing a smaller app bundle and overall near-native performance. Hermes comes with ahead-of-time (AOT) compilation that replaces the previous just-in-time compilation (JIT), improving the app’s time to interaction (TTI) factor.
There has been a lot of criticism of React Native’s performance, especially on lower-end Android devices. As a JavaScript-based framework, React Native relies heavily on the JavaScript engine. In earlier versions, React Native used WebKit JSC on Android, which, after analysis, was found to be a major factor in startup performance.
Hermes precompiles the JavaScript into efficient bytecode with AOT compilation, instead of compiling JavaScript on start with JIT compilation. In turn, React Native applications have a faster start up time with Hermes, which also minimizes the APK size and optimizes runtime.
While React is known for its great developer experience, debugging has been a pain point for React Native developers. Although React Native originally included Hot Module Replacement and Hot Reload, in many cases, it broke. As a solution, Dan Abramov worked on Fast Refresh for React Native, which largely minimized this pain point.
Flipper is one of my personal favorite features, changing how we debug React Native apps. Flipper shipped with a version right after Fast Refresh, i.e., v0.62, and this version also enables React DevTools v4.x, meaning we can leverage its awesome features with React Native as well.
The React Native core team started a project that aims to remove all non-essential elements and put them in a separate repo, for example, UI components like WebView and native modules like push notifications. Most of these repos are under react-native-community.
Removing these components and modules will allow the core team to move faster, making React Native core lighter and more manageable.
One important aspect when analyzing an app’s performance is its responsiveness to gestures, scrolling, and animations. The React Native community has introduced a lot of powerful modules for handling this, including react-native-reanimated, react-native-screens, react-native-gesture-handler, and RecyclerListView. Additionally, React Navigation and React Native Navigation are putting in a lot of effort to improve the developer experience and make navigation in apps smoother.
The most important factor in our assessment about React Native’s future is the plan Facebook has for the library moving forward. In 2020, Facebook planned an entirely new architecture for React Native, establishing what it should look like in the coming years.
The React Native team is building this architecture piece by piece, and some of these pieces are already available in the current release of React Native, including Hermes. Moreover, a few more pieces have already been tested at Facebook internally and will be available for the community soon.
The React Native core team has divided this whole revamp into three phases:
We will briefly discuss these phases below.
Since its beginning, React Native has initialized all native modules at the start of an app. This might include native modules, which at times may not be necessary for certain users. For example, the react-native-device-info module might be necessary only for a rarely used feature, yet we have to initialize this module at the beginning regardless, thus increasing our startup.
Turbo modules allow us to load our native module at the time they are being used. This will decrease the overhead of initialization on startup, resulting in better startup performance. It also adds better type-safety across JavaScript and native code. This has already been tested within Facebook’s apps in production.
We’ve been hearing this referred to as Fabric, a C++ rewrite of React Native’s UI Layer. It doesn’t require measure and layout effects to be done in a dedicated thread since the new renderer is thread-safe. This will fix many bugs of components that rely heavily on measure API, which include ScrollView and TextInput.
The new renderer also offers improved type-safety. In addition, all of these UI components are lazily initialized, just like native modules, resulting in faster startup time. This is also under testing for Facebook’s apps.
Today, React Native is based on a bridge: all of the communication between JavaScript and native code is done via bridge, all of which is async, batched, and serialized. That means all of this communication is done via callbacks or promises, and values are passed in between after serialization. This makes it thread-safe and reliable but adds a lot of overhead.
The new architecture doesn’t rely on the bridge; instead, it will use the new JavaScript Interface (JSI). JSI is an engine-independent API that allows JavaScript to interact with C++. It creates JavaScript runtime, loads JavaScript bundles, and allows us to call C++ methods from JavaScript.
It can also access and manipulate JavaScript memory from C++. By using JSI directly without relying on the bridge, we can remove all overhead associated with the bridge. Moving forward, all native modules and view managers will rely on JSI, making them super fast.
Most of the initialization to prepare runtime for executing JavaScript code will be done in C++, so JavaScript initialization will also be more performant and optimized.
Without a doubt, this new architecture will bring RN much closer to native frameworks in terms of performance and in terms of how it behaves. More importantly, this will make RN apps better for end users. This will also enable RN to benefit from the wonderful features coming in React, like concurrent mode.
At the time of writing, the new architecture updates are already tested with most of Facebook’s production apps. The Facebook app is now fully migrated to the new React Native architecture. As we know, an engineering team can’t release a large feature, architectural change, or refactored code without in-depth testing. Also, React Native’s new architectural implementation has been delayed due to the ongoing pandemic.
Fortunately, the React Native team is planning to release the new architectural change shortly. They are working closely with the Expo and Callstack to verify the feasibility of integrating the new architectural update. Additionally, the React Native team is preparing documentation and tutorials targeting the new architecture.
Although the new architecture is not yet mentioned in the v0.67 release candidate, hopefully, we can expect it soon. However, the new architecture is already published to GitHub, and you can test a Fabric-enabled experience with the RNTester app.
I’ve had an amazing experience using React Native in both Greenfield and Brownfield apps. Looking at the awesome features included in React Native, it’s never been a better time to be a React Native developer.
I am happy to discuss your opinion of React Native’s future. Feel free to share in the comments below.
LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.
Start proactively monitoring your React Native apps — try LogRocket for free.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
React Native’s New Architecture offers significant performance advantages. In this article, you’ll explore synchronous and asynchronous rendering in React Native through practical use cases.
Build scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.
Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.
In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.
Learn more →
2 Replies to "Should you keep the faith with React Native?"
wow!!,, great and comprehensive article, so excited about React Native Future.
nice article