{"id":7861,"date":"2023-12-27T07:24:39","date_gmt":"2023-12-27T07:24:39","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=7861"},"modified":"2023-12-28T09:35:15","modified_gmt":"2023-12-28T09:35:15","slug":"understanding-new-react-native-architecture-and-development-strategy","status":"publish","type":"post","link":"https:\/\/dianapps.com\/blog\/understanding-new-react-native-architecture-and-development-strategy\/","title":{"rendered":"Understanding New React Native Architecture and Development Strategy"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">React native architecture has been successfully making waves in the <\/span>mobile app development<span style=\"font-weight: 400;\"> industry. With innovations like Fabric React Native and enhanced architectural planning, the framework has marked a significant transformation in the development of business applications.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Developers now leverage these advancements to create more efficient and feature-rich applications. No wonder, around 32% of developers use React Native app development for building various applications.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-7862  aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/statistic_id869224_cross-platform-mobile-frameworks-used-by-developers-worldwide-2019-2022.png\" alt=\"\" width=\"851\" height=\"632\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/statistic_id869224_cross-platform-mobile-frameworks-used-by-developers-worldwide-2019-2022-768x571.png 768w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/statistic_id869224_cross-platform-mobile-frameworks-used-by-developers-worldwide-2019-2022-640x476.png 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/statistic_id869224_cross-platform-mobile-frameworks-used-by-developers-worldwide-2019-2022-400x297.png 400w\" sizes=\"(max-width: 851px) 100vw, 851px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.statista.com\/statistics\/869224\/worldwide-software-developer-working-hours\/\"><span style=\"font-weight: 400;\">Source<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Being an app development expert, we\u2019ve tried experimenting with the latest architecture in our <\/span><a href=\"https:\/\/dianapps.com\/blog\/why-should-you-choose-react-native-for-your-app-project\/\"><span style=\"font-weight: 400;\">React Native app development projects<\/span><\/a><span style=\"font-weight: 400;\"> and will share our insights in this blog post.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So, If you haven\u2019t yet explored the new React Native architecture, this is the chance for you to learn about the main pillars of the TurboModule System and Fabric Renderer. You will also have a look at the following aspects:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The Need for New React Native Architecture<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Old Architecture&#8217;s Issues<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Improvements in the New React Native Architecture<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Pillars of React Native Architecture<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Advantages of Migrating to New React Native Architecture<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">How to Migrate to the New Architecture in React Native?<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">How can DianApps help with React Native App Development and Migrating New Architecture?<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">So, let\u2019s get started!<\/span><\/p>\n<h1><span class=\"ez-toc-section\" id=\"Why-There-Was-a-Need-for-a-New-React-Native-Architecture\"><\/span><span style=\"font-weight: 400;\">Why There Was a Need for a New React Native Architecture?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p><span style=\"font-weight: 400;\">The need for the <\/span><a href=\"https:\/\/reactnative.dev\/docs\/the-new-architecture\/why\"><span style=\"font-weight: 400;\">New React Native Architecture<\/span><\/a><span style=\"font-weight: 400;\"> stemmed from challenges in the existing one. In the current setup, React Native operates on a single thread with three main threads &#8211; the Javascript thread, the main thread, and the shadow thread -that communicate asynchronously through a bridge using JSON. This setup introduces dependencies, uncertainties, and delays due to the essential role played by the bridge.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The bridge, responsible for facilitating communication between threads, creates a bottleneck, impacting performance. To address this, the new architecture was introduced. It eliminates the reliance on the bridge, allowing threads to communicate more directly. This overhaul was necessary to enhance efficiency, reduce dependencies, and mitigate delays, ultimately providing a smoother and more responsive development environment for React Native applications.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s dig deeper into the details of issues with old architecture and improvements in the new one!<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Old-Architectures-Issues\"><\/span><span style=\"font-weight: 400;\">Old Architecture&#8217;s Issues<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In the previous architecture, data transmission between the JavaScript (JS) layer and the native layer relied on a component known as &#8220;The Bridge.&#8221; This bridge functioned like a bus, where the producing layer sent data to the consuming layer. The consumer could then read, deserialize, and execute the necessary operations.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, the Bridge had inherent issues:<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"1-Single-Threaded-Constraint\"><\/span><span style=\"font-weight: 400;\">1. Single-Threaded Constraint<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Because JS operated on a single thread, all computations in that area had to occur on that single thread. This imposed constraints on the system, limiting the efficiency of parallel processing.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"2-Asynchronous-Nature\"><\/span><span style=\"font-weight: 400;\">2. Asynchronous Nature<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The process was asynchronous, meaning one layer submitted data to the bridge and then asynchronously waited for the other layer to process it. This asynchronicity was maintained even when it wasn&#8217;t strictly necessary.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"3-Extra-Overheads\"><\/span><span style=\"font-weight: 400;\">3. Extra Overheads<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The Bridge introduced extra overheads. Each time one layer needed to communicate with the other, data had to be serialized and then deserialized on the receiving end. Despite the choice of JSON for its simplicity and human-readability, this serialization process, though lightweight, incurred a certain cost.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To cut it short, while the Bridge facilitated communication between JS and the native layer, its asynchronous nature, single-threaded operation, and the serialization process introduced some limitations and overheads. The evolution to the new architecture seeks to address these challenges for a more efficient and streamlined system.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Improvements-in-the-New-React-Native-Architecture\"><\/span><span style=\"font-weight: 400;\">Improvements in the New React Native Architecture<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"wp-image-7869  aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/16eca09deb84c056tplv-t2oaga2asx-jj-mark_3024_0_0_0_q75.png\" alt=\"\" width=\"852\" height=\"482\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/16eca09deb84c056tplv-t2oaga2asx-jj-mark_3024_0_0_0_q75-768x434.png 768w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/16eca09deb84c056tplv-t2oaga2asx-jj-mark_3024_0_0_0_q75-640x362.png 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/16eca09deb84c056tplv-t2oaga2asx-jj-mark_3024_0_0_0_q75-400x226.png 400w\" sizes=\"(max-width: 852px) 100vw, 852px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">In the New Architecture, the traditional concept of &#8220;The Bridge&#8221; has been replaced with a more robust communication mechanism known as the JavaScript Interface (JSI). The JSI serves as an interface that enables a JavaScript object to hold a reference to a C++ object, and vice versa.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This shift has introduced several significant improvements:<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"1-Concurrency\"><\/span><span style=\"font-weight: 400;\">1. Concurrency<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">With JSI, JavaScript can now invoke functions that are executed on different threads. This introduces concurrency, enabling more efficient parallel processing from the JavaScript side.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"2-Synchronous-Execution\"><\/span><span style=\"font-weight: 400;\">2. Synchronous Execution<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The JSI allows for synchronous execution of functions that don&#8217;t inherently require asynchronicity. This enhances the efficiency of certain operations that previously had to follow an asynchronous model.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"3-Lower-Overhead\"><\/span><span style=\"font-weight: 400;\">3. Lower Overhead<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Unlike the previous architecture, the New Architecture eliminates the need for serializing and deserializing data. This results in a notable reduction in overhead, as there are no longer serialization taxes to pay.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"4-Type-Safety\"><\/span><span style=\"font-weight: 400;\">4. Type Safety<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">To ensure proper invocation of methods between JS and C++ objects, a layer of automatically generated code has been added. This code, derived from a typed JS specification through Flow or TypeScript, enhances type safety in the communication process.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"5-Code-Sharing\"><\/span><span style=\"font-weight: 400;\">5. Code Sharing<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The introduction of C++ allows for the abstraction of platform-agnostic code, facilitating easier code sharing between different platforms. This enhances the development process by promoting code reusability.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These advantages serve as the foundation for the New Native Module System, providing a solid base for further enhancements. For instance, this evolution has enabled the development of a new renderer that offers faster and more performant Native Components, contributing to an overall improvement in the React Native ecosystem.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Pillars-of-React-Native-Architecture\"><\/span><span style=\"font-weight: 400;\">Pillars of React Native Architecture<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1-Fabric\"><\/span><span style=\"font-weight: 400;\">1. Fabric<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" class=\"wp-image-7283 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/Untitled-design-16.png\" alt=\"\" width=\"627\" height=\"353\" \/><\/p>\n<p><a href=\"https:\/\/dianapps.com\/blog\/what-is-fabric-in-react-native-and-how-does-it-work\/\"><span style=\"font-weight: 400;\">Fabric in React Native<\/span><\/a><span style=\"font-weight: 400;\"> is a progressive rendering mechanism, optimizing platform portability by integrating more render logic in C++. It employs lazy initialization for components like View and Text, enhancing startup times. Fabric Native Components, rendered through the Fabric Renderer, offer benefits like consistent, strongly typed interfaces across platforms. They enable exclusive or integrated C++ code, reducing the need for duplicate implementations.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Leveraging JSI for efficient communication, Fabric Native Components are created from a JavaScript specification. Codegen generates platform-agnostic C++ scaffolding, connecting component-specific logic. Once integrated, components are connected with the scaffolding code, embodying the advantages of the Architecture, then it is ready to be imported and used by an application.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"2-Turbo-Modules\"><\/span><span style=\"font-weight: 400;\">2. Turbo Modules<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Turbo Modules presents a novel approach to native module development in React Native, leveraging JSI for synchronous data transfer between React native and JavaScript code. They revamp the communication layer for modules like Bluetooth and Biometrics, offering the added benefits of consistent, strongly typed interfaces in cross-platform app development.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Notably, Turbo Modules support the creation of native C++ code for both platforms, reducing the need for duplicating implementations. They introduce lazy loading, enhancing app startup speed, and leverage JSI for more efficient communication compared to the traditional bridge. In essence, Turbo Modules optimize React Native development, ensuring streamlined communication and improved performance.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"3-Codegen\"><\/span><span style=\"font-weight: 400;\">3. Codegen<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Codegen is a not-so-proper pillar, but rather a tool streamlining JS and native compatibility by automating code generation. It transforms JS into a source of truth, creating statically typed JS (JS Spec) that serves as the foundation for TurboModules and Fabric native components.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Moreover, Codegen ensures type safety and compile-time validation, fostering simpler code and faster execution. With both pillars relying on each other for consistent data validation, Codegen enhances development efficiency and reliability in React Native applications by avoiding repetitive writing of code.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"4-The-Bridgeless-Mode\"><\/span><span style=\"font-weight: 400;\">4. The Bridgeless Mode\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As of now, enabling the new architecture in your app maintains backward compatibility by keeping the bridge available. This ensures support for older components and modules. However, a significant shift is underway. Beginning with <\/span><a href=\"https:\/\/dianapps.com\/blog\/whats-in-the-new-react-native-0-73\/\"><span style=\"font-weight: 400;\">React Native 0.73<\/span><\/a><span style=\"font-weight: 400;\">, there&#8217;s an option to activate &#8220;<\/span><b><i>Bridgeless Mode<\/i><\/b><span style=\"font-weight: 400;\">,&#8221; &#8211; new piece of React Native Architecture completely disabling the creation of the bridge.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It&#8217;s worth noting that Bridgeless Mode is in an experimental phase, reflecting ongoing development and testing. This shift signals a forward-looking approach, aiming to optimize performance and potentially reshape how React Native handles communication between its JavaScript and native components in future releases.\u00a0<\/span><\/p>\n<style>.elementor-7863 .elementor-element.elementor-element-ec4760e > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-7863 .elementor-element.elementor-element-cb7f6af > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-7863 .elementor-element.elementor-element-cb7f6af:not(.elementor-motion-effects-element-type-background), .elementor-7863 .elementor-element.elementor-element-cb7f6af > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-7863 .elementor-element.elementor-element-cb7f6af{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:20px;padding:30px 30px 30px 30px;}.elementor-7863 .elementor-element.elementor-element-cb7f6af > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-7863 .elementor-element.elementor-element-5d80343{text-align:center;}.elementor-7863 .elementor-element.elementor-element-5d80343 .elementor-heading-title{color:#FFFFFF;font-size:30px;font-weight:600;}.elementor-7863 .elementor-element.elementor-element-5d80343 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-7863 .elementor-element.elementor-element-41902e7 .elementor-button{font-size:16px;letter-spacing:0.5px;}.elementor-7863 .elementor-element.elementor-element-41902e7{width:var( --container-widget-width, 96.015% );max-width:96.015%;--container-widget-width:96.015%;--container-widget-flex-grow:0;}@media(max-width:767px){.elementor-7863 .elementor-element.elementor-element-5d80343{text-align:center;}.elementor-7863 .elementor-element.elementor-element-41902e7 > .elementor-widget-container{margin:-15px 0px -15px 0px;}}@media(max-width:1024px) and (min-width:768px){.elementor-7863 .elementor-element.elementor-element-22760bc{width:60%;}}<\/style><div class=\"porto-block elementor elementor-7863\">\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8fa19da cta elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8fa19da\" data-element_type=\"section\">\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ec4760e\" data-id=\"ec4760e\" data-element_type=\"column\">\r\n\r\n\t\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-cb7f6af elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cb7f6af\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-22760bc\" data-id=\"22760bc\" data-element_type=\"column\">\r\n\r\n\t\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5d80343 elementor-widget elementor-widget-heading\" data-id=\"5d80343\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.14.0 - 26-06-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Looking-to-leverage-the-full-potential-of-New-React-Native-Architecture\"><\/span>Looking to leverage the full potential of New React Native Architecture?<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41902e7 elementor-align-center join-us-btn elementor-mobile-align-center elementor-widget__width-initial elementor-widget elementor-widget-button\" data-id=\"41902e7\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-lg\" href=\"https:\/\/dianapps.com\/contact\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Talk with Experts!<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ad9066c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ad9066c\" data-element_type=\"section\">\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3622c4c\" data-id=\"3622c4c\" data-element_type=\"column\">\r\n\r\n\t\t\t\t\t<div class=\"elementor-widget-wrap\">\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t<\/div>\n<h2><span class=\"ez-toc-section\" id=\"Advantages-of-Migrating-to-New-React-Native-Architecture\"><\/span><span style=\"font-weight: 400;\">Advantages of Migrating to New React Native Architecture<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1-Better-Developer-Experience\"><\/span><span style=\"font-weight: 400;\">1. Better Developer Experience<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The React Native architecture brings a substantial improvement to the developer experience by accelerating and refining the app development process. It stands out for its efficiency, enabling<\/span> react native developers<span style=\"font-weight: 400;\"> to focus more on code quality.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The redesigned framework simplifies the swift development, debugging, and publishing of programs. Notably, developers now have access to new APIs and technologies, such as Hot Reloading, providing a streamlined way to stay abreast of the latest trends and advancements. This enhancement not only boosts productivity but also contributes to a more enjoyable and dynamic development environment.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"2-Refined-Compatibility-With-Older-React-Native-Versions\"><\/span><span style=\"font-weight: 400;\">2. Refined Compatibility With Older React Native Versions<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">While prioritizing exceptional compatibility, the architecture allows developers to seamlessly transition without modifying their existing project code. This eliminates the need for a steep learning curve, as the underlying code has been updated and enhanced while maintaining similarity to earlier versions.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The remarkable improvement in platform compatibility ensures a smooth and swift migration to the React Native mobile app architecture. Developers can leverage their existing platform knowledge without the daunting task of rewriting their entire codebase, streamlining the adoption process and minimizing disruptions to ongoing projects.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"3-Improved-Error-Handling\"><\/span><span style=\"font-weight: 400;\">3. Improved Error Handling<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Its improved error handling enhancement simplifies the process for engineers to troubleshoot code mistakes, making it more straightforward to identify issues early on and address them before they become significant concerns. The redesigned error handling mechanism contributes to a smoother mobile app development experience, allowing for proactive issue resolution.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With a more efficient error-handling system, developers can tackle problems with greater ease, fostering a more robust and reliable development environment. This improvement is a noteworthy aspect of the significance of the new architecture in React Native.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"4-Increased-Responsive-UI\"><\/span><span style=\"font-weight: 400;\">4. Increased Responsive UI<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A key advantage for <\/span><b>mobile app developers<\/b><span style=\"font-weight: 400;\">! The design enables more effective handling of asynchronous code, leading to a significant acceleration of laborious operations. This improvement ensures that applications feel faster and more responsive, delivering a markedly improved experience for users. With quicker and smoother performance, the new architecture enhances the overall usability and satisfaction from React Native applications.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"5-Enhanced-Performance\"><\/span><span style=\"font-weight: 400;\">5. Enhanced Performance<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The expected performance improvements in the new React Native architecture come from its real-time communication with the native side, enhancing overall efficiency and responsiveness in mobile applications. The strategy of lazily loading every native module is expected to significantly reduce application startup time and eliminate the overhead associated with loading the bridge at startup, especially once the bridgeless mode becomes available.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, it&#8217;s crucial to note that not all scenarios may equally benefit from this improvement, and in some benchmarks, the architecture&#8217;s performance may not show substantial improvement.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It&#8217;s noteworthy that Meta&#8217;s goal wasn&#8217;t solely to make the new architecture X times faster than the old. In addition to addressing significant bottlenecks, they aimed to establish a robust foundation, paving the way for the development of capabilities not achievable with the old design. This approach reflects a broader vision for innovation and future advancements in <\/span>React Native application development<span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"How-to-Migrate-to-the-New-Architecture-in-React-Native\"><\/span><span style=\"font-weight: 400;\">How to Migrate to the New Architecture in React Native?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now, this section is added for all the React Native developers as well as library authors who are looking to update your React Native application to the latest version. It outlines the steps you need to follow while integrating the new Architecture, composed of the Renderer (Fabric) and NativeModule system (Turbo Module) to your Android and iOS libraries and apps.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Prerequisites-for-Applications\"><\/span><span style=\"font-weight: 400;\">Prerequisites for Applications<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Android <\/b><span style=\"font-weight: 400;\">&#8211; Enable the New Architecture<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">If your React Native project is up to date, you&#8217;re already set for the new architecture on Android.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Update your android\/gradle.properties file by changing the flag<\/span><\/p>\n<p><span style=\"font-weight: 400;\"># Use this property to enable support for the new architecture.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"># This will allow you to use TurboModules and the Fabric render in <\/span><span style=\"font-weight: 400;\">your application. You should enable this flag either if you want <\/span><span style=\"font-weight: 400;\">to write custom TurboModules\/Fabric components OR use libraries that <\/span><span style=\"font-weight: 400;\">are providing them.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">-newArchEnabled=false<\/span><\/p>\n<p><span style=\"font-weight: 400;\">+newArchEnabled=true<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>iOS <\/b><span style=\"font-weight: 400;\">&#8211; Enable the New Architecture<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">If your React Native project is up to date, you&#8217;re ready for the new architecture on iOS.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Reinstall your pods with the following command:<\/span><\/p>\n<p><span style=\"font-weight: 400;\"># Run pod install with the flag:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">RCT_NEW_ARCH_ENABLED=1 bundle exec pod install<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In simple terms, these steps ensure your React Native project is updated to leverage the new architecture features. For Android, it involves adjusting a property in the gradle.properties file, and for iOS, it requires reinstalling pods with a specific flag.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ensure you&#8217;ve updated your project to the latest React Native version before proceeding with these migration steps. Now, the question is How? There\u2019s no rocket science. Let\u2019s look at the steps!<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Steps-to-Migrate-to-the-New-React-Native-Architecture\"><\/span><span style=\"font-weight: 400;\">Steps to Migrate to the New React Native Architecture.<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">1. Upgrade React Native Version<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At first, update your app to React Native 0.68 or higher, with a recommendation for 0.71 and above for added benefits and enhancements.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">2. Verify third party libraries<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Moving further, check and ensure compatibility of every third-party library used in your app. This step is crucial, as some libraries may pose challenges during migration.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">3. Address all the incompatible components<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, you need to identify components that might not be compatible with the new architecture. If you encounter a red box displaying &#8220;Unimplemented component: &lt;ComponentName&gt;,&#8221; notify the library maintainers to expedite adoption.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">4. Android Configuration<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For Android, set newArchEnabled=true in the gradle.properties file to enable the new architecture.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">5. iOS Configuration<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For iOS, run the RCT_NEW_ARCH_ENABLED=1 pod installed inside the iOS folder to ensure compatibility.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"How-do-DianApps-help-with-React-Native-App-Development-and-Migrating-New-Architecture\"><\/span><span style=\"font-weight: 400;\">How do DianApps help with React Native App Development and Migrating New Architecture?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Being a top-notch <\/span><a href=\"https:\/\/dianapps.com\/react-native-app-development\"><b>React Native App Development Company<\/b><\/a><span style=\"font-weight: 400;\">, DianApps excels in developing high-performing apps by blending the right set of tech stacks and modern algorithms that help you drive authenticity to your Android and iOS applications.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The <\/span>React Native App Development services <span style=\"font-weight: 400;\">we provide at DianApps include:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">React Native Development Consulting<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Cross-Platform App Development<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">React Native Support &amp; Maintenance<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">React Native UI\/UX Design Services<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Tech Stack we use in our react Native App Development Workflow:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">JavaScript<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Redux<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Firebase<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Our team of React Native app Development experts follows a definitive process for every project that takes account of quality, transparency, and proper interaction that goes beyond economic solutions.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The process starts goes like:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Thorough assessment and planning<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Upgrade dependencies and React Native versions<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Pilot migration<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">JSI testing<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Quality assurance and testing<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Developer training and collaboration\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Incremental migrations<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Monitoring and performance optimization<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Documentation<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">User communication<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">To know more in detail about the above process, contact our React Native app Development experts now!<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Final-Words\"><\/span><span style=\"font-weight: 400;\">Final Words<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The new React Native architecture emerges as a game-changer, benefiting both users and developers. <\/span><a href=\"https:\/\/dianapps.com\/blog\/why-use-react-native-for-mobile-app-development\/\"><span style=\"font-weight: 400;\">React Native\u2019s prowess in mobile app development<\/span><\/a><span style=\"font-weight: 400;\"> is evident through improved performance, an enriched developer experience, and seamless compatibility with previous React Native versions.\u00a0<\/span><\/p>\n<p>Hire React Native developers<span style=\"font-weight: 400;\"> who particularly appreciate the enhanced control over the user interface, streamlining their workflow for greater efficiency. This architecture proves to be an exceptional tool for crafting cutting-edge mobile applications, making it a compelling choice for real-world projects.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you&#8217;re starting your mobile app development process or facing migration challenges, consider reaching out to DianApps for comprehensive insights on incorporating the New React Native Architecture.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React native architecture has been successfully making waves in the mobile app development industry. With innovations like Fabric React Native and enhanced architectural planning, the framework has marked a significant transformation in the development of business applications. Developers now leverage these advancements to create more efficient and feature-rich applications. No wonder, around 32% of developers [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":7870,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_wp_applaud_exclude":false,"footnotes":""},"categories":[3],"tags":[462,461],"class_list":["post-7861","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","tag-react-native-app-developmen","tag-react-native-architecture"],"featured_image_src":{"landsacpe":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/Navigating-the-New-Landscape_-React-Native-Architecture-and-Development-1140x445.jpg",1140,445,true],"list":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/Navigating-the-New-Landscape_-React-Native-Architecture-and-Development-463x348.jpg",463,348,true],"medium":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/Navigating-the-New-Landscape_-React-Native-Architecture-and-Development-300x169.jpg",300,169,true],"full":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/Navigating-the-New-Landscape_-React-Native-Architecture-and-Development.jpg",2048,1152,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Understanding New React Native Architecture and Development Strategy<\/title>\n<meta name=\"description\" content=\"Learn everything about the new React Native architecture 2024 update with this guide. Also, find out how to migrate to the new React Native architecture.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dianapps.com\/blog\/understanding-new-react-native-architecture-and-development-strategy\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding New React Native Architecture and Development Strategy\" \/>\n<meta property=\"og:description\" content=\"Learn everything about the new React Native architecture 2024 update with this guide. Also, find out how to migrate to the new React Native architecture.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dianapps.com\/blog\/understanding-new-react-native-architecture-and-development-strategy\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn About Digital Transformation &amp; Development | DianApps Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-27T07:24:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-28T09:35:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/Navigating-the-New-Landscape_-React-Native-Architecture-and-Development.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1152\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Khushi Gupta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Khushi Gupta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Understanding New React Native Architecture and Development Strategy","description":"Learn everything about the new React Native architecture 2024 update with this guide. Also, find out how to migrate to the new React Native architecture.","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:\/\/dianapps.com\/blog\/understanding-new-react-native-architecture-and-development-strategy\/","og_locale":"en_US","og_type":"article","og_title":"Understanding New React Native Architecture and Development Strategy","og_description":"Learn everything about the new React Native architecture 2024 update with this guide. Also, find out how to migrate to the new React Native architecture.","og_url":"https:\/\/dianapps.com\/blog\/understanding-new-react-native-architecture-and-development-strategy\/","og_site_name":"Learn About Digital Transformation &amp; Development | DianApps Blog","article_published_time":"2023-12-27T07:24:39+00:00","article_modified_time":"2023-12-28T09:35:15+00:00","og_image":[{"width":2048,"height":1152,"url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/Navigating-the-New-Landscape_-React-Native-Architecture-and-Development.jpg","type":"image\/jpeg"}],"author":"Khushi Gupta","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Khushi Gupta","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dianapps.com\/blog\/understanding-new-react-native-architecture-and-development-strategy\/","url":"https:\/\/dianapps.com\/blog\/understanding-new-react-native-architecture-and-development-strategy\/","name":"Understanding New React Native Architecture and Development Strategy","isPartOf":{"@id":"https:\/\/dianapps.com\/blog\/#website"},"datePublished":"2023-12-27T07:24:39+00:00","dateModified":"2023-12-28T09:35:15+00:00","author":{"@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/32ea190f39896e07d5668f0b76f4763a"},"description":"Learn everything about the new React Native architecture 2024 update with this guide. Also, find out how to migrate to the new React Native architecture.","breadcrumb":{"@id":"https:\/\/dianapps.com\/blog\/understanding-new-react-native-architecture-and-development-strategy\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dianapps.com\/blog\/understanding-new-react-native-architecture-and-development-strategy\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dianapps.com\/blog\/understanding-new-react-native-architecture-and-development-strategy\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dianapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Understanding New React Native Architecture and Development Strategy"}]},{"@type":"WebSite","@id":"https:\/\/dianapps.com\/blog\/#website","url":"https:\/\/dianapps.com\/blog\/","name":"Learn About Digital Transformation &amp; Development | DianApps Blog","description":"Dianapps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dianapps.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/32ea190f39896e07d5668f0b76f4763a","name":"Khushi Gupta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/1701261129967-96x96.jpeg","contentUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/1701261129967-96x96.jpeg","caption":"Khushi Gupta"},"description":"Khushi Gupta, a seasoned content writer at DianApps, seamlessly merges creativity with technical expertise to compose compelling blogs. Driven by a profound passion for technology, her articulate expressions effortlessly bridge the gap between complexity and accessibility, making intricate subjects approachable for diverse readers.","url":"https:\/\/dianapps.com\/blog\/author\/khushi\/"}]}},"_links":{"self":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/7861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/comments?post=7861"}],"version-history":[{"count":2,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/7861\/revisions"}],"predecessor-version":[{"id":7871,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/7861\/revisions\/7871"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media\/7870"}],"wp:attachment":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media?parent=7861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/categories?post=7861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/tags?post=7861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}