From what I learned about React, the programmer should describe the state, and the appearance of the component for a given state. React does all the rest. When the state changes, React won’t immediately render anything to the dom. It first runs a virtual dom, and only renders to the dom an element that has been changed (I think I learned it in the React Facebook Tutorial). According to lesson 37 in the Alpha version
the default behavior is that your component re-renders when it receives new props, even if the props haven’t changed. You can use shouldComponentUpdate() to prevent this by comparing the props.
Perhaps an experienced programmer can clarify things here.
(I’ll also mention the issue in the Github repository)
Both statements are clear to me as well. But they seem to contradict. My understanding of the second statement is that when a component props or state updates it re-renders by default to the dom even if re-rendering is not needed. While from what I learned about React this is not the case. React runs a virtual dom, and only what it finds necessary it re-renders to the dom.
I’m not saying both statements actually contradict, I’m just saying a clarification can help.
Perhaps the default behaviour is that component in any case re renders to the virtual dom when sate or props are updated?
I received an answer from an experienced programmer. shouldComponentUpdate can prevent the components render function from running, and the component would not even be rendered to the virtual dom.
I’m not experienced with React but, if I’m not mistaken, the highlighted bit is still potentially misleading. I was under the impression that a component may get re-rendered inside the virtual DOM when it receive new props, but it doesn’t necessarily get re-rendered in the real DOM if React’s diff mechanism deems that to be unnecessary, which I thought was a major part of the whole point of React.
shouldComponentUpdate() can be used to fine-tune the behaviour of whether or not the render(), componentWillUpdate() and componentDidUpdate() methods are called (reference). If shouldComponentUpdate() returns false then even the virtual DOM is not updated because the render() method is “where the Virtual DOM gets re-build and the diffing happens” (reference).
Provided the above sounds reasonable, I agree that a GitHub Issue should be raised to at least clarify the difference between the real DOM and the virtual DOM.