Virtual DOM, Fibre, and reconciliation

The Virtual DOM (Document Object Model) is a lightweight, in-memory representation of the actual DOM in web browsers. It acts as a copy of the real DOM and allows React to manage updates to the UI more efficiently.

Even though the virtual DOM is still being used, React’s new rendering engine, called Fiber, is responsible for optimizing how these updates are scheduled and applied. Fiber improves the way updates are handled, making the UI more responsive and efficient.

React Fibre

Previously, React used to update the UI as soon as any changes occurred. This quick updating was great for reactivity, but it sometimes caused issues, especially with things like animations. For example, if multiple updates were happening one after another, React would immediately update the UI with each one. This could lead to laggy animations or unnecessary rendering, as React was trying to apply every intermediate update instead of waiting for the final state.

Key features → Ability to pause, abort, or reuse work as new updates come in, the ability to assign priorities to different types of updates, and new concurrent

A primary goal of Fiber is to enable React to take advantage of scheduling. Specifically, we need to be able to

• pause work and come back to it later.

• assign priority to different types of work.

• reuse previously completed work.

• abort work if it's no longer needed.

Reconciliation

Reconciliation → The algorithm React uses to differentiate (diff) one tree from another to determine which parts need to be changed. Reconciliation is the algorithm behind what is popularly understood as the "virtual DOM."

The key points are:

• Different component types are assumed to generate substantially different trees. React will not attempt to diff them but rather replace the old tree completely.

• Diffing of lists is performed using keys. Keys should be "stable, predictable, and unique."

  Purpose of Keys in React

• Identification of Elements: Keys help React identify which items in a list have changed, been added, or removed.

• Stable Identity: By using stable, predictable, and unique keys, React can maintain the identity of components across re-renders. This means that when a list is updated, React can directly associate each new element with its corresponding previous element rather than re-rendering everything from scratch.

• Performance Optimization: When keys are used, React can quickly determine which elements need to be updated or removed. This minimizes the number of DOM manipulations, which can be costly in terms of performance. Without keys, React may re-render all items in the list, even if only one has changed.

• Preservation of Component State: Keys allow React to preserve the state of individual components.

Hydration → It refers to the process where the static HTML (sent by the server) is made interactive by loading and running the JavaScript.
So, hydration is basically React "waking up" the static HTML to make it functional by injecting JavaScript.

In conclusion, I explored essential React concepts like the virtual DOM, Fiber, and hydration, explaining how these mechanisms work together to optimize UI updates and performance. I covered how React efficiently manages updates using the virtual DOM and Fiber’s ability to prioritize, pause, or reuse tasks for smooth user interactions and how hydration allows React to inject interactivity into static HTML.