React Diffing Algorithm Complete Guide (Example Detailed Explanation)

// Comparison of different types of elements// Old tree<div>
  <Counter />
</div>
// New Tree<span>
  <Counter />
</span>
// React Will completely delete the old tree，Rebuild a new tree

// Comparison of DOM elements of the same type// Old tree<div className="old" title="old">
  Hello
</div>
// New Tree<div className="new" title="new">
  World
</div>
// React Only change attributes will be updated

class MyComponent extends  {
  render() {
    // Only rendering results are compared when updated    return (
      <div>
        <h1>{}</h1>
        <p>{}</p>
      </div>
    );
  }
}

// Low-efficient list renderingfunction ListWithoutKeys() {
  return (
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  );
}
// When the list item changes，React Need to re-render all items

// Rendering list using keyfunction ListWithKeys() {
  const items = [
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' }
  ];
  return (
    <ul>
      {(item => (
        <li key={}>{}</li>
      ))}
    </ul>
  );
}
// React Can be passed key Identify which elements remain the same

// Not recommended: Use index as keyconst BadList = () => (
  <ul>
    {((item, index) => (
      <li key={index}>{}</li>
    ))}
  </ul>
);
// Recommended: Use a stable unique identifier as keyconst GoodList = () => (
  <ul>
    {(item => (
      <li key={}>{}</li>
    ))}
  </ul>
);

function diffTree(oldTree, newTree) {
  if (oldTree === null) {
    // Insert a new node    return createNode(newTree);
  }
  if (newTree === null) {
    // Delete old nodes    return null;
  }
  if ( !== ) {
    // Replace node    return createNode(newTree);
  }
  // Update existing nodes  updateNode(oldTree, newTree);
  // Recursively process child nodes  diffChildren(, );
}

function diffChildren(oldChildren, newChildren) {
  // The first round: processing updated nodes  for (let i = 0; i < (, ); i++) {
    diff(oldChildren[i], newChildren[i]);
  }
  // Handle new nodes  if ( > ) {
    ().forEach(child => {
      create(child);
    });
  }
  // Handle deleted nodes  if ( > ) {
    ().forEach(child => {
      remove(child);
    });
  }
}

class OptimizedComponent extends  {
  shouldComponentUpdate(nextProps, nextState) {
    // Update only if necessary    return  !== ;
  }
  render() {
    return <div>{}</div>;
  }
}
// Use Optimize Function Componentsconst MemoizedComponent = (function MyComponent(props) {
  return <div>{}</div>;
});

// Use key and memo to optimize list renderingconst OptimizedListItem = (({ item }) => (
  <li>{}</li>
));
function OptimizedList({ items }) {
  return (
    <ul>
      {(item => (
        <OptimizedListItem 
          key={} 
          item={item}
        />
      ))}
    </ul>
  );
}

import { FixedSizeList } from 'react-window';
function VirtualizedList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].text}
    </div>
  );
  return (
    <FixedSizeList
      height={400}
      width={300}
      itemCount={}
      itemSize={35}
    >
      {Row}
    </FixedSizeList>
  );
}

// Problem: Re-rendering caused by key instabilityconst ProblematicList = () => (
  <ul>
    {((item, i) => (
      <li key={()}>{}</li> // Don't do this    ))}
  </ul>
);
// Solution: Use stable unique identifierconst FixedList = () => (
  <ul>
    {(item => (
      <li key={}>{}</li>
    ))}
  </ul>
);

// Problem: Parent component update causes unnecessary re-rendering of child componentsconst Parent = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
      <Child data={data} /> // Child will re-render even if data does not change    </div>
  );
};
// Solution: Use useMemo orconst Parent = () => {
  const [count, setCount] = useState(0);
  const memoizedData = useMemo(() => data, [data]);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
      <Child data={memoizedData} />
    </div>
  );
};