Isn't React's immutable element creation and rendering mechanism terribly inefficient?

Question

I am not a React developer, but I am implementing a similar State and Props management infrastructure in another language. While reading about React's state management and rendering mechanism, I came across this quote

React elements are immutable. Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.

If I understand correctly, every time the parent component's state changes, its children's render methods are called (if their Props was affected) and these child components are recreated and (re)rendered.

Isn't this terribly inefficient, especially if the child components involve complex computations, visualizations, etc? Is there a mechanism in React to create the components once, but update (not recreate) only the necessary parts as the states change?

Answer 1

Well, that's the whole point of why we use React.

Have you heard about Virtual DOM? Virtual DOM is simply a memory instance that saves the exact replica of the real DOM.

When there is a prop/state update, it does not re-render the whole thing, but only re-renders the UI parts that are affected.

So, it's very efficient and to see how they do it, you can check the source code here.