Blow It All up and Re-Render from Scratch (React Virtual Dom)
Introduction
- The Evolution of JavaScript and the Birth of React
What Is the DOM?
Understanding the Document Object Model
The Tree-Like Structure of the DOM
DOM Manipulation: The React Way vs. Traditional JavaScript
Challenges of Traditional DOM Manipulation
How React Improves Efficiency
Why the DOM Matters
The Blueprint of a Web Page
Importance of DOM Understanding for Developers
Achieving Efficiency with the Virtual DOM
The Concept of the Virtual DOM
How the Virtual DOM Solves Performance Issues
Why Is the Virtual DOM Called “Live”?
Keeping the Virtual DOM Updated in Real-Time
Benefits of a Live Representation
How React Updates the View Through Reconciliation
React’s Reconciliation Process Explained
The Role of the Diffing Algorithm
Two Phases: Render and Commit
In a Nutshell
Summary of React’s Virtual DOM Process
Invitation for Discussion and Learning Together
The question of how Javascript should be structured especially as the language has grown from a simple interactive language to a complex user interface gave birth to Reactjs
Although Javascript gave us interactivity, like when the user submits a form or clicks a button, we still have to manually tell the DOM what, when, and how to interact with the view. This can be very tedious and prone to errors, especially when working on a large project.
What Is the DOM
The DOM is short for Document Object Model. The DOM is the map of your webpage and allows you to manipulate the webpage. It is a tree-like structure, and it represents the DOM hierarchy, from the <header> to the <body> tag, where paragraphs and <h1> elements are nodes in the tree. The DOM allows you to get around the webpage, add anything to it, and tell it what to do.
DOM Manipulation: The React Way vs. Traditional JavaScript
In traditional JavaScript, directly manipulating the Document Object Model (DOM) can be tedious and not very efficient, involving a lot of code. Every time you make a change to the DOM, it can cause the whole page to reload, which can make your application slower, especially if you have a lot of things happening on the screen or if updates are happening often.
This is where React shines, making updates smoother and more efficient, is like having a magical helper who keeps everything running seamlessly in the background.
React's secret sauce for efficiency lies in its clever handling of updates through something called the virtual DOM. Picture this: instead of rearranging the furniture in your house every time you get a new chair, you first plan it out in a mini model of your house. Once you have the perfect setup in the model, you then make the changes in your actual house. That's exactly what React does. It keeps a lightweight copy of the DOM called the virtual DOM. When you make updates, React first updates this virtual version by changing only what’s necessary. Then, it applies those changes to the real DOM in the most efficient way possible. This means your website runs faster and you avoid the headaches of manually fiddling with the DOM.
Why the DOM Matters
The Document Object Model (DOM) is like the blueprint of a web page, showing how elements like headers, paragraphs, and images are arranged. Understanding the DOM is important because it allows developers to manipulate the structure of the webpage. With this understanding developers can change, add, or remove elements from the DOM, making your web pages dynamic and interactive.
Achieving Efficiency with the Virtual DOM
React introduced the Virtual DOM to solve the problems of directly changing the DOM.
The Virtual DOM is a lightweight, in-memory copy of the actual DOM
Ever felt like changing one tiny thing on your website made everything else slow down? That's where React's Virtual DOM comes to the rescue. It's a lightweight, live in-memory copy of the actual DOM, and when you make changes, it quickly compares its current state to its previous state, pointing out exactly what's different. Instead of overhauling the entire webpage, it updates only the parts that need changing. It's like having a personal shopper who knows exactly what you need and grabs only those items, making your shopping trip (or in this case, your website) faster and more efficient.
When React says the Virtual DOM is a “live in-memory representation,” it’s just saying this: the Virtual DOM is like a lightweight, simplified copy of the real DOM (the thing that actually makes up the structure of your webpage). This copy lives in your computer's memory and helps React keep track of changes in your app efficiently.
Why Call It "Live"?
The Virtual DOM is always up-to-date. Even if the real DOM hasn’t been updated yet, the Virtual DOM always knows the latest state of your app. Think of it as React’s version of a live, real-time to-do list for updating the webpage.
How React Update View Through Reconciliation
React's reconciliation process starts by creating a Virtual DOM. This Virtual DOM is turned into the real DOM during the first render. When something changes, like a component's state or props, React creates a new Virtual DOM and compares it to the old one using a diffing algorithm. This helps React find what’s different, like updated attributes or replaced elements. If the element types are the same, only the attributes are updated; if the types are different, React replaces the whole element. For lists, React uses keys to track changes and update items efficiently.
A diffing algorithm is how React compares the old version of the Virtual DOM with the new version to find what changed. Instead of redoing everything, it updates only the parts that need it, making things faster and more efficient.
Once React identifies the changes, it updates the real DOM with only the necessary changes. These updates happen in batches to save time and make the app run faster. The process has two steps: the Render Phase, where React figures out what’s changed, and the Commit Phase, where it applies those changes to the real DOM and runs any extra effects like useEffect or componentDidMount.
In a Nutshell
When something in the app changes, like a button click or typing in a field, React notices it. Instead of changing the real DOM right away, it creates a new Virtual DOM from scratch to reflect the updated state. Then, React compares the new Virtual DOM with the old one to figure out what’s different. It updates only the parts of the real DOM that need to change, making the process fast and efficient. Pretty cool, right? What do you think? Feel free to share your thoughts, let’s learn and grow together!