Portals in React v16

Portals allows us to have better control of the Application UI, without portals when we return an element from a component's render method it is mounted in the DOM as a child element of the parent component.

render() {
  // React mounts a new div and renders the children into it
  return (
    <div>
      {this.props.children}
    </div>
  );
}

With portals we can specify the DOM element on which the child element should be loaded, this allows us to load child elements/components anywhere in the page/application, thereby providing better control of the UI.

render() {
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

In this case the child component will be loaded in the specified domNode.