Rendering React Elements
The ReactDOM.render()
method takes three parameters: ReactElement
, a regular DOMElement
, and a callback function:
ReactDOM.render(ReactElement, DOMElement, callback);
ReactElement
is a root element in the tree of ReactNode
s that you've created. A regular DOMElement
is a container DOM node for that tree. The callback
is a function executed after the tree is rendered or updated. It's important to note that if this ReactElement
was previously rendered to a parent DOM Element
, then ReactDOM.render()
will perform an update on the already rendered DOM tree and only mutate the DOM as it is necessary to reflect the latest version of the ReactElement
. This is why a virtual DOM requires fewer DOM mutations.
So far, we've assumed that we're always creating our virtual DOM in a web browser. This is understandable because, after all, React is a user interface library, and all the user interfaces are rendered in a web browser. Can you think of a case when rendering...