DOM diffing, DOM shape, and mouse events (Best practice)

render.js

// Best practice, to maintain a similar DOM shape
render() {
  const {isHovered} = this.state;
  
  return (
    <div className={classNames(isHovered && 'tooltip-region')}
      onMouseEnter={this._setHovered}
      onMouseLeave={this._setNotHovered}>
      <div className="has-tooltip"></div>
      {isHovered && <div>Hello</div>}
    </div>
  );
}