<div class="post-toc-block float-default with-border"> 
						<div class="post-toc-header">Table of Contents</div>
						<nav id="md-post-toc" class="md-post-toc"></nav>
						</div>
<p><a href="https://hashnode.com/@HermioneDadheech"></a></p>


<h2 class="wp-block-heading" id="heading-the-secret-to-fast-and-responsive-websites">The Secret to Fast and Responsive Websites</h2>


<p>Ever wondered why your favorite websites are so fast and responsive? It all boils down to how they handle DOM manipulation. The Document Object Model (DOM) represents your web page as a structured tree. Traditionally, we used JavaScript methods like&nbsp;<code>getElementById</code>&nbsp;or&nbsp;<code>removeChild</code>&nbsp;to make changes. But as websites get more complex, these methods can slow things down. Enter React, with its game-changing Virtual DOM.</p>


<h2 class="wp-block-heading" id="heading-the-challenge-with-traditional-dom-manipulation"><strong>The Challenge with Traditional DOM Manipulation</strong></h2>


<p>Think of the DOM as a massive tree with tons of branches. Every time you want to change something, like updating the first item in a list of ten, you end up shaking the whole tree. This can slow things down, especially as web pages become more complex. The more branches (elements) you have, the harder it gets to keep everything running smoothly.</p>


<h2 class="wp-block-heading" id="heading-reacts-solution-the-virtual-dom"><strong>React&#8217;s Solution: The Virtual DOM</strong></h2>


<p>React addresses this issue with the Virtual DOM, a lightweight copy of the HTML DOM. Changes are first applied to the Virtual DOM, and then React efficiently updates the real DOM to reflect these changes. This process, known as Reconciliation, ensures that only the necessary parts of the DOM are updated, significantly improving performance.</p>


<h2 class="wp-block-heading" id="heading-how-the-virtual-dom-works">How the Virtual DOM Works</h2>


<p>When you render a JSX element in React, the entire Virtual DOM is updated. Although this might sound inefficient, it&#8217;s faster than directly manipulating the real DOM. Here&#8217;s why: React creates a copy of the Virtual DOM before making any updates. It then compares the updated Virtual DOM with this copy using a process called Diffing. This comparison identifies the specific elements that have changed, and React updates only those elements in the real DOM.</p>


<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="703" src="https://wp.keploy.io/wp-content/uploads/2024/07/dom-1024x703.webp" alt="" class="wp-image-1977" srcset="https://wp.keploy.io/wp-content/uploads/2024/07/dom-1024x703.webp 1024w, https://wp.keploy.io/wp-content/uploads/2024/07/dom-300x206.webp 300w, https://wp.keploy.io/wp-content/uploads/2024/07/dom-768x527.webp 768w, https://wp.keploy.io/wp-content/uploads/2024/07/dom.webp 1402w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>


<h2 class="wp-block-heading" id="heading-under-the-hood-reacts-diffing-algorithm"><strong>Under the Hood: React&#8217;s Diffing Algorithm</strong></h2>


<p>React&#8217;s Diffing Algorithm is the secret sauce behind its efficient DOM updates. This algorithm compares two versions of the Virtual DOM and applies the minimal set of changes needed to synchronize them.<br>If the root elements of two trees are of different types, React will rebuild the entire tree. For instance, changing a&nbsp;<code>&lt;div&gt;</code>&nbsp;to a&nbsp;<code>&lt;span&gt;</code>&nbsp;will cause React to tear down and rebuild the tree from scratch.</p>


<pre class="wp-block-code"><code>
&lt;div&gt;
  &lt;Tree/&gt;
&lt;/div&gt;
&lt;span&gt;
  &lt;Tree/&gt;
&lt;/span&gt;
</code></pre>


<p>Since the root elements (div and span) are different, React will reconstruct the entire tree.</p>


<p><strong>Same Element Types</strong>COPY</p>


<pre class="wp-block-code"><code>
&lt;span id="span1" /&gt;
&lt;span id="span2" /&gt;
</code></pre>


<p>Here, React will only update the&nbsp;<code>id</code>&nbsp;attribute, leaving the rest of the element intact.</p>


<p><strong>Comparing Child Elements</strong></p>


<p>React also optimizes updates to child elements. Consider these lists:COPY</p>


<pre class="wp-block-code"><code>
&lt;ul&gt;
  &lt;li&gt;Child1&lt;/li&gt;
  &lt;li&gt;Child2&lt;/li&gt;
&lt;/ul&gt;
</code></pre>


<p>COPY</p>


<pre class="wp-block-code"><code>
&lt;ul&gt;
  &lt;li&gt;Child1&lt;/li&gt;
  &lt;li&gt;Child2&lt;/li&gt;
  &lt;li&gt;Child3&lt;/li&gt;
&lt;/ul&gt;
</code></pre>


<p>React sees&nbsp;<code>Child3</code>&nbsp;as new and updates accordingly. However, if a new element is added at the beginning, React might rebuild the whole list. This is where keys come in.<br><strong>The Role of Keys in Optimizing Updates</strong></p>


