Interesting facts about react you may not know

## 1. What algorithm does react use when handling virtual DOM? It’s diff algorithm, react applies observer pattern to determine the change of state and props (observer is a design pattern where it can detect changes of dependencies, this design pattern is very popular. many other frameworks and libraries use not only react). When state or props changes cause the re-render component to generate different versions of the DOM, react uses the diff algorithm to compare DOM sessions before and after the state or props change. React only re-renders some nodes in the real DOM whose corresponding virtual DOM is changed, the nodes that do not change will be preserved.  (React noticed that the red node in the image has changed, so decided to just re-render this node, but remaining node remains the same) ## 2. What is virtual DOM? Virtual DOM is designed like the real DOM, it is a copy of the real DOM with a 1-to-1 ratio, the virtual DOM is also organized into a tree with branches as nodes, in the virtual DOM each node is an object with the same object. properties with the real DOM.  (in react’s “eyes”, virtual DOM is an object with representation properties: element type, node con,… as in the picture) ## 3. How does virtual DOM work? The virtual DOM synchronizes with the real DOM in the browser thanks to the [reactDOM](https://www.npmjs.com/package/react-dom) library, this process is called [Reconciliation](https://www. .youtube.com/watch?v=I4yDcWWuf14&ab_channel=ReactNext) (reconciliation is the comparison with the previous DOM, react calculates and considers whether it is necessary to update this DOM, it compares the newly created virtual DOM. generated with the current real DOM) ## 4. How does React store the virtual DOM? The virtual DOM consists of a list of nodes, each node is a javascript object, that object is stored in heap memory, both stack and heap are stored in the RAM of the computer running the browser. The virtual DOM is just a javascript object like any other regular object. ## 5. Virtual DOM faster than real DOM? No, even the virtual DOM can be slower in some cases when manipulating the real DOM directly without going through any intermediate processing, but not significantly. If a DOM node is always volatile and constantly updated, the virtual DOM is faster, we can constantly change the properties of the virtual DOM because it is just a normal javascript object manipulation, the virtual DOM is not direct. make user screen repaint/reflow continuously. This is a very controversial issue. Besides the advantages of virtual DOM, SvelteJS founder Rich Harris also recognized many disadvantages and said that virtual DOM is not as fast as you think. Some reasons can be easily recognized such as: * Processing the real DOM already consumes part of the memory, but also has to create a corresponding virtual DOM that consumes twice or 3 times more memory. * In During operation, the virtual DOM is constantly creating objects, creating and de-referencing objects many times, causing javascript’s Garbage collector to work continuously. But the difference is still not too big. ## 6. Meta is the father of virtual DOM concept, react laid the foundation for virtual DOM? No, react uses virtual DOM but Meta did not invent virtual DOM, the idea of ​​virtual DOM existed before react was born. Vue.js, Elm also use virtual DOM, each framework, library has a different way of implementing virtual DOM. ## 7. Meta is the father of react? No, Jordan Walke (an ex-Meta employee) created react, then react was developed and maintained by Meta. He created FaxJS, a prototype of React. The original cause was said to be the advertising display interface of Meta (facebook at that time) which was increasingly heavy and difficult to maintain, Meta needed an optimal solution to solve that problem, Jordan Walke was the person in charge of the key. this responsibility. When react was first introduced to the public, most people were skeptical and thought react was a step backwards. ## 8. Why does facebook split react into 2 libraries react and reactDOM? The reason why facebook divided react into many modules is because react native is present (react native is a cross platform framework for developing mobile apps) react is a common processing core for both web and mobile apps while reactDOM is dedicated only for web (mobile app has no DOM concept). ## 9. Is React called a library or a framework? React is a javascript library for programming interfaces towards single page applications. It is not possible to create a complete, fully functional react app if you only install the original react libraries released by Meta itself, but have to install many libraries of other organizations. Because react is an open source project, there are many individuals and development organizations that create a diverse react ecosystem including: [react router DOM](https://www.npmjs.com/package/react -router-dom), [SWR](https://www.npmjs.com/package/swr), [react query](https://www.npmjs.com/package/react-query), [material react UI](https://mui.com/), [ant react UI](https://ant.design/),… Not only that, in large projects angular can also be combined with react.

Source : Viblo