React Virtual DOM
What's a DOM? DOM stands for “Document Object Model”. The DOM represents the UI of your application. If there is a change in the state of application UI, the DOM gets updated to represent that change. But the problem is frequently updating the DOM affects performance, making it slow. What's a Virtual DOM? The DOM is represented as a tree data structure of the actual elements that are being created for your page. Virtual Dom is an in-memory representation of the real Dom. If a state is changed, by comparing these two trees we can identify the actual state that has been changed. Then we can surgically update that single element, no need to manipulate the whole thing. This process is called “diffing”. How it works? The image below shows the virtual DOM tree and the diffing process. source: https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch02.html The red circles represent the nodes that have changed. These nodes represent the UI...