Tech%2FDOM Diff

Error converting content: marked is not a function

- **DOM Diffing**: React's DOM diffing algorithm, known as Reconciliation, actually stems from computer science principles related to tree-diffing algorithms. The ability to efficiently update the DOM is what sets React apart, and it has its roots in algorithms that date back decades.
- What is it?
- The diffing algorithm, also known as reconciliation, is one of the more complex parts of React. It's not just a simple string match. The goal of the diffing algorithm is to update the DOM in the most efficient way possible, given the previous and current state of the component tree.
- Here's a simplified explanation of how it works:
  - 1. React compares the two trees node by node from the top down.
  - 2. If two elements are of different types (e.g., a 
 vs a 
), React assumes they will produce different trees and will not compare them further. It will simply replace the old tree with the new one.
  - 3. If two elements are of the same type, React compares their attributes and updates the existing DOM node to match the new attributes.
  - 4. For lists of children, React uses keys to match children in the original tree with children in the subsequent tree. This is why keys are important when rendering lists in React.
- The actual algorithm is more complex and has many optimizations, but this is the basic idea. The goal is to minimize the number of changes to the DOM because DOM operations are expensive and can slow down the app.
- The diffing algorithm is a key part of what makes React efficient and fast, but it's also one of the more complex parts of the framework. However, as a React developer, you don't need to understand all the details of how the diffing algorithm works. You just need to understand the basic principles and how to write efficient React code.
- Manually manipulating the DOM
  collapsed:: true
- React abstracts away direct DOM manipulation, so you don't typically write code that directly interacts with the DOM. Instead, you write declarative JSX code, and React takes care of updating the DOM to match your JSX.
- However, if you were to manually manipulate the DOM to achieve the same result as your React code, it might look something like this:
- ```javascript 
	  // Get the root element where you want to render your app
	  const root = document.getElementById('root');
	  
	  // Create the main div
	  const div = document.createElement('div');
	  
	  // Create the h1 element
	  const h1 = document.createElement('h1');
	  h1.textContent = 'Test App';
	  
	  // Append the h1 to the div
	  div.appendChild(h1);
	  
	  // Fetch the posts
	  getPosts().then(posts => {
	    // Create the ul element
	    const ul = document.createElement('ul');
	  
	    // Create a li element for each post
	    posts.forEach(post => {
	      const li = document.createElement('li');
	      const details = document.createElement('details');
	      const summary = document.createElement('summary');
	      summary.textContent = post.title;
	      const p = document.createElement('p');
	      p.textContent = post.body;
	  
	      // Append the summary and p to the details
	      details.appendChild(summary);
	      details.appendChild(p);
	  
	      // Append the details to the li
	      li.appendChild(details);
	  
	      // Append the li to the ul
	      ul.appendChild(li);
	    });
	  
	    // Append the ul to the div
	    div.appendChild(ul);
	  
	    // Append the div to the root
	    root.appendChild(div);
	  }).catch(() => {
	    // If the fetch fails, show a loading message
	    const p = document.createElement('p');
	    p.textContent = 'Loading...';
	  
	    // Append the p to the div
	    div.appendChild(p);
	  
	    // Append the div to the root
	    root.appendChild(div);
	  });
	  ```
- This is a simplified example and doesn't include error handling or updates when the data changes. As you can see, it's much more verbose and harder to reason about than the equivalent React code. This is one of the reasons why libraries like React are so popular: they abstract away the complexity of direct DOM manipulation.
- When I mentioned "manipulating the entire DOM", I was referring to the potential inefficiency of manually managing updates to the DOM. In traditional JavaScript, if you're not careful, you might end up making more changes to the DOM than necessary, which can be slow because DOM operations are expensive.
- For example, let's say you have a list of items and you want to update one item in the list. In traditional JavaScript, you might end up re-rendering the entire list, which means removing all the list items from the DOM and adding them back again. This is what I meant by "manipulating the entire DOM".
- React, on the other hand, uses a virtual DOM and a diffing algorithm to optimize this process. When state changes, React creates a new virtual DOM tree and then compares this new tree with the old one. It calculates the minimum number of operations needed to update the real DOM to match the new virtual DOM. This means it only updates the parts of the DOM that actually need to change.
- In the case of the list, React would recognize that only one item needs to be updated, and it would only update that one item in the real DOM. This is much more efficient than re-rendering the entire list.
- So, while the manual DOM manipulation code I showed you was just appending and removing child nodes, in a more complex app with more frequent updates, React's approach can lead to significant performance improvements.
- Sample Diffing Code
  collapsed:: true
- The diffing algorithm in React is quite complex and involves a lot of internal React code. However, I can provide a simplified example to illustrate the concept.
- Let's say we have two virtual DOM trees, oldVdom and newVdom. Each tree is represented as a nested object, where each object represents a DOM node.
- ```javascript
	  let oldVdom = {
	    type: 'div',
	    props: { className: 'old' },
	    children: [
	      { type: 'h1', props: {}, children: ['Hello, world'] }
	    ]
	  };
	  
	  let newVdom = {
	    type: 'div',
	    props: { className: 'new' },
	    children: [
	      { type: 'h1', props: {}, children: ['Hello, world'] }
	    ]
	  };
	  ```
- ```javascript
	  function diff(oldVdom, newVdom) {
	    // If the new VDOM node doesn't exist, this means the node has been removed.
	    if (newVdom === undefined) {
	      return { type: 'DELETE' };
	    }
	  
	    // If the old VDOM node doesn't exist, or if the old and new VDOM nodes are different types,
	    // this means a new node has been added.
	    if (oldVdom === undefined || oldVdom.type !== newVdom.type) {
	      return { type: 'CREATE', newVdom };
	    }
	  
	    // If the old and new VDOM nodes are the same type, this means the node has been updated.
	    if (oldVdom.type === newVdom.type) {
	      // Calculate the props diff
	      let propChanges = diffProps(oldVdom.props, newVdom.props);
	  
	      // Calculate the children diff
	      let childrenChanges = oldVdom.children.map((oldChild, i) =>
	        diff(oldChild, newVdom.children[i])
	      );
	  
	      return { type: 'UPDATE', propChanges, childrenChanges };
	    }
	  }
	  ```
- This function compares the old and new VDOM trees and returns an object that describes the changes that need to be made to update the old tree to match the new tree. This object is then used to update the real DOM.
- Resource
- https://legacy.reactjs.org/docs/reconciliation.html
- https://github.com/facebook/react/tree/main/packages/react-reconciler