Why is React’s concept of Virtual DOM said to be more performant than dirty model checking?

by

I’m the primary author of a virtual-dom module, so I might be able to answer your questions. There are in fact 2 problems that need to be solved here

  1. When do I re-render? Answer: When I observe that the data is dirty.
  2. How do I re-render efficiently? Answer: Using a virtual DOM to generate a real DOM patch

In React, each of your components have a state. This state is like an observable you might find in knockout or other MVVM style libraries. 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 you 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. You could re-render using a virtual DOM with or without dirty checking. You’re right in that there is some overhead in computing the diff between two virtual trees, but the virtual DOM diff is about understanding what needs updating in the DOM and not whether or not your data has changed. In fact, the diff algorithm is a dirty checker itself but it is used to see if the DOM is dirty instead.

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.

A virtual DOM is nice because it lets us write our code as if we were re-rendering the entire scene. Behind the scenes we want to compute a patch operation that updates the DOM to look how we expect. So while the virtual DOM diff/patch algorithm is probably not the optimal solution, it gives us a very nice way to express our applications. We just declare exactly what we want and React/virtual-dom will work out how to make your scene look like this. We don’t have to do manual DOM manipulation or get confused about previous DOM state. We don’t have to re-render the entire scene either, which could be much less efficient than patching it.

More Related Contents:

  1. Detect click outside React component
  2. Invariant Violation: _registerComponent(…): Target container is not a DOM element
  3. React.js: onChange event for contentEditable
  4. How to access component methods from “outside” in ReactJS?
  5. How do you set the document title in React?
  6. React Error: Target Container is not a DOM Element
  7. React, losing saved data in localStorage with useEffect after page refresh
  8. Retrieving value from with multiple option in React
  9. React.js: How to append a component on click?
  10. What is component in reactjs?
  11. Changing website favicon dynamically
  12. React Context vs React Redux, when should I use each one? [closed]
  13. Correct way to push into state array
  14. Pass react component as props
  15. react-router getting this.props.location in child components
  16. Is there a generic way to set state in React Hooks? How to manage multiple states?
  17. React Function Components with hooks vs Class Components
  18. Why is the loop assigning a reference of the last index element to? [duplicate]
  19. Can I execute a function after setState is finished updating?
  20. where is create-react-app webpack config and files?
  21. Importing multiple files in react
  22. onEnter not called in React-Router
  23. How to print React component on click of a button?
  24. How to render Streamable image on React coming from FastAPI server?
  25. unable to deploy next js to azure
  26. Why doesn’t Node.js have a native DOM?
  27. how to set up an inline svg with webpack
  28. using css modules how do I define more than one style name
  29. Could not find “store” in either the context or props of “Connect(App)”
  30. value of using React.forwardRef vs custom ref prop

Leave a Comment