{"id":7270,"date":"2023-10-13T10:01:34","date_gmt":"2023-10-13T10:01:34","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=7270"},"modified":"2023-12-18T12:32:10","modified_gmt":"2023-12-18T12:32:10","slug":"what-is-fabric-in-react-native-and-how-does-it-work","status":"publish","type":"post","link":"https:\/\/www.dianapps.com\/blog\/what-is-fabric-in-react-native-and-how-does-it-work\/","title":{"rendered":"What is Fabric in React Native and how does it work?"},"content":{"rendered":"

React Native has gained popularity for mobile app development. Even though newcomers may wonder about its architecture. The latest rendering system employed by React Native is\u00a0 \u00a0 <\/span>Fabric architecture<\/span><\/a>. This system plays a crucial role in the development process, offering insights into how React Native efficiently builds and renders mobile applications.<\/span><\/p>\n

This architecture for React Native has already created a sense of curiosity among all React Native mobile application developers. If you also haven\u2019t had the chance to explore the new React Native architecture, then this blog will serve as your guide to know the fundamentals of the Fabric renderer, its needs, and principles, along with the various phases of the render pipeline. So read it through to the end.\u00a0<\/span><\/p>\n

<\/span>What is this New Architecture Called Fabric?<\/span><\/span><\/h1>\n

Fabric is the new React Native architecture rolled out by the community to make the user experience close or even better than React Native applications. It aims to rebuild the rendering layer of React Native. In simpler terms, it uses asynchronous rendering and a new reconciliation algorithm to <\/span>improve the app\u2019s performance<\/span><\/a> and minimize the time consumed in updating the UI.<\/span><\/p>\n

Just like Fiber architecture worked greatly in ReactJS to improve its diffing algorithm (heuristic algorithm) and overall performance, Fabric is to be put on the same path for enhancing the performance as well as the efficiency of the app.\u00a0<\/span><\/p>\n

To be specific, this Fabric renderer is set to improve React Native interoperability with host platforms, which are responsible for incorporating <\/span>React Native app development framework in Android, macOS, iOS, Windows, etc.\u00a0<\/span><\/p>\n

<\/span>What was the Need for a New React Native Architecture?\u00a0<\/span><\/span><\/h2>\n

Let us look at the problem of the current React Native architecture followed by the cumulative reasons to adopt a new react native architecture.<\/span><\/p>\n

In the old architecture, there were four main parts: the code developers write in React (similar to <\/span>web app development<\/b>), the JavaScript that interprets this code, a set of elements called “The Bridge,” and the Native side of the app.<\/span><\/p>\n

\"\"<\/p>\n

Image Source:<\/a><\/p>\n

Now, in the current architecture, JavaScript and Native parts don’t really know each other. They communicate by sending asynchronous messages in a specific format (like JSON) across The Bridge. They send these messages to the native code, hoping to get a response at some point, but it’s not guaranteed. It’s like sending a letter and waiting for a reply in the mail; you’re not sure when you’ll get it.<\/span><\/p>\n

With the development of <\/span>new render architecture<\/span><\/a>, the possibilities have increase for better user experiences that weren\u2019t achievable with the legacy architecture. Some of the prospective examples include:<\/span><\/p>\n

    \n
  1. With the support of synchronous and multi-party events, the renderer can prioritize certain interactions with users to ensure they are handled at the right time.<\/span><\/li>\n
  2. Easier to incorporate server-side rendering for React Native<\/span><\/li>\n
  3. Enable concurrent features like \u2018startTransition\u2019, \u2018useDeferredValue\u2019, etc.<\/span><\/li>\n
  4. Integration with react Suspense which allows for a more intuitive design of data fetching in react apps.<\/span><\/li>\n<\/ol>\n

    <\/span>Principles of Fabric Architecture\u00a0<\/span><\/span><\/h2>\n

    Here are the key principles of Fabric architecture explained:<\/span><\/p>\n

    <\/span>1. Task Prioritization<\/span><\/span><\/h3>\n

    In regular JavaScript, all tasks are treated equally, whether they’re high or low priority. Fabric architecture is different; it gives top priority to user interactions like scrolling or tapping. These tasks are handled immediately, while less urgent tasks, like API requests, are dealt with one by one and with lower priority. If you want to conduct API response validation <\/a>in React, then you must read it here.<\/span><\/p>\n

    <\/span>2. Immutable Shadow Tree<\/span><\/span><\/h3>\n

    To maintain consistency when multiple threads can request changes, Fabric uses an “immutable” shadow tree. This means that the structure of data or the DOM (Document Object Model) hierarchy can’t change easily. This prevents issues like deadlocks, whether changes come in synchronously or asynchronously.<\/span><\/p>\n

    <\/span>3. Reducing Memory Usage<\/span><\/span><\/h3>\n

    In the current architecture, there are two copies of the hierarchy or DOM nodes \u2013 one in the Shadow thread and one in the JavaScript thread. This consumes more memory than necessary. In Fabric architecture, they introduced a concept to keep a single copy in memory, while other threads only have references to it. This reduces memory usage and improves efficiency.<\/span><\/p>\n

    <\/span>What are the benefits of fabric architecture?<\/span><\/span><\/h2>\n

    The new fabric architecture comes with several benefits that make things better:<\/span><\/p>\n

    <\/span>1. Type Safety<\/span><\/span><\/h3>\n

    It ensures that the code works correctly by generating code that’s safe for both JavaScript and the platform it runs on. This helps catch errors early.<\/span><\/p>\n

    <\/span>2. Shared Core<\/span><\/span><\/h3>\n

    The core part of the system is shared across different platforms. This makes it easier to use React Native on new platforms and keeps things consistent.<\/span><\/p>\n

    <\/span>3. Host Platform Integration<\/span><\/span><\/h3>\n

    It improves how React Native works with the platform it’s running on. This means better integration with the host platform’s tools and features.<\/span><\/p>\n

    <\/span>4. Improved Performance<\/span><\/span><\/h3>\n

    The new system boosts performance for all platforms. What helps one platform’s limitations can benefit others too.<\/span><\/p>\n

    <\/span>5. Consistency\u00a0<\/span><\/span><\/h3>\n

    It ensures that your app looks and works the same way on different devices and platforms.<\/span><\/p>\n

    <\/span>6. Faster Startup<\/span><\/span><\/h3>\n

    The components your app uses are only loaded when they’re needed, making your app start faster.<\/span><\/p>\n

    <\/span>7. Less Data Transfer<\/span><\/span><\/h3>\n

    It improves how data is sent between your app’s JavaScript part and the platform it’s running on. This means things work more smoothly.<\/span><\/p>\n

    Overall, this new architecture makes React Native apps more stable, faster, and better at working with different devices and platforms.<\/span><\/p>\n

    <\/span>What are the three Phases of the Fabric Render Pipeline?<\/span><\/span><\/h2>\n

    The React Native renderer follows a specific process to render React logic on a host platform. This process, known as the render pipeline, applies to both initial rendering and updates to the UI state. The render pipeline consists of three main phases:<\/span><\/p>\n

    \"Fabric<\/p>\n

    <\/span>1. The Rendering Phase<\/span><\/span><\/h3>\n

    \"\"<\/p>\n

    Image source<\/span><\/a><\/p>\n

    The Render phase in Fabric architecture is where React processes the logic to create something called “React element trees.” These trees are basically instructions for what should appear on your app’s screen.<\/span><\/p>\n

    Now, these element trees are used to make something called the “React shadow tree” in C++. This shadow tree is created by the Fabric renderer and consists of “React shadow nodes.” These nodes represent the host components from React that will be mounted (put on the screen), and they also contain information (props) that comes from JavaScript.<\/span><\/p>\n

    const App = () => {\r\n\r\n\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0<View>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<Text>App.js<\/Text>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<\/View>\r\n\r\n\u00a0\u00a0);\r\n\r\n};<\/pre>\n
    During the Render phase, as React processes each element, it makes a shadow node for it. It’s important to note that this development of shadow nodes happens only for host components, not for composite components.<\/span><\/p>\n
    The key here is that the relationships between elements in the React tree match the relationships between the shadow nodes in the shadow tree. This is how the React shadow tree is put together. Once it’s all set, the renderer makes sure everything in the React element tree is displayed correctly on the screen.<\/span><\/p>\n
    <\/span>2. The Commit Phase<\/span><\/span><\/h3>\n
    \"\"<\/p>\n
    Image source<\/span><\/a><\/p>\n
    The Yoga layout engine is necessary for managing tasks in the Commit phase, which includes two major operations: tree promotion and layout calculation.<\/span><\/p>\n
    The Layout calculation finds out where and how big each React Shadow element should be. As soon as the Yoga engine is called, it helps in this process of calculating the layout for each Shadow element.\u00a0<\/span><\/p>\n
    And, once the sizes are known, the Tree Promotion operation puts the new React Shadow tree as the next one to be mounted. The promotion here implies the latest state of the React element tree.<\/span><\/p>\n
    <\/span>3. The Mounting Phase<\/span><\/span><\/h3>\n
    \"\"<\/p>\n
    Image source<\/span><\/a><\/p>\n
    This is the phase wherein the React Shadow Tree (which includes the data from layout calculation) is transforming into a host view tree with renderer pixels on a screen. The fabric renderer creates a similar host view for every React Shadow node and mounts it on the screen.<\/span><\/p>\n
    Also read: How can you <\/span>build your mobile app in 10 days<\/span><\/a> using React Native?<\/span><\/p>\n
    <\/span>Final Takeaways<\/span><\/span><\/h2>\n
    That\u2019s all about fabric! The launch of this new architecture will certainly take React Native to next level. The user experience will definitely become smoother and the release of a fabric-compatible version of react-native-screens is a breakthrough to adapt the new React Native architecture. We hope this article helped you to know about the huge changes that the community brought in their architecture.<\/span><\/p>\n
    DianApps is a <\/span>React Native development company<\/b> in Australia <\/b><\/a>that provides comprehensive solutions for all your app development needs. Our development team understands the performance of your apps and even its issues, prioritizes bugs, and makes every effort to resolve them. If you face any issue while implementing this all-new architecture, get in touch with our experts who can steer you in the right direction.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
    React Native has gained popularity for mobile app development. Even though newcomers may wonder about its architecture. The latest rendering system employed by React Native is\u00a0 \u00a0 Fabric architecture. This system plays a crucial role in the development process, offering insights into how React Native efficiently builds and renders mobile applications. This architecture for React […]<\/p>\n","protected":false},"author":1,"featured_media":7283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_wp_applaud_exclude":false,"footnotes":""},"categories":[3],"tags":[379,104],"class_list":["post-7270","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","tag-fabric-in-react-native","tag-react-native"],"featured_image_src":{"landsacpe":["https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/Untitled-design-16.png",791,445,false],"list":["https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/Untitled-design-16.png",463,260,false],"medium":["https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/Untitled-design-16.png",300,169,false],"full":["https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/Untitled-design-16.png",1536,864,false]},"yoast_head":"\nWhat is Fabric in React Native and how does it work?<\/title>\n<meta name=\"description\" content=\"Fabric is the new rendering layer of react-native's architecture replaced with the current one. Read to know more in detail.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dianapps.com\/blog\/what-is-fabric-in-react-native-and-how-does-it-work\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is Fabric in React Native and how does it work?\" \/>\n<meta property=\"og:description\" content=\"Fabric is the new rendering layer of react-native's architecture replaced with the current one. Read to know more in detail.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dianapps.com\/blog\/what-is-fabric-in-react-native-and-how-does-it-work\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn About Digital Transformation & Development | DianApps Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-13T10:01:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-18T12:32:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/Untitled-design-16.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"864\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vikash Soni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vikash Soni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is Fabric in React Native and how does it work?","description":"Fabric is the new rendering layer of react-native's architecture replaced with the current one. Read to know more in detail.","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:\/\/www.dianapps.com\/blog\/what-is-fabric-in-react-native-and-how-does-it-work\/","og_locale":"en_US","og_type":"article","og_title":"What is Fabric in React Native and how does it work?","og_description":"Fabric is the new rendering layer of react-native's architecture replaced with the current one. Read to know more in detail.","og_url":"https:\/\/www.dianapps.com\/blog\/what-is-fabric-in-react-native-and-how-does-it-work\/","og_site_name":"Learn About Digital Transformation & Development | DianApps Blog","article_published_time":"2023-10-13T10:01:34+00:00","article_modified_time":"2023-12-18T12:32:10+00:00","og_image":[{"width":1536,"height":864,"url":"https:\/\/www.dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/Untitled-design-16.png","type":"image\/png"}],"author":"Vikash Soni","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vikash Soni","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.dianapps.com\/blog\/what-is-fabric-in-react-native-and-how-does-it-work\/","url":"https:\/\/www.dianapps.com\/blog\/what-is-fabric-in-react-native-and-how-does-it-work\/","name":"What is Fabric in React Native and how does it work?","isPartOf":{"@id":"https:\/\/www.dianapps.com\/blog\/#website"},"datePublished":"2023-10-13T10:01:34+00:00","dateModified":"2023-12-18T12:32:10+00:00","author":{"@id":"https:\/\/www.dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f"},"description":"Fabric is the new rendering layer of react-native's architecture replaced with the current one. Read to know more in detail.","breadcrumb":{"@id":"https:\/\/www.dianapps.com\/blog\/what-is-fabric-in-react-native-and-how-does-it-work\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dianapps.com\/blog\/what-is-fabric-in-react-native-and-how-does-it-work\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dianapps.com\/blog\/what-is-fabric-in-react-native-and-how-does-it-work\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dianapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What is Fabric in React Native and how does it work?"}]},{"@type":"WebSite","@id":"https:\/\/www.dianapps.com\/blog\/#website","url":"https:\/\/www.dianapps.com\/blog\/","name":"Learn About Digital Transformation & Development | DianApps Blog","description":"Dianapps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dianapps.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f","name":"Vikash Soni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dianapps.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","contentUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","caption":"Vikash Soni"},"description":"Vikash Soni, the visionary CEO and Co-founder of DianApps. With his profound expertise in Android and iOS app development, he leads the team to deliver top-notch solutions to clients worldwide. Under his guidance, the company has achieved remarkable success, earning a reputation as a leading web and mobile app development company.","sameAs":["https:\/\/www.linkedin.com\/in\/vikash-soni-59726530\/"],"url":"https:\/\/www.dianapps.com\/blog\/author\/infodianapps-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/7270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/comments?post=7270"}],"version-history":[{"count":3,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/7270\/revisions"}],"predecessor-version":[{"id":7766,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/7270\/revisions\/7766"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/media\/7283"}],"wp:attachment":[{"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/media?parent=7270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/categories?post=7270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dianapps.com\/blog\/wp-json\/wp\/v2\/tags?post=7270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}