{"id":5579,"date":"2019-11-05T17:05:06","date_gmt":"2019-11-05T11:35:06","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=5579"},"modified":"2026-01-14T11:52:04","modified_gmt":"2026-01-14T06:22:04","slug":"understanding-of-react-fiber-architecture","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/","title":{"rendered":"Understanding Of React Fiber Architecture"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">React v16.0 was released with an update to react core algorithm. This new core architecture is named \u201c<\/span><i><span style=\"font-weight: 400;\">Fiber<\/span><\/i><span style=\"font-weight: 400;\">\u201d. Facebook has completely rewritten the internals of React from the ground-up while keeping the public API essentially unchanged, in simple terms it means only changing the engine of a running car. With this release, some new features are also added like Asynchronous Rendering, Portals, Error Boundaries, Fragments (i.e. return array of elements). Incremental rendering is the headline addition to React which adds the ability to split rendering work into chunks.<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">React Fiber<\/span><\/i><span style=\"font-weight: 400;\"> is the new reconciliation algorithm. Reconciliation is the process of comparing or diffing old trees with a new tree in order to find what is changed or modified. In the original reconciliation algorithm (now called Stack Reconciler) the processing of component tree was done synchronously in a single pass, so the Main Thread was not available for other UI related tasks like animation, layouts, and gestures handling. Fiber Reconciler has different goals:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Ability to split interruptible work in chunks.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Ability to prioritize, rebase and reuse work in progress.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Ability to yield back and forth between parents and children to support layout in React.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Ability to return multiple elements from render().<\/span><\/li>\n<\/ul>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"size-medium wp-image-5580 aligncenter\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_aruu224g.5a2-300x189.png\" alt=\"\" width=\"300\" height=\"189\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_aruu224g.5a2-300x189.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_aruu224g.5a2.png 501w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p style=\"text-align: center;\"><i><span style=\"font-weight: 400;\">Fig: Stack Reconciler (synchronous rendering)<\/span><\/i><\/p>\n<p><img decoding=\"async\" class=\"size-medium wp-image-5581 aligncenter\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_pizaqgkf.5es-300x170.png\" alt=\"\" width=\"300\" height=\"170\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_pizaqgkf.5es-300x170.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_pizaqgkf.5es.png 497w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p style=\"text-align: center;\"><i><span style=\"font-weight: 400;\">Fig: Fiber Reconciler (asynchronous rendering)<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Sierpinski triangle<\/strong> rendering using Stack and Fiber:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/claudiopro.github.io\/react-fiber-vs-stack-demo\/fiber.html\"><span style=\"font-weight: 400;\">Fiber Example<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/claudiopro.github.io\/react-fiber-vs-stack-demo\/stack.html\"><span style=\"font-weight: 400;\">Stack Example<\/span><\/a><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">In the above example, there are 2 different kinds of updates going on. One that makes the triangle narrow and wide which has to happen every 16ms (60 FPS) in order for the animation to look smooth and one that updates the numbers contained inside every single dot which happens approximately every 1000ms.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A <\/span><i><span style=\"font-weight: 400;\">fiber<\/span><\/i><span style=\"font-weight: 400;\"> (not Fiber with a capital \u2018F\u2019) is a javascript object that contains information about a component, its input, and output. At any time, a component instance has at most two fibers that correspond to it: the current fiber and the work-in-progress fiber. Fiber can be defined as a unit of work.<\/span><\/p>\n<p><strong>Fiber prioritizes work on 7 levels:<\/strong><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">NoWork \u2013 no work is pending.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">SynchronousPriority \u2013 for controlled text inputs. Synchronous side-effects.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">TaskPriority \u2013 completes at the end of the current tick.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">AnimationPriority \u2013 needs to complete before the next frame.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">HighPriority \u2013 an interaction that needs to complete pretty soon to feel responsive.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">low priority \u2013 data fetching, or result from updating stores.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">OffscreenPriority \u2013 Won\u2019t be visible but do the work in case it becomes visible.<\/span><\/li>\n<\/ol>\n<p><strong>React Fiber performs reconciliation in two phases: Render and Commit<\/strong><\/p>\n<p><strong style=\"font-size: 1rem;\">1. Lifecycle methods called during render phase:<\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">UNSAFE_componentWillMount()<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">UNSAFE_componentWillReceiveProps()<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">getDerivedStateFromProps()<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">shouldComponentUpdate()<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">UNSAFE_componentWillUpdate()<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">render()<\/span><\/li>\n<\/ul>\n<p><strong>2. Lifecycle methods called during commit phase:<\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">getSnapshotBeforeUpdate()<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">componentDidMount()<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">componentDidUpdate()<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">componentWillUnmount()<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Earlier whole reconciliation process was synchronous (recursive) but in Fiber it is divided in two phases. Render phase (a.k.a. Reconciliation phase) is asynchronous and due this reason three of the lifecycle methods were marked unsafe because putting the code with side-effects inside these methods can cause problems as lifecycle methods of different components are not guaranteed to fire in predictable order.<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-medium wp-image-5582 aligncenter\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_icmd025i.5oe-300x76.png\" alt=\"\" width=\"300\" height=\"76\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_icmd025i.5oe-300x76.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_icmd025i.5oe-624x158.png 624w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_icmd025i.5oe.png 627w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p style=\"text-align: center;\"><i><span style=\"font-weight: 400;\"><strong>Fig: Triangle update timeline\u00a0<\/strong>(Image Source: Giamir Blog)<\/span><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-5583 aligncenter\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_rftmgvdm.fe5_-300x105.png\" alt=\"\" width=\"300\" height=\"105\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_rftmgvdm.fe5_-300x105.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_rftmgvdm.fe5_-624x219.png 624w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_rftmgvdm.fe5_.png 643w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p style=\"text-align: center;\"><i><span style=\"font-weight: 400;\"><strong>\u00a0Fig: Triangle update timeline using Stack <\/strong>(Image Source: Giamir Blog)<\/span><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-5584 aligncenter\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_w1nh5exe.ubn_-300x222.png\" alt=\"\" width=\"300\" height=\"222\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_w1nh5exe.ubn_-300x222.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/picturemessage_w1nh5exe.ubn_.png 623w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p style=\"text-align: center;\"><i><span style=\"font-weight: 400;\">\u00a0<strong>Fig: Triangle update timeline using Fiber<\/strong> (Image Source: Giamir Blog)<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">React Fiber uses requestIdleCallback() to schedule the low priority work and requestAnimationFrame() to schedule high priority work.<\/span><\/p>\n<p><strong>Problems with Current Implementation:<\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Long-running tasks cause frame drops.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Different tasks have different priorities.<\/span><\/li>\n<\/ul>\n<p><strong>So in a nutshell, what makes Fiber interesting?<\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It makes apps more fluid and responsible.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">In the future, it could parallelize work a.k.a. Time Slicing.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It would improve startup time while rendering components using React Suspense.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Fiber is currently available for use but it runs in compatibility mode with the current implementation.<\/span><\/p>\n<p>InnovationM is a globally renowned mobile app development company in Noida that caters to a robust &amp; secure Android app development, iOS app development, hybrid app development services. Our commitment &amp; engagement towards our target gives us brighter in the world of technology and has led us to establish success stories consecutively. InnovationM is the top Android app development company in Noida.<\/p>\n<p>Thanks for giving your valuable time. Keep reading and keep learning.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React v16.0 was released with an update to react core algorithm. This new core architecture is named \u201cFiber\u201d. Facebook has completely rewritten the internals of React from the ground-up while keeping the public API essentially unchanged, in simple terms it means only changing the engine of a running car. With this release, some new features [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5587,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[257],"tags":[],"class_list":["post-5579","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Understanding Of React Fiber Architecture - InnovationM - Blog<\/title>\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.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding Of React Fiber Architecture - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"React v16.0 was released with an update to react core algorithm. This new core architecture is named \u201cFiber\u201d. Facebook has completely rewritten the internals of React from the ground-up while keeping the public API essentially unchanged, in simple terms it means only changing the engine of a running car. With this release, some new features [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-05T11:35:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-14T06:22:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/Fibre-architecture.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1145\" \/>\n\t<meta property=\"og:image:height\" content=\"636\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-of-react-fiber-architecture\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-of-react-fiber-architecture\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Understanding Of React Fiber Architecture\",\"datePublished\":\"2019-11-05T11:35:06+00:00\",\"dateModified\":\"2026-01-14T06:22:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-of-react-fiber-architecture\\\/\"},\"wordCount\":684,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-of-react-fiber-architecture\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Fibre-architecture.png\",\"articleSection\":[\"React\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-of-react-fiber-architecture\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-of-react-fiber-architecture\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-of-react-fiber-architecture\\\/\",\"name\":\"Understanding Of React Fiber Architecture - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-of-react-fiber-architecture\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-of-react-fiber-architecture\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Fibre-architecture.png\",\"datePublished\":\"2019-11-05T11:35:06+00:00\",\"dateModified\":\"2026-01-14T06:22:04+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-of-react-fiber-architecture\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-of-react-fiber-architecture\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-of-react-fiber-architecture\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Fibre-architecture.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Fibre-architecture.png\",\"width\":1145,\"height\":636,\"caption\":\"UNDERSTANDING OF REACT FIBER ARCHITECTURE\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-of-react-fiber-architecture\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding Of React Fiber Architecture\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Understanding Of React Fiber Architecture - InnovationM - Blog","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.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/","og_locale":"en_US","og_type":"article","og_title":"Understanding Of React Fiber Architecture - InnovationM - Blog","og_description":"React v16.0 was released with an update to react core algorithm. This new core architecture is named \u201cFiber\u201d. Facebook has completely rewritten the internals of React from the ground-up while keeping the public API essentially unchanged, in simple terms it means only changing the engine of a running car. With this release, some new features [&hellip;]","og_url":"https:\/\/www.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/","og_site_name":"InnovationM - Blog","article_published_time":"2019-11-05T11:35:06+00:00","article_modified_time":"2026-01-14T06:22:04+00:00","og_image":[{"width":1145,"height":636,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/Fibre-architecture.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Understanding Of React Fiber Architecture","datePublished":"2019-11-05T11:35:06+00:00","dateModified":"2026-01-14T06:22:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/"},"wordCount":684,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/Fibre-architecture.png","articleSection":["React"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/","url":"https:\/\/www.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/","name":"Understanding Of React Fiber Architecture - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/Fibre-architecture.png","datePublished":"2019-11-05T11:35:06+00:00","dateModified":"2026-01-14T06:22:04+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/Fibre-architecture.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/11\/Fibre-architecture.png","width":1145,"height":636,"caption":"UNDERSTANDING OF REACT FIBER ARCHITECTURE"},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/understanding-of-react-fiber-architecture\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Understanding Of React Fiber Architecture"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/5579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=5579"}],"version-history":[{"count":1,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/5579\/revisions"}],"predecessor-version":[{"id":8926,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/5579\/revisions\/8926"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/5587"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=5579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=5579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=5579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}