{"id":4118,"date":"2022-03-23T14:51:21","date_gmt":"2022-03-23T14:51:21","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=4118"},"modified":"2024-02-01T17:38:39","modified_gmt":"2024-02-01T22:38:39","slug":"ionic-vs-react-native-performance-comparison","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison","title":{"rendered":"Ionic vs. React Native: Performance Comparison"},"content":{"rendered":"<p>It\u2019s no secret that Ionic and React Native compete in the cross-platform application development ecosystem.<\/p>\n<p>A quick online search will bring up countless articles comparing the two cross-platform solutions. In these articles, advocates for React Native will often lean on performance as the biggest reason to choose one platform over another. Their assumption is that, because React Native orchestrates native UI controls (as opposed to rendering the UI in a browser, like Ionic) then it must be faster.<\/p>\n<p>The problem? None of these explanations ever seem to be centered around actual performance metrics. Rather, what the authors seem to fall back on is the <em>perception<\/em> that React Native is \u201cmore native\u201d, and thus it has better performance.<\/p>\n<p>Well, does React Native have better performance? We decided to create competing applications, with the same feature-set, and run some of our own tests on the same exact iPhone 11 Pro Max. Let\u2019s take a look at how it played out.<\/p>\n<p><!--more--><\/p>\n<h3><strong>Ionic vs. React Native<\/strong><\/h3>\n<p>First, if you&#8217;re just getting to know Ionic or React Native, let\u2019s briefly summarize how the two are different in terms of their approach and underlying architecture.<\/p>\n<p>Ionic fully subscribes to the philosophy of leveraging web technologies to deliver its applications. React Native, on the other hand, also runs using JavaScript (JS), but does so under the guise of orchestrating platform-specific user interface (UI) controls. Both platforms create <a href=\"https:\/\/medium.com\/@maxlynch\/cordova-ionic-apps-are-native-apps-64f9e1a995d9\">real native apps<\/a> with full native access through plugins and custom native code.<\/p>\n<p>To learn more about the differences between Ionic and React Native, check out our <a href=\"https:\/\/ionic.io\/resources\/articles\/ionic-react-vs-react-native\">comparison guide<\/a>.<\/p>\n<h3><strong>Boot Time<\/strong><\/h3>\n<p>The time that the application takes to load is a routine measuring stick for performance. There are two ways we can look at boot time: cold boot time and warm boot time. Cold boot times are measured by having the operating system in a fully rebooted state, where nothing is cached in regard to the app. On the contrary, warm boot times apply when the application has been killed so it is no longer running in the background, but there could be some cache lingering in the operating system.<\/p>\n<p>Both React Native and Ionic cruised in at around 1.5 seconds for cold boot times, as well as about 1 second for warm boot times. Take a look at the side-by-side boot time of Ionic and React Native:<\/p>\n<div class=\"video-container\">\n          <video controls playsinline autoplay muted loop src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/Ionic-vs-RN-demos-launch-new.mp4\"><\/video>\n        <\/div>\n<p>React Native champions claim there are substantial boot time performance gains when compared to Ionic. That just isn\u2019t the case. The video showcases the applications loading up at virtually the same speed. If you see it as React Native with a slight edge, it\u2019s far from being substantive enough to write off Ionic as a contender. React Native is fast, but so is Ionic!<\/p>\n<h3><strong>Smooth Scrolling<\/strong><\/h3>\n<p>The general performance argument seems to also be tied to the notion that Web Native applications are inherently slower to render. The following video speaks for itself:<\/p>\n<div class=\"video-container\">\n          <video controls playsinline autoplay muted loop src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/Ionic-vs-RN-demos-scrolling.mp4\"><\/video>\n        <\/div>\n<p>It is commonly accepted that 60 frames per second (fps) is the rate at which animations appear to be smooth. In the video above, it demonstrates that perfectly. While performing the rendering throughout scrolling, both the Ionic application and the React Native application continued to take around 16.67 milliseconds, or just below, to do it\u2019s work. This ensures that the user isn\u2019t experiencing any sensation of \u201cframe drop.\u201d<\/p>\n<div class=\"split\">\n<figure><figcaption>\n      Ionic React FPS<br \/>\n    <\/figcaption><img decoding=\"async\"  data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/react-fps-cropped.png\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 211px; --smush-placeholder-aspect-ratio: 211\/332;\" \/><noscript><img decoding=\"async\"  src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/react-fps-cropped.png\" \/><\/noscript><br \/>\n    <br \/>\n  <\/figure>\n<figure><figcaption>\n      React Native FPS<br \/>\n    <\/figcaption><img decoding=\"async\"  data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/rn-fps-cropped.png\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 210px; --smush-placeholder-aspect-ratio: 210\/331;\" \/><noscript><img decoding=\"async\"  src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/rn-fps-cropped.png\" \/><\/noscript><br \/>\n    <br \/>\n  <\/figure>\n<\/div>\n<p>A choppy user experience isn\u2019t something you\u2019ll see simply by choosing the web. The web is fast and so are Web Native applications. Of course, React Native applications are fast as well. The video portrays a list of 2500 employees being loaded into a list view. With proper techniques applied across each app, the lists continue to scroll without lag. The items are lazy loaded and the experience is smooth. Suffice it to say, this isn\u2019t a good indicator for which cross-platform development platform you should be choosing. Both approaches work incredibly well.<\/p>\n<h3><strong>Native Transitions<\/strong><\/h3>\n<p>Another fear surrounding Web Native applications is that given its web-first approach, it\u2019ll lose the native feel when it comes to transitions the user makes throughout the application. A simple example would be the \u201cpush\u201d and \u201cpop\u201d animations that occur as the user navigates along the application\u2019s routed paths into a detail screen and back.<\/p>\n<p>This is an inaccurate assumption. The Ionic SDK, alongside the frontend framework of your choosing, ships with these user experience paradigms baked in. These elegant transitions aren\u2019t something only frameworks that orchestrate native UI controls can accomplish. The web can do it too! Take a look:<\/p>\n<div class=\"video-container\">\n          <video controls playsinline autoplay muted loop src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/Ionic-vs-RN-demos-transitions.mp4\"><\/video>\n        <\/div>\n<h3><strong>Platform-specific or Unified Styling<\/strong><\/h3>\n<p>The jury is out on whether the expectation for mobile apps these days is to have the same styling within your application across operating systems. Many people subscribe to the idea that platform-specific styling, that we\u2019re all familiar with, is still the standard. Others are moving toward the concept that an application should purely be on brand and look the same regardless of the operating system in which it is being consumed.<\/p>\n<p>No matter where you fall in this debate, Ionic has you covered. <a href=\"https:\/\/ionicframework.com\/docs\/core-concepts\/fundamentals#adaptive-styling\">Adaptive Styling<\/a>, shipped out-of-the-box with Ionic\u2019s UI toolkit, means your components will look exactly like their first-class native citizen. Your app automatically adapts to Android\u2019s Material Design and Apple\u2019s Cupertino Design, depending on which platform your app is running on. This is all delivered out-of-the-box and requires zero config. However, if you\u2019d prefer your application components look the same, regardless of operating system, the exposed <a href=\"https:\/\/ionicframework.com\/docs\/theming\/css-variables\">CSS Variables<\/a> allow you to override the norms and create your brand\u2019s specific style!<\/p>\n<p>React Native supporters have used the idea that orchestrating native UI components is the only way to achieve a truly native look and feel. This couldn\u2019t be further from the truth. As you scroll back through the videos above, take note that without a label, you\u2019d be hard pressed to determine if the example was built with Ionic or React Native.<\/p>\n<h3><strong>Code Execution<\/strong><\/h3>\n<p>One of the biggest innovations in JavaScript over the last 15 years has been <a href=\"https:\/\/en.wikipedia.org\/wiki\/Just-in-time_compilation\">Just-in-time (JIT) Compilation<\/a> for JavaScript, translating interpreted JavaScript into native machine code at runtime for dramatically better runtime performance and energy consumption. Famously, the V8 engine that powers chrome and the Nitro engine powering Safari brought JavaScript to entirely new categories of applications that reimagined what browsers and web apps were capable of.<\/p>\n<p>However, as JIT compilation requires generating and executing native code at runtime, it presents security challenges. To mitigate these issues, vendors only enable JIT compilation for JavaScript running in a sandboxed browser environment. On mobile devices, for example, JavaScript code only has access to the JIT engine when running in a Web View, such as WKWebView. This means Ionic apps always run with a JIT engine. Apps that use JavaScriptCore or Hermes, such as React Native, do not have access to a JIT engine.<\/p>\n<p>This is one of the most significant performance differences between Ionic and React Native. Engines that do not use JIT compiling have significantly worse performance when it comes to executing JavaScript, as shown by publicly available data such as the <a href=\"https:\/\/bellard.org\/quickjs\/bench.html\">QuickJS Benchmark<\/a> results. As this data plainly shows, the lack of JIT compilation results in considerably slower JavaScript execution and much higher energy consumption as shown in the next section.<\/p>\n<h3><strong>CPU Consumption and Energy Impact<\/strong><\/h3>\n<p>Looking at performance from yet another angle, we can consider the CPU consumption performance for both of these hybrid mobile applications. Yet another set of intriguing results surfaces. Take a look at the following screenshots that were taken while both apps were running from Xcode and scrolling through the employee list view:<\/p>\n<div class=\"split\">\n<figure><figcaption>\n      Ionic React CPU Consumption<br \/>\n    <\/figcaption><img decoding=\"async\"  data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/react-cpu-usage-cropped.png\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1936px; --smush-placeholder-aspect-ratio: 1936\/815;\" \/><noscript><img decoding=\"async\"  src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/react-cpu-usage-cropped.png\" \/><\/noscript><br \/>\n    <br \/>\n  <\/figure>\n<figure><figcaption>\n      React Native CPU Consumption<br \/>\n    <\/figcaption><img decoding=\"async\"  data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/rn-cpu-usage-cropped.png\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1938px; --smush-placeholder-aspect-ratio: 1938\/815;\" \/><noscript><img decoding=\"async\"  src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/rn-cpu-usage-cropped.png\" \/><\/noscript><br \/>\n    <br \/>\n  <\/figure>\n<\/div>\n<p>From these images we can see that the Ionic application is far less CPU intensive than the React Native application. At its highest, the React Native application was using nearly 200% of the CPU, while Ionic was only using upwards of 10%. The reason for this is that Ionic hybrid apps have access to the aforementioned faster JS engine within WKWebView than those hybrid apps using JavaScriptCore, such as those built using React Native. From the outside, these applications both seem to be running smoothly, but under the hood, your machine is working a lot harder to run your React Native application.<\/p>\n<p>Given the CPU consumption metrics, we see that the React Native application was putting quite a bit more strain on the device than the Ionic application was.<\/p>\n<div class=\"split\">\n<figure><figcaption>\n      Ionic React Energy Impact<br \/>\n    <\/figcaption><img decoding=\"async\"  data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/react-energy-impact-cropped.png\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1932px; --smush-placeholder-aspect-ratio: 1932\/1216;\" \/><noscript><img decoding=\"async\"  src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/react-energy-impact-cropped.png\" \/><\/noscript><br \/>\n    <br \/>\n  <\/figure>\n<figure><figcaption>\n      React Native Energy Impact<br \/>\n    <\/figcaption><img decoding=\"async\"  data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/rn-energy-impact-cropped.png\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1931px; --smush-placeholder-aspect-ratio: 1931\/1211;\" \/><noscript><img decoding=\"async\"  src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/rn-energy-impact-cropped.png\" \/><\/noscript><br \/>\n    <br \/>\n  <\/figure>\n<\/div>\n<p>While scrolling through the lists again, Ionic dipped into the High Energy Impact range, while React Native rose further into the Very High Energy Impact range. It was important to take a look at these ranges while the apps were not idle because there will be far fewer times that users are interacting with your application without performing any type of action. If the energy consumption of your application remains very high throughout the course of its use, it\u2019s going to become a battery drain. From our competing examples, the Ionic application will have a smaller impact on your device\u2019s overall battery life.<\/p>\n<h3><strong>Parting Thoughts<\/strong><\/h3>\n<p>React Native is a great platform with which you can build some truly incredible applications. But, the \u201cmyth\u201d React Native offers better performance is just that, a myth. The examples should be sufficient to prove that. Ionic applications are just as fast, performant, and look and feel just like native applications.<\/p>\n<p>Our take? Don\u2019t use \u201cperformance\u201d as the reason to choose one solution over the other. Both options will give you a high performance app with a truly native look and feel. Instead, play around with each platform and choose the one that works best for you, and is easier or more fun to play with. And if you\u2019re building a mission-critical app to support your business, consider things like access to <a href=\"https:\/\/ionicframework.com\/blog\/who-is-going-to-support-your-next-mobile-app-project-hint-not-react-native-or-flutter\/\">professional support<\/a> and <a href=\"https:\/\/ionic.io\/enterprise\">enterprise readiness<\/a>, that only Ionic provides.<\/p>\n<p>Either way, you can rest easy knowing that, whichever one you choose, how your app performs in the market will have more to do with the merits of your idea and how well you execute on it, and less to do with the tooling you choose.<\/p>\n<h3><strong>Get Started<\/strong><\/h3>\n<p>Ionic is quick to install and it\u2019s easy to get started. <a href=\"https:\/\/ionicframework.com\/start\">Start building<\/a> cross-platform apps today!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It\u2019s no secret that Ionic and React Native compete in the cross-platform application development ecosystem. A quick online search will bring up countless articles comparing the two cross-platform solutions. In these articles, advocates for React Native will often lean on performance as the biggest reason to choose one platform over another. Their assumption is that, [&hellip;]<\/p>\n","protected":false},"author":94,"featured_media":4135,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"23","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,121,122],"tags":[3,251,136,155],"class_list":["post-4118","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-engineering","category-product","tag-ionic","tag-ionic-react","tag-react","tag-react-native"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ionic vs. React Native: Performance Comparison - Ionic Blog<\/title>\n<meta name=\"description\" content=\"A performance comparison between Ionic React and React Native cross-platform application development environments.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic vs. React Native: Performance Comparison\" \/>\n<meta property=\"og:description\" content=\"A performance comparison between Ionic React and React Native cross-platform application development environments.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-23T14:51:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-01T22:38:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionic-reactnative-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Conner Simmons\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@connerwsimmons\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Conner Simmons\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison\"},\"author\":{\"name\":\"Conner Simmons\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/b663dd102585af4f59055f5f8ff9defd\"},\"headline\":\"Ionic vs. React Native: Performance Comparison\",\"datePublished\":\"2022-03-23T14:51:21+00:00\",\"dateModified\":\"2024-02-01T22:38:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison\"},\"wordCount\":1758,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionic-reactnative-feature-image.png\",\"keywords\":[\"Ionic\",\"Ionic React\",\"react\",\"react native\"],\"articleSection\":[\"All\",\"Engineering\",\"Product\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison\",\"url\":\"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison\",\"name\":\"Ionic vs. React Native: Performance Comparison - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionic-reactnative-feature-image.png\",\"datePublished\":\"2022-03-23T14:51:21+00:00\",\"dateModified\":\"2024-02-01T22:38:39+00:00\",\"description\":\"A performance comparison between Ionic React and React Native cross-platform application development environments.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionic-reactnative-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionic-reactnative-feature-image.png\",\"width\":1600,\"height\":880,\"caption\":\"Ionic vs. React Native\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic vs. React Native: Performance Comparison\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/b663dd102585af4f59055f5f8ff9defd\",\"name\":\"Conner Simmons\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/112-234-1-copy-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/112-234-1-copy-150x150.jpg\",\"caption\":\"Conner Simmons\"},\"description\":\"Product Team\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/connersimmons\/\",\"https:\/\/x.com\/connerwsimmons\"],\"jobTitle\":\"Product Evangelist\",\"worksFor\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/author\/conner\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ionic vs. React Native: Performance Comparison - Ionic Blog","description":"A performance comparison between Ionic React and React Native cross-platform application development environments.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison","og_locale":"en_US","og_type":"article","og_title":"Ionic vs. React Native: Performance Comparison","og_description":"A performance comparison between Ionic React and React Native cross-platform application development environments.","og_url":"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison","og_site_name":"Ionic Blog","article_published_time":"2022-03-23T14:51:21+00:00","article_modified_time":"2024-02-01T22:38:39+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionic-reactnative-feature-image.png","type":"image\/png"}],"author":"Conner Simmons","twitter_card":"summary_large_image","twitter_creator":"@connerwsimmons","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Conner Simmons","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison"},"author":{"name":"Conner Simmons","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/b663dd102585af4f59055f5f8ff9defd"},"headline":"Ionic vs. React Native: Performance Comparison","datePublished":"2022-03-23T14:51:21+00:00","dateModified":"2024-02-01T22:38:39+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison"},"wordCount":1758,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionic-reactnative-feature-image.png","keywords":["Ionic","Ionic React","react","react native"],"articleSection":["All","Engineering","Product"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison","url":"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison","name":"Ionic vs. React Native: Performance Comparison - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionic-reactnative-feature-image.png","datePublished":"2022-03-23T14:51:21+00:00","dateModified":"2024-02-01T22:38:39+00:00","description":"A performance comparison between Ionic React and React Native cross-platform application development environments.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionic-reactnative-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionic-reactnative-feature-image.png","width":1600,"height":880,"caption":"Ionic vs. React Native"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/ionic-vs-react-native-performance-comparison#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Ionic vs. React Native: Performance Comparison"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/b663dd102585af4f59055f5f8ff9defd","name":"Conner Simmons","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/112-234-1-copy-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/112-234-1-copy-150x150.jpg","caption":"Conner Simmons"},"description":"Product Team","sameAs":["https:\/\/www.linkedin.com\/in\/connersimmons\/","https:\/\/x.com\/connerwsimmons"],"jobTitle":"Product Evangelist","worksFor":"Ionic","url":"https:\/\/ionic.io\/blog\/author\/conner"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/03\/ionic-reactnative-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/94"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=4118"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4118\/revisions"}],"predecessor-version":[{"id":5850,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4118\/revisions\/5850"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/4135"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=4118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=4118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=4118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}