<p>Keys help React track which elements have changed, are added, or removed. They should be unique among siblings and stable across renders.COPY</p>


<pre class="wp-block-code"><code>
&lt;ul&gt;
  &lt;li key="101"&gt;Child1&lt;/li&gt;
  &lt;li key="102"&gt;Child2&lt;/li&gt;
&lt;/ul&gt;

&lt;ul&gt;
  &lt;li key="100"&gt;Child3&lt;/li&gt;
  &lt;li key="101"&gt;Child1&lt;/li&gt;
  &lt;li key="102"&gt;Child2&lt;/li&gt;
&lt;/ul&gt;
</code></pre>


<p>In this example, React knows&nbsp;<code>Child3</code>&nbsp;is new and efficiently updates the list without rebuilding it.</p>


<h2 class="wp-block-heading" id="heading-manipulating-the-dom-with-refs"><strong>Manipulating the DOM with Refs</strong></h2>


<p>While React optimizes DOM updates with its Virtual DOM, there are scenarios where direct manipulation of DOM elements is necessary, such as focusing an input, scrolling to a specific element, or measuring an element&#8217;s dimensions. React provides the&nbsp;<code>useRef</code>&nbsp;Hook for this purpose. By creating a ref and attaching it to a DOM element via the&nbsp;<code>ref</code>&nbsp;attribute, you can gain direct access to the DOM node. The&nbsp;<code>useRef</code>&nbsp;Hook returns an object with a&nbsp;<code>current</code>&nbsp;property, which initially is&nbsp;<code>null</code>&nbsp;but gets assigned the DOM node once it&#8217;s rendered. This allows you to call native DOM methods directly on the element, enhancing control over specific interactions. For instance, you can use&nbsp;<code>myRef.current.scrollIntoView()</code>&nbsp;to scroll the element into view.</p>


<p><strong>Example: Color-Changing Div</strong><br>Let&#8217;s create a fun example to see this in action. We’ll make a div that changes color when you click a button. We&#8217;ll use a class-based component and a ref to directly manipulate the div&#8217;s style.COPY</p>


<pre class="wp-block-code"><code>
&lt;div id="root"&gt;&lt;/div&gt;
</code></pre>




<pre class="wp-block-code"><code>
const root = ReactDOM.createRoot(document.getElementById('root'));

class ColorChanger extends React.Component {
  constructor(props) {
    super(props);
    this.divRef = React.createRef();
    this.colors = &#91;'#FFCDD2', '#C8E6C9', '#BBDEFB', '#FFF9C4', '#D1C4E9'];
    this.state = { colorIndex: 0 };
    this.changeColor = this.changeColor.bind(this);
  }

  changeColor() {
    const nextColorIndex = (this.state.colorIndex + 1) % this.colors.length;
    this.setState({ colorIndex: nextColorIndex });
    this.divRef.current.style.backgroundColor = this.colors&#91;nextColorIndex];
  }

  render() {
    return (
      &lt;div className="container"&gt;
        &lt;div
          ref={this.divRef}
          className="color-box"
          style={{
            backgroundColor: this.colors&#91;this.state.colorIndex],
          }}
        &gt;&lt;/div&gt;
        &lt;button onClick={this.changeColor}&gt;Change Color&lt;/button&gt;
      &lt;/div&gt;
    );
  }
}

root.render(&lt;ColorChanger /&gt;);
</code></pre>

<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/Hermione24/embed/qBzdaRj?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"><br />
  See the Pen <a href="https://codepen.io/Hermione24/pen/qBzdaRj"><br />
  Untitled</a> by Hermione  (<a href="https://codepen.io/Hermione24">@Hermione24</a>)<br />
  on <a href="https://codepen.io">CodePen</a>.<br />
</iframe>

<p><strong>Explanation</strong></p>


<ul class="wp-block-list">
<li><strong>Creating the Root:</strong>&nbsp;The React app&#8217;s root is created using&nbsp;<code>ReactDOM.createRoot(document.getElementById('root'))</code>.</li>



<li><strong>ColorChanger Component:</strong>
<ul class="wp-block-list">
<li><strong>Constructor:</strong>&nbsp;Initializes the ref with&nbsp;<code>React.createRef()</code>, sets up the colors array, and initializes the state to track the color index.</li>



<li><strong>changeColor Method:</strong>&nbsp;Calculates the next color index, updates the state, and changes the div&#8217;s background color by directly manipulating the DOM.</li>



<li><strong>Render Method:</strong>&nbsp;Renders the div and button, attaching the ref to the div and setting the button&#8217;s onClick handler to&nbsp;<code>changeColor</code>.</li>
</ul>
</li>



<li><strong>Rendering the Component:</strong>&nbsp;The&nbsp;<code>ColorChanger</code>&nbsp;component is rendered into the root element.</li>
</ul>


<h2 class="wp-block-heading" id="heading-conclusion"><strong>Conclusion</strong></h2>


