Dirty checks in React JS
DOM re-renders whenever there is a change in the data and it checks for data in two ways:
- Dirty checking: checks every node’s data at a regular interval to see if there have been any changes. Dirty checking is not the optimal solution as it requires traversing every single node recursively to make sure its data is up to date.
- Observable: every component is responsible for listening to when an update takes place. Since the data is saved in the components state, they can simply listen to changes and update the changes if any.
React uses an observable technique whereas dirty checking is used in Angular.js.
React uses virtual DOM which is a lightweight version of the DOM. The only difference is the ability to write the screen like the real DOM, in fact, a new virtual DOM is created after every re-render.
Explain dirty checks in React.js
Dirty Checks in React generally refer to the changes and modifications in the DOM if a component state is modified or dirtied and needs re-rendering making the React DOM updates efficient.