0

How React Virtual DOM diff between the old in-memory DOMs and the new in-memory DOMs? Specifically, is there any difference between that I just set the changed states and that I set both the changed states and the unchanged states? Is there any difference between set Object and Number?

For example: The current state is {name: 'Eric', id: '1234567890', others: {other1: 1, other2: 2}}. Is the diff result this.setState({name: 'Tiger'}) the same with the diff result this.setState({name: 'Tiger', id: '1234567890', others: {other1: 1, other2: 2}})?

user3300252
  • 109
  • 6
  • Possible duplicate of [Why is React's concept of Virtual DOM said to be more performant than dirty model checking?](http://stackoverflow.com/questions/21109361/why-is-reacts-concept-of-virtual-dom-said-to-be-more-performant-than-dirty-mode) – alex Sep 26 '16 at 10:04
  • I don't think it is duplicate of that question. My core question is whether there is any difference between that I just set the changed states and that I set both the changed states and the unchanged states? – user3300252 Sep 27 '16 at 01:21
  • There is no - react merges the passed state object into the existing state object. And it does not diff the state, it diffs the virtual dom generated from the state. – zerkms Sep 27 '16 at 01:40

1 Answers1

0

By default React triggers a re-render on all calls to setState whether the data has changed or not (see setState docs), so I would expect it to be identical in the cases you've described.

You can override how it behaves using shouldComponentUpdate if you need specific behaviour.

What this means for the actual content of the internal diff it uses is another story - I would expect them to be identical but it feels like a bad idea to rely on specifics of any of this behaviour.

jaylynch
  • 336
  • 2
  • 7
  • "What this means for the actual content of the internal diff it uses is another story" --- "internal diff" works with the virtual DOM, not the state object. – zerkms Sep 27 '16 at 01:45
  • @zerkms Aware of that, I suspect it would be a dangerous game to assume any specific implementation detail of how the vDOM is generated beyond the setState API though. – jaylynch Sep 27 '16 at 01:47
  • No need to assume: virtual dom is generated from components that you return from `render()`. – zerkms Sep 27 '16 at 01:48
  • Is it a stable, documented API though? I'd love to read more if it is! For curiosity's sake though, I still don't think I'd rely on it for anything important. – jaylynch Sep 27 '16 at 01:58
  • Are you asking whether react's `render()` aka the main method is stable and documented? https://facebook.github.io/react/docs/component-api.html "setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate()". "I still don't think I'd rely on it for anything important" --- it is the foundation of React, you cannot "not rely" on it. – zerkms Sep 27 '16 at 02:02
  • Not that, no, I mean the _internal_ specifics of how it _does_ that. – jaylynch Sep 27 '16 at 02:17