This is the story of React and the virtual DOM. Once upon a time, there was a view. He was very happy painting the DOM. Sometimes the model would give some nice data to paint. He knew really well how to paint a UI given all the data. A username, the points, and a colored shape. Piece of cake and fun too. But then the model sent the view an updated username. He had to know how to change his painting to show the new username. To do that, he had to keep track of a username div. He dutifully updated the DOM directly. Then the model sent the view another update. This time, it was the points. The view added another update rule and started tracking the points div. Again, he updated the DOM in place. Next, the model sent the view a new color. The view remembered yet another update rule and kept track of another DOM node. Then he changed the color right there on the DOM. The view thought that that might be the end of the update rules. But they just kept adding up. He had to keep track of so much. And sometimes the order of the updates event mattered. It was all too much. After a while, he gave up. He could not continue. But then the view met a friend. The friend was called React. They worked together to paint the DOM. The model would hand the view a complete piece of data. The view knew how to render this. Username, points, and colored shape. He would draw a quick but accurate sketch. Then he would bring it to React. It would scan it. React had very accurate and fast memory banks. It could remember exactly what was already painted in the real DOM. New painting. At first the DOM was empty. So it knew to paint the whole thing. It could paint very fast because it was a robot. Then whenever the data may have changed, the model gave the view all the data again. The view liked this because he was really good at sketching an entire picture. But not very good at remembering all of those DOM nodes. When it was done, he gave it to React, who scanned it. Difference detected. Blue circle is now red. It quickly made a short list of all of the differences. Then it painted each and every difference, but no more. When the model would bring him data, the view didn't really know what was on the real DOM. And he didn't want to know. He just sketched the picture as it was supposed to look. Then passed it to React. React would quickly figure out that there were no differences. No differences. Everything was already painted correctly. The view was so happy with his new friend React. His mind was clear and free. He could sketch the way he liked to and not worry about all of those updates. React liked figuring out how few changes needed to be made to the DOM. Because it tickled its memory banks. They were good friends and they lived happily ever after.