How React Handles Rendering & Diffing

React uses a Virtual DOM and a diffing algorithm to efficiently update the real DOM.

• 🧠 Virtual DOM: A lightweight in-memory representation of the real DOM.
• ⚡ Diffing Algorithm: Compares the previous Virtual DOM with the new one and updates only the changed parts in the real DOM.

💡 Why? — Direct DOM manipulation is slow, so React minimizes changes for better performance.

🛠️ Rendering & Diffing in Action

Here’s a simple example to show how React handles re-renders and uses the diffing algorithm efficiently.

import React, { useState } from 'react';

const App = () => {
const [count, setCount] = useState(0);
const [text, setText] = useState('');

console.log('App component re-rendered');

return (
<div>
<h1>React Diffing Example ⚡</h1>

<button onClick={() => setCount(count + 1)}>
Increment Count ➕ ({count})
</button>

<input
type="text"
placeholder="Type something..."
value={text}
onChange={(e) => setText(e.target.value)}
/>

<ChildComponent count={count} />
</div>
);
};

const ChildComponent = ({ count }) => {
console.log('ChildComponent re-rendered');
return <h2>Current Count: {count}</h2>;
};

export default App;

🚀 What Happens Here?

1. Virtual DOM Creation:

   • On every state change (count or text), React creates a new Virtual DOM.

2. Diffing Algorithm:

   • Compares the previous Virtual DOM with the new one.
   • Finds changes — e.g., if only text changes, the ChildComponent won’t re-render because count remains the same.

3. Selective Re-rendering:

   • Only components with changed props or state re-render.
   • In the example:
     • Typing in the input does not re-render ChildComponent.
     • Clicking the Increment button re-renders ChildComponent since count changes.

💡 Check the Console Logs:

• Notice how ChildComponent only re-renders when count changes.

⚡ React’s Diffing Optimizations:

1. Reconciliation:

   • React reconciles the Virtual DOM with the real DOM, only updating parts that changed.

2. Key Prop in Lists:

   • When rendering lists, React uses the key prop to track item changes efficiently.
   {items.map(item => (
<li key={item.id}>{item.name}</li>
))}


   Using unique keys helps React avoid unnecessary re-renders in lists.

🧠 Further Optimization:

• Use React.memo to prevent re-renders for pure functional components.
• Use useCallback and useMemo to memoize functions and values.