Can someone point me to where React actually updates the DOM?

I want to learn more about performance in React, so I’m trying to get a sense of exactly how and when React manipulates the DOM.

Stepping through the source (or inspecting in the devtools profiler), I can see that scheduleFlush is finally called when React triggers an update to the DOM. I understand how reconciliation works, but I’m looking for the actual mechanics (read: specific line of code) where React appends new elements to the DOM (e.g. rootElement.appendChild(newElement)). Can someone point me in the right direction?

I asked this on the #reactjs freenode, but didn’t get the response I was looking for. Thanks in advance!

[jquense]

Most of the heavy lifting is here: https://github.com/facebook/react/blob/master/src/renderers/dom/fiber/ReactDOMFiberComponent.js ReactDOM injects it’s a “host” component class into React. React itself handles the traversal and diffing, then calls the various update methods on ReactDOMFiberComponent, which does all the work of moving the host node (DOM node) to it’s new markup.

[gaearon]

No, React only updates the leaf nodes in this case.

Please see:

https://reactjs.org/docs/rendering-elements.html#react-only-updates-whats-necessary

https://reactjs.org/docs/reconciliation.html