Can someone explain in the most layman terms possible what unmountComponentAtNode' does?

Question

I have a test I'm running on a React component:

describe(`TheDate Component`, () => {
  it('renders without crashing', () => {
    const div = document.createElement('div');
    ReactDOM.render(<TheDate />, div);
    ReactDOM.unmountComponentAtNode(div);
  })
})

I read that I have to use 'unmountComponentAtNode' and to be honest I don't really understand the official documentation for unmountComponentAtNode() :

Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns true if a component was unmounted and false if there was no component to unmount.

I am new to testing and React.

Answer 1

Taking the steps of the code one line at a time. First line:

const div = document.createElement('div');

creates a 'div' HTMLElement. The HTML looks like this:

<div></div>

Next line:

ReactDOM.render(<TheDate />, div);

This creates a React DOM element and adds the HTML representation to the div. The resulting HTML looks kind of like this:

<div>
  (whatever HTML is created by TheDate)
<div>

Last line:

ReactDOM.unmountComponentAtNode(div);

removes what TheDate component rendered into the div, and cleans up any handlers and React state associated with the TheDate component (if any).

The HTML now looks like this again:

<div></div>

Here is an example that shows the effect of each step:

 const wrapper = document.getElementById('wrapper'); const btnAddDiv = document.getElementById('addDiv'); const btnRender = document.getElementById('render'); const btnUnmount = document.getElementById('unmount'); const pre = document.querySelector('pre'); let container; btnAddDiv.onclick = () => { container = document.createElement('div'); container.id = 'container'; wrapper.appendChild(container); showDOM(); btnAddDiv.disabled = true; btnRender.disabled = false; } btnRender.onclick = () => { const content = ReactDOM.render( <h5>I have been rendered,</h5>; container); showDOM(). btnRender;disabled = true. btnUnmount;disabled = false. } btnUnmount.onclick = () => { ReactDOM;unmountComponentAtNode(container); showDOM(). btnUnmount;disabled = true. } function showDOM() { pre.innerText = wrapper;innerHTML; } showDOM();

 #wrapper { margin: 0.5rem; padding: 0.5rem; border: 1px solid blue; } pre { margin: 0.5rem; border: 1px solid black; }

 <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <button id="addDiv">.createElement('div')</button> <button id="render" disabled="true">.render(...)</button> <button id="unmount" disabled="true">.unmountComponentAtNode(...)</button> <p>Rendered div and children:</p> <div id="wrapper"> </div> <p>HTML of div and children:</p> <pre></pre>

Answer 2

React components are 'mounted' on DOM elements (normally a <div> or some other container element).

The act of mounting is telling React where it has to start rendering the component itself. Think of a 'mount point' as the anchor from which React starts to generate all the html needed to draw the component in the view.

For example, in your test you start by generating a <div> element. In your markup at this point, you have an empty container:

<div>
</div>

Then, you 'mount' your 'The Date' component on that previous <div> , this is what you do when you call ReactDOM.render(<TheDate />, div) .

Imagine your component 'The Date' ends up rendering something like this:

<div> 
  <h1>Today is <b>25th of January, 2021<b></h1> <!-- This is what React renders -->
</div> 

When you unmount your component by calling ReactDOM.unmountComponentAtNode(div) , you're basically removing everything react generated from your markup, resulting in an empty container again:

<div>
</div>

This is obviously a very simplified explanation of what happens when you mount/unmount a component using react, but hopefully it's 'layman terms' enough.