React js is an emerging JavaScript framework that lets you build complex UI interactions with record-breaking performance. Instead of having to worry about all the DOM manipulation work, React abstracts that away and allows you to focus on the UI design.
Components are self-contained logical pieces of code that describe parts of the UI. These components can be composed together to create a full UI.
Detecting Changes: Immutability
One of the key benefits of immutability is that it can make it easier for React to determine when data has changed. This means that it can re-render a component when its data is different than what it was originally.
ShouldComponentUpdate() is a React method that checks for this type of change ( more informations ). It takes a snapshot of the DOM and compares it to the previous state, which lets React know when it should re-render a component.
How a Virtual DOM Works
When React renders an element, it stores a virtual DOM tree. This is a representation of the DOM in JavaScript, so that React can update it faster. React also generates a new Virtual DOM when there are changes to the DOM and compares it to the original snapshot, which is how we can tell that a component needs to be re-rendered.
React also supports a technique called Diffing, which lets it find the fastest way to implement a change in the DOM tree. This practice is great for projects with intense user interaction.
Webik 