Why is React's concept of Virtual DOM said to be more performant than dirty model checking?
why choose react
react vs angular
why react is awesome
reason to use react
I saw a React dev talk at (Pete Hunt: React: Rethinking best practices -- JSConf EU 2013) and the speaker mentioned that dirty-checking of the model can be slow. But isn't calculating the diff between virtual DOMs actually even less performant since the virtual DOM, in most of the cases, should be bigger than model?
I really like the potential power of the Virtual DOM (especially server-side rendering) but I would like to know all the pros and cons.
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
- When do I re-render? Answer: When I observe that the data is dirty.
- 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.
Why and Where Should you Use React for Web Development , React isn't an MVC framework. React is a library for building composable user interfaces. It encourages the creation of reusable UI components� "Why should we use React" is a common question asked by a client to a developer. In this article, we will learn the use-case of Reactjs.
Yes, React is taking over front-end development. The question is why., Declarative. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render� React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time. React doesn’t use templates. Traditionally, web application UIs are built using templates or HTML directives.
Here's a comment by React team member Sebastian Markbåge which sheds some light:
React does the diffing on the output (which is a known serializable format, DOM attributes). This means that the source data can be of any format. It can be immutable data structures and state inside of closures.
The Angular model doesn't preserve referential transparency and therefore is inherently mutable. You mutate the existing model to track changes. What if your data source is immutable data or a new data structure every time (such as a JSON response)?
Dirty checking and Object.observe does not work on closure scope state.
These two things are very limiting to functional patterns obviously.
Additionally, when your model complexity grows, it becomes increasingly expensive to do dirty tracking. However, if you only do diffing on the visual tree, like React, then it doesn't grow as much since the amount of data you're able to show on the screen at any given point is limited by UIs. Pete's link above covers more of the perf benefits.
Virtual Dom is not invented by react. It is part of HTML dom. It is lightweight and detached from the browser-specific implementation details.
We can think virtual DOM as React’s local and simplified copy of the HTML DOM. It allows React to do its computations within this abstract world and skip the "real" DOM operations, often slow and browser-specific. Actually there is no big differenc between DOM and VIRTUAL DOM.
Below are the points why Virtual Dom is used (source Virtual DOM in ReactJS):
When you do:document.getElementById('elementId').innerHTML = "New Value" Following thing happens:
- Browser needs to parse the HTML
- It removes the child element of elementId
- Updates the DOM value with new value
- Re-calculate the css for the parent and child
- Update the layout i.e. each elements exact co-ordinates on the screen
- Traverse the render tree and paint it on the browser display
Recalculating the CSS and changed layouts uses complex algorithm and they effect the performance.
As well as updating the DOM properties ie. values. It follows a algorithm.
Now, suppose if you update DOM 10 times directly, then all the above steps will run one by one and updating DOM algorithms will take time to updates DOM values.
This, is why Real DOM is slower than virtual DOM.
What is React,
- I think you could mention this talk too youtube.com/watch?v=-DX3vJiqxm4 where he specifically talks about benchmarks.
- Does React do dirty checking on component props? I ask because there's no setProps() function.
- There's a setProps: facebook.github.io/react/docs/component-api.html#setprops
- what would be an example of such
- When you say "So while the virtual DOM diff/patch algorithm is probably not the optimal solution", do you have in mind a theoretically more optimal solution?
- This doesn't quite seem to answer the question. React requires you to use setState to signal that the state has changed. If you were able to do
this.state.cats = 99you would still need dirty checking to check for the model change, just as Angular dirty checks the $scope tree. This isn't a comparison of the speed of the two techniques, it's simply a statement that React doesn't do dirty checking because it has a Backbone style setter instead.
- Actually I have read some articles too, so I now (at least in general) how it works, I just wanted to figure out why it can be more efficient than dirty check of model. And 1) Yup, it does not compare models but does compare much bigger virtual dom 2) Dirty-check of model provide us with ability to update only what needed too (as Angular does)
- I believe only parts of the virtual DOM corresponding to the changed component have to be compared, while dirty-checking happens every digest loop, for every values on every scopes, even if nothing changed. If large amount of data changed, then Virtual DOM would be less efficient, but not for small data change.
- Speaking of Angular, because watchers can also mutate the state while digest, the
$scope.$digestis executed multiple times per digest cycle, so it's multiple time of full data comparison versus single time of partial virtual DOM tree comparison.
- it is sad so many smart developers invent "mountains" of tricks to deal with "slow" DOM and so on, instead of focusing our combined attention to just fix the browsers themselves and rid us of DOM slowness once and for all. it is like using all humanity's resources to research ways to deal with cancer and improve a patient's life, instead of just fix the cancer itself. Ridicules.