Remove a Mounted React Component with React.unmountComponentAtNode()

While going through the codebase of React Bootstrap (for some reason), I came across an interesting implementation of a “React playground”. The code behind the playground is in ReactPlayground.js. I found this piece of interesting code there:

executeCode() {
  let mountNode = React.findDOMNode(this.refs.mount);

  try {
    React.unmountComponentAtNode(mountNode);
  } catch (e) {
    console.error(e);
  }

  // ... more code
}

So on changing the code (in the documentation), React.unmountComponentAtNode(mountNode); removes the live preview and then later in the same method (executeCode()), it as added again. So basically, due to this code, let’s discuss the React.unmountComponentAtNode() method quickly.

It’s fairly straightforward, if you did a React.render(<Component />, container) to mount the Component in the container, then in order to reverse that, i.e., unmount that Component from the container (remove from DOM) and clean up all the attached event listeners/handlers and state, you can simple call React.unmountComponentAtNode(container) and it’ll do the job. On unmounting, the method will return true else false if there was nothing to unmount.

Keep in mind that you cannot call this on random parent containers to remove the DOM nodes they contain. It only sort of does the reverse of a React.render(). What I basically mean is, this won’t make any sense:

class Button extends React.Component {
  constructor() {
    super();

    this._handleClick = this._handleClick.bind(this);
  }

  _handleClick() {
    let mountNode = React.findDOMNode(this.refs.wassup);
    let unmount = React.unmountComponentAtNode(mountNode);
    // console.log(unmount); // false
  }

  render() {
    return (
      <div ref="wassup">
        <a href="#" onClick={this._handleClick}>Hello world!</a>
      </div>
    );
  }
}

React.render(<Button />, document.querySelector('#container'));

Hope that helps!

Related Posts:

• Different Tools for Our Sketching Application
• Binary and Red Black Search Tree Implementation in…
• Creating the Environment To Write Code and Render in…
• Browser-Side Node.js Style Modules require() and…
• Cancel CSS3 and JS Animations to Prevent High Memory…

Author: Rishabh

Rishabh is a full stack web and mobile developer from India. Follow me on Twitter. View all posts by Rishabh