React Native Pros and Cons in 2021
Tags: reactnative, mobile
Published: 2021-06-15 12:06:54

<!-- wp:paragraph -->
<p>I see web and mobile development technologies on a crazy race to improve their performance each and every year.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Obviously, that’s great news. Development is becoming faster and easier to execute, cheaper to implement, more user-friendly with less effort, and so on. We live in great times – implementing a business idea has never been easier and technology is opening the doors of imagination wider than ever before.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For example, let’s take a look at mobile development. Everybody wants to build an app, and everybody wants to use them (according to stats, users downloaded 178.1 billion mobile apps to their smart devices by the start of 2018).&nbsp;&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But until recently, creating an app was very time and cost-consuming. And before going to the market, budgets could evaporate and so could the entire project. To avoid that, businesses started to look for alternatives, and they found cross-platform development with React Native at the head as a great solution.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Today, you will learn about the pros and cons of React Native, and you will be in a much better position to make an informed decision about adding React Native to your tech stack.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><br><br><strong>What is React Native?</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Meet <a href="https://reactnative.dev/" target="_blank" rel="noreferrer noopener nofollow">React Native</a> – an open-source platform created in JavaScript by Facebook. It enables you to build mobile apps for both Android and iOS. They can work on any device and still use one codebase only.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>RN is a perfect technology to <a href="https://pagepro.co/blog/how-react-native-can-cut-your-development-costs/" target="_blank" rel="noreferrer noopener">save on development costs</a>, yet still having truly native performance and user-experience flexibility.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It has a number of great advantages, many awesome “ready-to-go” templates, the army of dedicated contributors, and a crowd of fans.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Not to mention world leaders as a core users:</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://lh3.googleusercontent.com/jnaPPcNW0VeLfVqcVHeJyDf-OSN2gkoWFL4ZQ-W98qV-ATTi2-5mqvOwruHLzYV-XA9d9QfW2yor6WrXgdksod3UOHngVufVRfxkE_JRgQAAlxlIY1b-HqPwuOLamUw3vbJktJKQ" alt="logos of apps built in react native"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>It’s pretty much everything that technology needs to become hot and mature.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Although, like any other platform, it has its pros and cons and shouldn’t be used to execute absolutely every single project there is. We can see more and more developers (even native ones) choosing React Native as their core mobile development technology.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But it’s not the choice of developers only.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks to many business advantages (great performance, low production and maintenance cost, and more), it’s not a surprise that many biggest players on the market are choosing React Native as well.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So what makes it so special for both businesses and developers?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let’s dive in more deeply into advantages, and meet the pros and cons of React Native.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><br><br><strong>When to use React Native?</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To keep it short, all app makers that want their apps to work on all devices, both Android and iOS operating systems, yet still keep it all in one codebase only.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Although React Native is becoming better and better in terms of performance and it seems to get closer to truly native experience, there are still many differences that we should be aware of.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong>Cross-platform vs native mobile apps</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The most important difference between native apps and cross-platform apps is that native apps are made to work on a particular operating system. That means they can use all the blessings of that system, yet it cannot work anywhere else beside.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>However, RN aims to be platform-agnostic in the future, because of re-architecturing the framework. That's why there are some new things going on, like React Native Web or react-native-windows (for building apps for Windows and macOS).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Although cross-platform apps have been made to work everywhere, they still lack the kind of flexibility and performance on a specific operating system that native apps have.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Take an alligator and a fish. An alligator can walk and swim, but will never swim as good as a fish. On the other hand, fish cannot walk at all. So cross-platform apps are like alligators. They can swim and walk, but will never be as good at swimming, as fishes (native apps).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is why if you are planning to build a game, or something extremely demanding design-wise, you should make a comparison of cross-platform apps and native apps more closely, to decide what should be your choice, but native apps are still unconquered if it comes to performance, yet React Native is silently getting there.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Just mind that performance differences are only visible in extreme cases, so if this is not absolutely crucial to your business, React Native may appear to be a much better idea from a business and development point of view.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Take Shopify, and <a href="https://engineering.shopify.com/blogs/engineering/react-native-future-mobile-shopify" target="_blank" rel="noreferrer noopener nofollow">their decision on going full gas with React Native</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>After years of native mobile development, we've decided to go full steam ahead building all of our new mobile apps using React Native.</p><cite>Shopify</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:heading -->
<h2><br><br><strong>React Native in 2021</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Before I go to the actual pros and cons of <a href="https://pagepro.co/react-native-development.html" target="_blank" rel="noreferrer noopener">React Native development</a> I would like to quickly stop and mention what really makes me so excited.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Re-architecture announced in 2018 puts a lot of effort to make RN more performant, e.g. there is a new JS engine available – Hermes, and it makes apps running much faster on older Android devices.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>However, it doesn’t end there. The React Native re-architecture means the deprecation of the Bridge in favour of a new element called the <a href="https://github.com/react-native-community/discussions-and-proposals/issues/91" target="_blank" rel="noreferrer noopener nofollow">JavaScript Interface (JSI)</a>. It enables <a href="https://github.com/react-native-community/discussions-and-proposals/issues/4" target="_blank" rel="noreferrer noopener nofollow">Fabric</a> and <a href="https://github.com/react-native-community/discussions-and-proposals/issues/40" target="_blank" rel="noreferrer noopener nofollow">TurboModules</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The JSI comes together with a few improvement that really excites me:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>The JS bundle is not bound to the JSC anymore as it can use any other JS engine – like Hermes.</li><li>JavaScript can hold a reference to C++ Host Objects thanks to using JSI and invoke methods on them.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>JSI allows for direct control over the native modules.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><br><br><strong>React Native pros</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The list below was created to give you as most comprehensive list of React Native pros as possible and to divide them into two groups – pros from a business perspective and development perspective.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you know more React Native pros, please let me know in the comments.:</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"textColor":"vivid-red"} -->
<h3 class="has-vivid-red-color has-text-color"><strong>From a business perspective</strong></h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><strong>Development speed and cost</strong> – what developers love about React is that they’re able to reuse and recycle components developed before by them and the wide React Native ecosystem. They can also share their codebase and make them work faster.</li><li><strong>Works everywhere</strong> – Once you learn React Native, you can build apps for iOS, Android, and Windows.</li><li><strong>User Experience</strong> – as long as you are not using extremely complicated designs and interactions, or you are not making a heavy game, you are still able to build high-performance apps with an absolutely great user experience.</li><li><strong>Faster time to market </strong>– you can arrive on the market much faster to test your MVP, get feedback and adapt changes accordingly without a need for a big investment.</li><li><strong>Help on demand</strong> – React Native community is massive. Many problems that you may face during development, may already be fixed somewhere out there.</li><li><strong>Maintenance cost</strong> – you only deal with one codebase.</li><li><strong>React Native mobile apps are visible</strong> – it’s easy to get your apps listed in AppStore and Play Store. Not like PWA.</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3,"textColor":"vivid-red"} -->
<h3 class="has-vivid-red-color has-text-color"><strong>From a development perspective</strong></h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><strong>Easy to work with</strong> – experienced developers will definitely appreciate the development experience. Meaningful error messages, time-saving and robust tools make it a premium choice over other platforms.</li><li><strong>Changes preview</strong> – you don’t have to rebuild the application, again and again, to see changes. It saves a lot of time and makes things quick and efficient. Hit “Command+R” to refresh the application.</li><li><strong>Quick iteration cycles</strong> – which just simply adds more value.</li><li><strong>Intelligent debugging tools</strong> – and error reporting mechanisms. Give it an advantage over others and allows developers to focus more on the productive part.</li><li><strong>Easier to debug</strong> – uses Flipper as default.</li><li><strong>Keep things minimal and worthy</strong> – it doesn’t force you to work in Xcode or Android Studio for iOS or android apps respectively.</li><li><strong>A large community of developers</strong> – who are contributing day in, day out.</li><li><strong>Code reusability</strong> – developers can easily integrate 90% of the native framework and reuse the code for any platform. This feature not only saves time but also helps to cut down the cost of building two apps. Cool thing is that you can use the web app code (written in React) for mobile apps.</li><li><strong>Pre-developed components</strong> – numerous open-source libraries are available to accelerate your work.</li><li><strong>Live reloading feature</strong> – it helps to compile and read the file from the point where the developer made changes. Then a new file is offered to the stimulator which automatically reads the file from the beginning.</li><li><strong>Compatible with third-party plugins</strong> – and does not require high memory to process. No specific web views functions are required and native modules are linked with the plugin through the framework. Smoother running and faster loading are key features for it.</li><li><strong>Transform web projects into mobile applications</strong> – work done on this platform is easy to understand, and anyone can work around it although they were not previously engaged in it. It increases flexibility and web updates become consistent.</li><li><strong>Smoother and faster UI</strong> – as compared to classic hybrid ones. The interface created through React Native is highly responsive and feels fluid.</li><li><strong>Expo</strong> – it’s a great tool for fast development of apps for many platforms, with many ready-to-go libraries in the SDK.</li><li><strong>One codebase for all</strong> – a possibility of keeping just one codebase to run a project in an Android, iOS and web browser</li><li><strong>Demo mode</strong> – when using Expo, it’s possible to build a demo for a customer without actually pushing the app to the Testflight or Google Store. The only thing we need is an Expo App on the mobile device.</li><li><strong>Over The Air (OTA) updates</strong> – allow pushing quick fixes directly to users without the need to wait for App store or Google play to accept our changes</li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2><br><br>React Native cons</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><strong>Performance is still lower than native</strong> – React Native is not able to use all the blessings and potential of a specific platform. On the other hand, native apps can really maximize functionalities and deliver the ultimate user experience in the result.<br><br>However, the re-architecture puts a lot of effort to make RN more performant, e.g. there is a new JS engine available - Hermes, and it makes apps running much faster on older Android devices.</li><li><strong>Not efficient design-wise</strong> – If you consider complicated designs or advanced interactions as a crucial part of your business advantage, you should definitely go for native development.</li><li><strong>Custom modules</strong> – many custom modules are already available, yet, there may be a need for some specific components that you will be forced to build from scratch yourself.</li><li><strong>Updating issues</strong> – it’s hard to keep the app updated with the latest React Native version. Updating RN versions is in most cases a complicated process.</li><li>If you are building a web app with React Native, you have to give up all the libraries that are using native modules</li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2><br><br>Further readings</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this article, you had a chance to find out about the pros and cons of React Native, but if you want to know more, we recommend the following articles:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a href="https://pagepro.co/blog/react-native-faq-all-you-need-to-know/" target="_blank" rel="noreferrer noopener">React Native FAQ For 2021: All You Need To Know</a></li><li><a href="https://pagepro.co/blog/react-native-flipper-a-better-way-of-debugging/" target="_blank" rel="noreferrer noopener">React Native Flipper: A Better Way of Debugging</a></li><li><a href="https://pagepro.co/blog/react-native-for-startups-is-it-really-a-good-idea/" target="_blank" rel="noreferrer noopener">React Native For Startups: Is It Really a Good Idea?</a></li><li><a href="https://pagepro.co/blog/react-native-nativescript-comparison/" target="_blank" rel="noreferrer noopener">React Native vs NativeScript: Comparison</a></li><li><a href="https://pagepro.co/blog/react-native-vs-xamarin-pros-and-cons/" target="_blank" rel="noreferrer noopener">React Native vs Xamarin: Pros and Cons</a></li><li><a href="https://pagepro.co/blog/react-native-vs-ionic-and-cordova-comparison/" target="_blank" rel="noreferrer noopener">React Native vs Ionic vs Cordova: Comparison</a></li></ul>
<!-- /wp:list -->