How is Virtual DOM more efficient than Dirty Checking in ReactJS?

akhils-nair-b6a2a78b · 17 May 2021 12:51

We need to understand that in ReactJS, each component has a state which is observable. React knows when to re-render the scene because it is able to observe when this data changes.
The observables are significantly faster than the Dirty checking because we don’t have to poll the data at a regular interval and check all of the values in the data structure recursively. By comparison, setting a value on the state will signal to a listener that some state has changed. In a situation like that, React can simply listen for change events on the state and queue up re-rendering.
The virtual DOM is more efficient than the Dirty checking simply because it prevents all the unnecessary re-renders. Re-rendering only occurs when the state changes.