{"id":4096,"date":"2024-01-02T15:23:19","date_gmt":"2024-01-02T15:23:19","guid":{"rendered":"https:\/\/www.itersdesktop.com\/?p=4096"},"modified":"2024-01-02T22:45:41","modified_gmt":"2024-01-02T22:45:41","slug":"understanding-react-rendering-part-1-when-does-react-render-ui-elements","status":"publish","type":"post","link":"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/","title":{"rendered":"Understanding React Rendering: Part 1 &#8211; When Does React Re-render UI elements?"},"content":{"rendered":"<p>One of the key features of React is its ability to update the user interface efficiently by re-rendering components when there are changes to the state or props. However, this re-rendering can be expensive, especially for complex applications with large amounts of data. This article will explore how React triggers a re-render.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a14ff72c6a25\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a14ff72c6a25\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#revise-the-life-cycle-of-a-component-in-react\" >Revise the life cycle of a component in React<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#when-does-react-render-ui-elements\" >When does React render UI elements?<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#analysis\" >Analysis<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#after-the-page-loading\" >After the page loading<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#click-on-the-click-here-to-change-text-and-color-button-called-c1\" >Click on the Click here to change text and color button (called C1)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#click-on-the-increment-a-or-increment-b-button-called-c2\" >Click on the Increment a or Increment b button (called C2)<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#take-away\" >Take away<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#references\" >References<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#revise-the-life-cycle-of-a-component-in-react-2\" >Revise the life cycle of a component in React<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#when-does-react-render-ui-elements-2\" >When does React render UI elements?<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#analysis-2\" >Analysis<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#after-the-page-loading-2\" >After the page loading<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#click-on-the-click-here-to-change-text-and-color-button-called-c1-2\" >Click on the Click here to change text and color button (called C1)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#click-on-the-increment-a-or-increment-b-button-called-c2-2\" >Click on the Increment a or Increment b button (called C2)<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#take-away-2\" >Take away<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#references-2\" >References<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#revise-the-life-cycle-of-a-component-in-react-3\" >Revise the life cycle of a component in React<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#when-does-react-render-ui-elements-3\" >When does React render UI elements?<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#analysis-3\" >Analysis<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#after-the-page-loading-3\" >After the page loading<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#click-on-the-click-here-to-change-text-and-color-button-called-c1-3\" >Click on the Click here to change text and color button (called C1)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#click-on-the-increment-a-or-increment-b-button-called-c2-3\" >Click on the Increment a or Increment b button (called C2)<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#key-takeaways\" >Key Takeaways<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/www.itersdesktop.com\/vi\/2024\/01\/02\/understanding-react-rendering-part-1-when-does-react-render-ui-elements\/#references-3\" >References<\/a><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"revise-the-life-cycle-of-a-component-in-react\"><\/span>Revise the life cycle of a component in React<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>The life cycle of a React component represents the different phases of the lifetime of a component. <span class=\"cds-753 cds-Typography-base css-80vnnb cds-755\" aria-hidden=\"true\">Components are created or mounted on the DOM;\u00a0 <\/span><span class=\"cds-753 cds-Typography-base css-80vnnb cds-755\" aria-hidden=\"true\">they grow by updating and then die or are unmounted on DOM.\u00a0 <\/span><span class=\"cds-753 cds-Typography-base css-80vnnb cds-755\" aria-hidden=\"true\">This is referred to as a component life cycle.\u00a0<\/span><span class=\"cds-753 cds-Typography-base css-80vnnb cds-755\" aria-hidden=\"true\">In the mounting phase, the component is added to the DOM.\u00a0<\/span><span class=\"cds-753 cds-Typography-base css-80vnnb cds-755\" aria-hidden=\"true\">Updating is the phase where the states and props of a component change when some user events occur.\u00a0<\/span><span class=\"cds-753 cds-Typography-base css-80vnnb cds-755\" aria-hidden=\"true\">And, the unmounting phase is the third and final phase, where the component is removed from the DOM. The picture below shows these phases accordingly.<\/span><\/p>\n<figure id=\"attachment_4100\" aria-describedby=\"caption-attachment-4100\" style=\"width: 1978px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4100\" src=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-lifecycyle-component-phases.png\" alt=\"Phases of the life cycle of React Components\" width=\"1978\" height=\"1212\" srcset=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-lifecycyle-component-phases.png 1978w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-lifecycyle-component-phases-300x184.png 300w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-lifecycyle-component-phases-1024x627.png 1024w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-lifecycyle-component-phases-768x471.png 768w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-lifecycyle-component-phases-1536x941.png 1536w\" sizes=\"auto, (max-width: 1978px) 100vw, 1978px\" \/><figcaption id=\"caption-attachment-4100\" class=\"wp-caption-text\"><em>Phases of the life cycle of React Components<\/em><\/figcaption><\/figure>\n<h1><span class=\"ez-toc-section\" id=\"when-does-react-render-ui-elements\"><\/span>When does React render UI elements?<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>React is listening to any changes to states and props. Then, it will render or re-render UI elements if <strong>at least one change<\/strong> has been made to any of the UI elements. Suppose your component makes up more than one UI element. In that case, the rendering is potentially expensive because React will recompute everything although it uses shallow comparison to detect which elements have been updated in their states or props.<\/p>\n<p>React recognised those changes because we use hooks such as <code>useState<\/code>, <code>useEffect<\/code>, and so on.<\/p>\n<p>Let&#8217;s work out the following example:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-title=\"App Component\">import '.\/App.css';\r\nimport SumComp from \".\/shared\/SumComp\";\r\n\r\nfunction App() {\r\n  return (\r\n    &lt;div className=\"App\"&gt;\r\n      &lt;SumComp\/&gt;\r\n    &lt;\/div&gt;\r\n  );\r\n}\r\n\r\nexport default App;<\/pre>\n<p>The <code>SumComp<\/code> component is defined below.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-title=\"SumComp Component\">import React, {useState, useMemo} from 'react';\r\n\r\nfunction SumComp() {\r\n    console.log(\"Rendering SumComp component...\");\r\n    const COLOURS = ['aqua', 'blue', 'fuchsia', 'gray', 'green',\r\n        'lime', 'maroon', 'navy', 'olive', 'orange', 'purple', 'red',\r\n        'silver', 'teal', 'yellow'];\r\n    const cId = randomColor(COLOURS.length);\r\n    const [colorName, setColorName] = useState(COLOURS[cId]);\r\n    const [txt, setTxt] = useState(\"Some text\");\r\n    const [a, setA] = useState(0);\r\n    const [b, setB] = useState(0);\r\n    \/\/ const sum = useMemo(() =&gt; {\r\n    \/\/     console.log(\"Computing sum...\");\r\n    \/\/     return a + b;\r\n    \/\/ }, [a, b]);\r\n    const sum = expensiveComputing(a, b);\r\n    return (\r\n        &lt;div&gt;\r\n            &lt;p&gt;Text: &lt;span style={{\"color\": colorName}}&gt;{txt}&lt;\/span&gt;&lt;\/p&gt;\r\n            &lt;p&gt;a: {a}&lt;\/p&gt;\r\n            &lt;p&gt;b: {b}&lt;\/p&gt;\r\n            &lt;p&gt;sum: {sum}&lt;\/p&gt;\r\n            &lt;button onClick={() =&gt; {\r\n                const text = Math.random().toString(36).slice(2, 7);\r\n                setTxt(text);\r\n                const colorIndex = randomColor(COLOURS.length);\r\n                const colorName = COLOURS[colorIndex];\r\n                setColorName(colorName);\r\n            }}&gt;Click here to change text and color&lt;\/button&gt;\r\n            &lt;button onClick={() =&gt; setA(a + 1)}&gt;Increment a&lt;\/button&gt;\r\n            &lt;button onClick={() =&gt; setB(b + 1)}&gt;Increment b&lt;\/button&gt;\r\n        &lt;\/div&gt;\r\n    );\r\n}\r\n\r\nfunction randomColor(max) {\r\n    console.log(\"Calling random color index...\")\r\n    return Math.floor(Math.random()*max);\r\n}\r\nfunction expensiveComputing(x, y) {\r\n    console.log(\"Calling expensive computing...\");\r\n    return x + y;\r\n}\r\n\r\nexport default SumComp;<\/pre>\n<p>Starting the application, the page looks like below.<\/p>\n<figure id=\"attachment_4101\" aria-describedby=\"caption-attachment-4101\" style=\"width: 643px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4101\" src=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-screenshot.png\" alt=\"Screenshot of the example\" width=\"643\" height=\"255\" srcset=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-screenshot.png 643w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-screenshot-300x119.png 300w\" sizes=\"auto, (max-width: 643px) 100vw, 643px\" \/><figcaption id=\"caption-attachment-4101\" class=\"wp-caption-text\"><em>Screenshot of the example when it is fully loaded at first<\/em><\/figcaption><\/figure>\n<p>In the source code published <a href=\"https:\/\/github.com\/ITersDesktop\/react-caching\/tree\/rendering\" target=\"_blank\" rel=\"noopener\">here<\/a> in the <code>rendering<\/code> branch, we define a component called SumComp which has a paragraph to capture a random text, a paragraph to hold the value of the variable <code>a<\/code> and another paragraph to hold the value of the variable <code>b<\/code>.\u00a0 Also, we need another paragraph to hold the sum of the value <code>a<\/code> and <code>b<\/code>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"analysis\"><\/span>Analysis<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"after-the-page-loading\"><\/span>After the page loading<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<figure id=\"attachment_4104\" aria-describedby=\"caption-attachment-4104\" style=\"width: 1089px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4104\" src=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-analysis-00.png\" alt=\"How React renders UI elements - Analysis of the example - loading\" width=\"1089\" height=\"265\" srcset=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-analysis-00.png 1089w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-analysis-00-300x73.png 300w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-analysis-00-1024x249.png 1024w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-analysis-00-768x187.png 768w\" sizes=\"auto, (max-width: 1089px) 100vw, 1089px\" \/><figcaption id=\"caption-attachment-4104\" class=\"wp-caption-text\"><em>How React renders UI elements &#8211; Analysis of the example &#8211; loading<\/em><\/figcaption><\/figure>\n<p>As shown in the screenshot above, React has called the function to define <code>SumComp<\/code> component (<em>Rendering SumComp component<\/em>) where the local function generates a colour code (<em>Calling random color index<\/em>) and the function computes a sum expensively (<em>Calling expensive computing<\/em>).<\/p>\n<h3><span class=\"ez-toc-section\" id=\"click-on-the-click-here-to-change-text-and-color-button-called-c1\"><\/span>Click on the <code>Click here to change text and color<\/code> button (called C1)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<figure id=\"attachment_4105\" aria-describedby=\"caption-attachment-4105\" style=\"width: 1092px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4105 size-full\" title=\"How React renders UI elements - Analysis of the example - Click change colour and text\" src=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-analysis-01.png\" alt=\"How React renders UI elements - Analysis of the example - Click change colour and text\" width=\"1092\" height=\"416\" srcset=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-analysis-01.png 1092w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-analysis-01-300x114.png 300w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-analysis-01-1024x390.png 1024w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-analysis-01-768x293.png 768w\" sizes=\"auto, (max-width: 1092px) 100vw, 1092px\" \/><figcaption id=\"caption-attachment-4105\" class=\"wp-caption-text\"><em>How React renders UI elements &#8211; Analysis of the example &#8211; Click to change colour and text<\/em><\/figcaption><\/figure>\n<p>When clicking on the C1, React detects the changes to the colour name and text which are randomly chosen. It calls all functions defined in the component although the variable <code>a<\/code> and <code>b<\/code> do not change. The expensive computing function is also called even if <code>a<\/code> and <code>b<\/code> are still 0. Imagine that the expensive computing function takes longer to finish.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"click-on-the-increment-a-or-increment-b-button-called-c2\"><\/span>Click on the <code>Increment a<\/code> or <code>Increment b<\/code> button (called C2)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<figure id=\"attachment_4107\" aria-describedby=\"caption-attachment-4107\" style=\"width: 1089px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4107 size-full\" title=\"How React renders UI elements - Analysis of the example - Click to increment a or b variable\" src=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-analysis-02.png\" alt=\"How React renders UI elements - Analysis of the example - Click to increment a or b variable\" width=\"1089\" height=\"657\" srcset=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-analysis-02.png 1089w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-analysis-02-300x181.png 300w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-analysis-02-1024x618.png 1024w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2024\/01\/4096-example-analysis-02-768x463.png 768w\" sizes=\"auto, (max-width: 1089px) 100vw, 1089px\" \/><figcaption id=\"caption-attachment-4107\" class=\"wp-caption-text\"><em>How React renders UI elements &#8211; Analysis of the example &#8211; Click to increment a or b variable<\/em><\/figcaption><\/figure>\n<p>Similarly, clicking on any of these two buttons also hits all functions and logic defined in the <code>SumComp<\/code> component. It shouldn&#8217;t behave that way. Certainly, React offers us some approaches to avoid such a problem, for instance, using <a href=\"https:\/\/react.dev\/reference\/react\/useMemo\" target=\"_blank\" rel=\"noopener\"><code>useMemo<\/code><\/a> or <a href=\"https:\/\/react.dev\/reference\/react\/useCallback\" target=\"_blank\" rel=\"noopener\"><code>useCallback<\/code><\/a> hook or <a href=\"https:\/\/react.dev\/reference\/react\/lazy#suspense-for-code-splitting\" target=\"_blank\" rel=\"noopener\"><code>Lazy loading<\/code><\/a> technique. We will learn about these techniques in the next posts.<\/p>\n<h1><span class=\"ez-toc-section\" id=\"take-away\"><\/span>Take away<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>In this post, we have learned how and when React renders and re-renders components based on the changes to the states or props in the components. When a state or prop is updated, React renders everything defined in components without taking care of whether the other states or props have been changed or not. That&#8217;s the reason we should pay attention to when building complex components where they have to cooperate with different states and data coming from different resources. To grasp more about optimizing rendering components, we have a <a href=\"#\">series of improving React rendering<\/a> for you. For the sake of finality, please take a look at our source code at <a href=\"https:\/\/github.com\/ITersDesktop\/react-caching\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/ITersDesktop\/react-caching<\/a>.<\/p>\n<h1><span class=\"ez-toc-section\" id=\"references\"><\/span>References<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>[1] React, <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"noopener\">https:\/\/react.dev\/<\/a>, accessed Jan 2nd 2024<\/p>\n<p>[2] Understanding React Re-rendering: An Overview of Shallow Comparison and Optimization with Examples, <a href=\"https:\/\/www.linkedin.com\/pulse\/understanding-react-re-rendering-overview-shallow-examples-pandey\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.linkedin.com\/pulse\/understanding-react-re-rendering-overview-shallow-examples-pandey\/<\/a>, accessed Jan 2nd 2024<\/p>\n<p>[3] Optimizing Web Apps in React, <a href=\"https:\/\/www.turing.com\/kb\/optimize-web-apps-in-react\" target=\"_blank\" rel=\"noopener\">https:\/\/www.turing.com\/kb\/optimize-web-apps-in-react<\/a>, accessed Jan 2nd 2024<\/p>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>One of the key features of React is its ability to update the user interface efficiently by re-rendering components when there are changes to the state or props. However, this&hellip; <\/p>\n","protected":false},"author":1,"featured_media":4102,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[827,222],"tags":[832,828,833],"class_list":["post-4096","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","category-web-programming","tag-life-cycle-of-react-component","tag-react","tag-rendering-components"],"_links":{"self":[{"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/posts\/4096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/comments?post=4096"}],"version-history":[{"count":12,"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/posts\/4096\/revisions"}],"predecessor-version":[{"id":4127,"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/posts\/4096\/revisions\/4127"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/media\/4102"}],"wp:attachment":[{"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/media?parent=4096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/categories?post=4096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itersdesktop.com\/vi\/wp-json\/wp\/v2\/tags?post=4096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}