Updating the Rendered Element(immutable)

Question

In the React tutorial , It says

React elements are immutable. Once you create an element, you can’t change its children or attributes. An element is l

Answer 1

It doesn't do updates on React Element Tree ('the immutable object'). It compares previous tree with the current one and does necessary updates to the DOM.

React Element Tree is a simplified form of the DOM. It's like a snapshot. React has the current snapshot and when the state of an application changes, it creates a new state that reflects how the DOM should look like. React compares those two snapshots and makes required changes to the DOM so that it mirrors the new snapshot. After that the old, outdated snapshot is trashed and the new one becomes the current snapshot of the DOM.

Basically, you have:

• the state of an app
• description how an app should look like for a given state (the React code you write)
• snapshot (React Element Tree)
• Diffing and updating machinery (React library)
• DOM

DOM or external world (i.e. server) produce events that change the state. A new snapshot is created for that state based on the description. Old and new snapshots are compared and changes are introduced to the DOM. This process repeats over and over again.

You can see and learn more about React elements in this fantastic blog post: https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html