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.

Similar Reads

Prerequisites:

React JS Virtual DOM React JS Diffing Algorithm React JS Reconciliation...

Dirty checks in React JS

DOM re-renders whenever there is a change in the data and it checks for data in two ways:...

DOM updates in React:

On the first run, both virtual DOM and real DOM tree are created React works on observable patterns, hence, whenever there is a change in the state, it updates the nodes in the virtual DOM Then, react compares virtual DOM with the real DOM and updates the changes. This process is called reconciliation. For reconciliation, it uses a diffing algorithm which is itself a dirty checking but it checks for virtual DOM changes instead of the data in real DOM nodes....