Rudra's blog

Understanding the Core of React: Virtual DOM, React Fiber, and Reconciliation

Rudra Pratap Singh's photo
Rudra Pratap Singh
·

3 min read

Understanding the Core of React: Virtual DOM, React Fiber, and Reconciliation

Table of contents

What is Virtual DOM Explained

In web-dev, the DOM (Document Object Model) represents the structure of a document as a tree, where each object corresponds to a part of document.

The Virtual DOM is a programming concept used to improve the efficiency of updating the actual DOM.

Virtual DOM representation

  • Upon any change in the state of web-app, React first updates the virtual representation of actual DOM in the memory. This virtual DOM is a lightweight copy of actual DOM.

Diffing Algorithm

  • React compares current virtual DOM with the previous version to identify any difference or change using some diffing algorithm.

Minimizing DOM manipulations

  • Once the difference is identified, React calculates the most efficient way to update the actual DOM. Instead of manipulating entire DOM, React only make necessary changes to update the affected part.

Batch Update

  • React often performs these updates in batches, reducing the actual number of DOM manipulations.

React Fiber Overview

React Fiber is an internal implementation detail of the React library, introduced to improve the performance and responsiveness of React applications, especially in scenarios where large component trees need to be rendered and updated.

  • React involves breaking down the rendering process into smaller, incremental units called fibers.

  • The key idea behind Fiber is to enable incremental rendering. Instead of completing the entire render in a single pass, React Fiber allows breaking down the work into smaller chunks and spreading it across multiple frames.

  • React Fiber introduces the concept of prioritization, allowing the developer to define the priority of different updates. This enables React to work on more important updates first, improving the perceived performance of the application.

  • Fiber introduces a concurrent rendering model, which means React can work on multiple tasks concurrently.

  • With Fiber, React introduced the concept of error boundaries, which allows components to catch JavaScript errors anywhere in their tree and log those errors or display a fallback UI instead of crashing the entire application.

  • Fiber enables asynchronous rendering, allowing React to pause and resume work as needed.

Reconciliation in React

In React, reconciliation refers to the process of ensuring that the actual DOM reflects the desired state of the application

Reconciliation is a key part of rendering virtual DOM, and it involves determining what changes need to be made to the DOM in response to changes in the application's state.

  • When a component's state or props change, React re-renders the component using virtual DOM.

  • React uses a heuristic algorithm that follows a depth-first search strategy to traverse the component tree and identify any state change.

  • Elemental Reconciliation: React aims to update the real DOM efficiently by only making the necessary changes.

Conclusion

In summary, the Virtual DOM in React optimizes DOM updates by maintaining a lightweight virtual representation. React Fiber enhances performance with incremental rendering, prioritization, and a concurrent model. Reconciliation ensures the actual DOM reflects the desired state, employing efficient algorithms for minimal updates. Elemental Reconciliation focuses on updating only what's necessary, contributing to a responsive user interface. Overall, these concepts make React a powerful and efficient library for building dynamic web applications.

Additional Resources

ReactreconcilliationReact Fibervirtual dom