{"id":4099,"date":"2024-04-21T08:20:21","date_gmt":"2024-04-21T08:20:21","guid":{"rendered":"https:\/\/webexplorar.com\/?p=4099"},"modified":"2024-04-21T08:22:32","modified_gmt":"2024-04-21T08:22:32","slug":"the-virtual-dom-react-js","status":"publish","type":"post","link":"https:\/\/webexplorar.com\/the-virtual-dom-react-js\/","title":{"rendered":"The Virtual DOM – React Js"},"content":{"rendered":"
\n
\n
\n
\n
\n

React builds a representation of the browser Document Object Model or DOM in memory called the virtual DOM. As components are updated, React checks to see if the component\u2019s HTML code in the virtual DOM matches the browser DOM. If a change is required, the browser DOM is updated. If nothing has changed, then no update is performed.<\/p>\n

As you know, this is called the\u00a0reconciliation<\/strong>\u00a0process and can be broken down into the following steps:<\/p>\n

Step 1:<\/strong>\u00a0The virtual DOM is updated.<\/p>\n

Step 2:<\/strong>\u00a0The virtual DOM is compared to the previous version of the virtual DOM and checks which elements have changed.<\/p>\n

Step 3:<\/strong>\u00a0The changed elements are updated in the browser DOM.<\/p>\n

Step 4:<\/strong>\u00a0The displayed webpage updates to match the browser DOM.<\/p>\n

As updating the browser DOM can be a slow operation, this process helps to reduce the number of updates to the browser DOM by only updating when it is necessary.<\/p>\n

But even with this process, if a lot of elements are updated by an event, pushing the update to the browser DOM can still be expensive and cause slow performance in the web application.<\/p>\n

The React team invested many years of research into solving this problem. The outcome of that research is what\u2019s known as the React Fiber Architecture.<\/p>\n

The Fiber Architecture allows React to incrementally render the web page. What this means is that instead of immediately updating the browser DOM with all virtual DOM changes, React can spread the update over time. But what does “over time” mean?<\/p>\n

Imagine a really long web page in the web browser. If the user scrolls to the bottom, the top of the web page is no longer visible. The user then clicks a button on the bottom of the web page that updates some text on the top of the web page.<\/p>\n

But the top of the page isn\u2019t visible. Therefore, why update it immediately?<\/p>\n

Perhaps there is text currently displayed on the bottom of the page that also updates when the button is clicked. Wouldn\u2019t that be a higher priority to update than the non-visible text?<\/p>\n

This is the principle of the React Fiber Architecture. React can optimize when and where updates occur to the browser DOM to significantly improve application performance and responsiveness to user input. Think of it as a priority system. The highest priority changes, the elements visible to the user, are updated first. While lower priority changes, the elements not currently displayed, are updated later.<\/p>\n

While you\u2019re unlikely to interact with the virtual DOM and Fiber Architecture yourself, it\u2019s good to know what\u2019s going on if issues occur during the development of your web application.<\/p>\n

There are many tools available to help you investigate how React is processing your webpage. The official React Developer Tools web browser plugin developed by Meta will be one of the key tools in your developer toolbox. So, if you do have to look deeper into the code, you\u2019ll have the right toolbox available to help you. These tools will be explored later on.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

React builds a representation of the browser Document Object Model or DOM in memory called the virtual DOM. As components are updated, React checks to see if the component\u2019s HTML code in the virtual DOM matches the browser DOM. If a change is required, the browser DOM is updated. If nothing has changed, then no update is performed. As you know, this is called the\u00a0reconciliation\u00a0process and can be broken down into the following steps: Step 1:\u00a0The virtual DOM is updated. Step 2:\u00a0The virtual DOM is compared to the previous version of the virtual DOM and checks which elements have changed. […]<\/p>\n","protected":false},"author":1,"featured_media":4101,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[157,1],"tags":[],"class_list":["post-4099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-js","category-recent-posts","post--single"],"aioseo_notices":[],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/webexplorar.com\/wp-json\/wp\/v2\/posts\/4099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webexplorar.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webexplorar.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webexplorar.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webexplorar.com\/wp-json\/wp\/v2\/comments?post=4099"}],"version-history":[{"count":1,"href":"https:\/\/webexplorar.com\/wp-json\/wp\/v2\/posts\/4099\/revisions"}],"predecessor-version":[{"id":4100,"href":"https:\/\/webexplorar.com\/wp-json\/wp\/v2\/posts\/4099\/revisions\/4100"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webexplorar.com\/wp-json\/wp\/v2\/media\/4101"}],"wp:attachment":[{"href":"https:\/\/webexplorar.com\/wp-json\/wp\/v2\/media?parent=4099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webexplorar.com\/wp-json\/wp\/v2\/categories?post=4099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webexplorar.com\/wp-json\/wp\/v2\/tags?post=4099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}