Unexpected warning when hydrating with portal and SSR

**Do you want to request a *feature* or report a *bug*?** *bug* **What is the current behavior?** Given the following (simplified) snippet: ```jsx class HoverMenu extends React.Component { render() { if (typeof document === 'undefined') return null const root = document.getElementById('root') return ReactDOM.createPortal(<div>Hello World</div>, root) } } class Para extends React.Component { render() { return ( <span> Some Text <HoverMenu /> </span> ) } } ``` where `div#root` is a valid `div` that exists, the following error is shown when hydrating after SSR: `Warning: Expected server HTML to contain a matching <div> in <span>` The warning goes away if I update the definition of `HoverMenu` to: ```jsx class HoverMenu extends React.Component { componentDidMount() { this.setState({ isActive: true }) } render() { const { isActive} = this.state if (!isActive) return null const root = document.getElementById('root') return ReactDOM.createPortal(<div>Hello World</div>, root) } } ``` I'd prefer not to do that because of the double rendering caused by `setState` in `componentDidMount`. I don't quite understand what that error is telling me. No `<div />` is rendered server-side in either case. The error is particularly confusing, as the `HoverMenu` DOM `div` is not even rendered inside a DOM `span`. (I wonder if this is happening because `HoverMenu` is nested inside a React `span`.) **What is the expected behavior?** No error is thrown. Or, at least that the error message is clearer. **Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?** Chrome 65 React 16.2 (SSR through Next 5.1)