<p>React&#8217;s Virtual DOM is a game-changer for web development, making our apps more efficient and responsive. By leveraging the Virtual DOM, React ensures that only the necessary parts of the DOM are updated, boosting performance. Understanding how React’s Diffing Algorithm and keys work can help you create smoother and faster React applications. And when you need precise control, React’s refs are there to help you interact directly with the DOM. Embrace the power of the Virtual DOM and take your web development skills to the next level!</p>

         
        
                    

                    
                    <div class="pp-multiple-authors-boxes-wrapper pp-multiple-authors-wrapper pp-multiple-authors-layout-boxed multiple-authors-target-the-content box-post-id-16 box-instance-id-1 ppma_boxes_16"
                    data-post_id="16"
                    data-instance_id="1"
                    data-additional_class="pp-multiple-authors-layout-boxed.multiple-authors-target-the-content"
                    data-original_class="pp-multiple-authors-boxes-wrapper pp-multiple-authors-wrapper box-post-id-16 box-instance-id-1">
                                                                                    <h2 class="widget-title box-header-title">Author</h2>
                                                                            <span class="ppma-layout-prefix"></span>
                        <div class="ppma-author-category-wrap">
                                                                                                <span class="ppma-category-group ppma-category-group-">
                                                                                                                        <ul class="pp-multiple-authors-boxes-ul">
                                                                                                                                                                                                                                                                                                                                                                                                                    <li class="pp-multiple-authors-boxes-li author_index_0 author_hermione-dadheech has-avatar">
                                                                                                                                                                                                                                            <div class="pp-author-boxes-avatar">
                                                                                                                                            <img alt='Hermione Dadheech' src='https://wp.keploy.io/wp-content/uploads/2024/10/hermione.jpeg' srcset='https://wp.keploy.io/wp-content/uploads/2024/10/hermione.jpeg' class='multiple_authors_guest_author_avatar avatar' height='80' width='80'/>                                                                                                                                    </div>
                                                            
                                                            <div class="pp-author-boxes-avatar-details">
                                                                                                                                                                                                <div class="pp-author-boxes-name multiple-authors-name">
                                                                        <a href="https://wp.keploy.io/author/hermione-dadheech/" rel="author" title="Hermione Dadheech" class="author url fn">Hermione Dadheech</a> 
                                                                    </div>
                                                                                                                                                                                                                                                                    <p class="pp-author-boxes-description multiple-authors-description">
                                                                        I’m a driven Software Engineer with 2 years of front-end development experience, skilled in JavaScript, React.js, Next.js, Tailwind CSS, and Material UI. I specialize in building responsive web applications and integrating with RESTful and GraphQL APIs.                                                                    </p>
                                                                                                                                
                                                                                                                                
                                                                                                                            </div>
                                                                                                                                                                                                                                                                                                                                                                                                             </li>
                                                                                                                                                                                                                                    </ul>
                                                                            </span>
                                                                                    </div>
                    <span class="ppma-layout-suffix"></span>
                    </div>
                    
                    
                
                                <style>
                .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-author-boxes-avatar img { width: 80px !important; height: 80px !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-author-boxes-avatar img { border-style: none !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-author-boxes-avatar img { border-radius: 50% !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-author-boxes-meta a { background-color: #655997 !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-author-boxes-meta a { color: #ffffff !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-author-boxes-meta a:hover { color: #ffffff !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .ppma-author-user_email-profile-data { background-color: #655997 !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .ppma-author-user_email-profile-data { border-radius: 100% !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .ppma-author-user_email-profile-data { color: #ffffff !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .ppma-author-user_url-profile-data { background-color: #655997 !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .ppma-author-user_url-profile-data { border-radius: 100% !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .ppma-author-user_url-profile-data { color: #ffffff !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-author-boxes-recent-posts-title { border-bottom-style: dotted !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-multiple-authors-boxes-li { border-style: solid !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-multiple-authors-boxes-li { border-width: 1px !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-multiple-authors-boxes-li { border-color: #999 !important; } .pp-multiple-authors-boxes-wrapper.box-post-id-16.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content.box-instance-id-1 .pp-multiple-authors-boxes-li { color: #3c434a !important; }             </style>

Efficient DOM Manipulation with the Virtual DOM and Refs

A Complete Guide to End-to-End Testing with Keploy

TypeScript vs JavaScript : Choosing the Right One

The Complete Guide to Low Code Automation: Everything You Need to Know

Test Automation 2030: Rethinking Test-Pyramid Strategies for the AI-Era

Regression Analysis: The Key to Smarter, Data-Driven Decisions

Understanding Sanity Testing: A Practical Guide for Modern Development

What is Test Automation?

Building Keploy.io, an EBPF based open source framework to generate test cases and data stubs from API calls.

Neha Gupta

Cloud technology veteran and probably the youngest (globally) to have completed all 5 AWS certifications (including Solutions architect Professional and Dev­ops engineer professional)

Efficient Dom Manipulation With The Virtual Dom And Refs

More Stories