In React, each of our components have a state. This state is like an observable. Essentially, React knows when to re-render the scene because it is able to observe when this data changes. Dirty checking is slower than observables because we must 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, so React can simply listen for change events on the state and queue up re-rendering.
The virtual DOM is used for efficient re-rendering of the DOM. This isn’t really related to dirty checking your data. We could re-render using a virtual DOM with or without dirty checking. In fact, the diff algorithm is a dirty checker itself.
We aim to re-render the virtual tree only when the state changes. So using an observable to check if the state has changed is an efficient way to prevent unnecessary re-renders, which would cause lots of unnecessary tree diffs. If nothing has changed, we do nothing.
Posted Date:- 2021-09-23 14:44:42
When to use a Class Component over a Function Component?
What are controlled and uncontrolled components in React?
What is render() in React? And explain its purpose?
How to declare a variable in React jS?
How to create an event in React?
How to check the React jS version?
How to import jS files in react?
How to install bootstrap in React JS?
How to create a website in React JS?
How to connect MongoDB with React JS?
Explain the different phases of the ReactJS component lifecycle?
How Virtual-DOM is more efficient than Dirty checking?
What is a higher-order component in React?
Why can’t browsers read JSX?
What do you understand from "In React, everything is a component."
What are Pure Components in React?
What is the difference between element and component?
What is the purpose of render() in React?
What are Higher Order Components (HOC)?
Explain the new lifecycle methods in React 16.3?
What is the significance of Keys in React?
Explain the lifecycle methods of ReactJS?
What are controlled components?
What are the differences between a class component and functional component?
What is ReactDOM and what is the difference between ReactDOM and React?
What are the limitations of React?
List some of the major advantages of React.
What are the features of React?
Can web browsers read JSX directly?
What are the advantages of React?