title: React child component lose ref of his parent after componentWillUnmount
body: <p>I got button component which has another child component to show tooltip. I pass ref to <code>&lt;Tooltip&gt;</code> component where I attach event listener to <code>mouseEnter</code> and <code>mouseLeave</code> event to my button.</p>
  
  <pre><code>&lt;Button
      ref={this.buttonRef}
      type={this.props.type}
      className={this.props.className}
      disabled={this.props.operationIsActive || (this.props.enabled == undefined ? undefined : !this.props.enabled)}
      onClick={this.props.onClick}
      onSubmit={this.props.onSubmit}
      icon={this.props.icon}
  &gt;
      {this.props.children}
  &lt;/Button&gt;
  &lt;Tooltip domRef={this.buttonRef} text={this.props.tooltip} /&gt;
  </code></pre>
  
  <p>Here is my <code>Tooltip</code> component</p>
  
  <pre><code>export class Tooltip extends ComponentBase&lt;TooltipProps, TooltipState&gt; {
  private documentRef = null;
  
  public componentDidMount() {
      super.componentDidMount();
      this.documentRef = this.props.domRef
      if (this.props.domRef) {
          const dom = this.props.domRef.current;
          dom.element.addEventListener("mouseenter", this.showTooltip);
          dom.element.addEventListener("mouseleave", this.hideTooltip);
      }
  }
  
  public componentWillUnmount() {
      if (this.documentRef) {
          const dom = this.documentRef.current;
          if (dom) {
              dom.element.removeEventListener("mouseenter", this.showTooltip);
              dom.element.removeEventListener("mouseleave", this.hideTooltip);
          }
      }
  }
  
  private showTooltip = (): void =&gt; {
      this.updateState({ isTooltipVisible: true })
  }
  
  private hideTooltip = (): void =&gt; {
      this.updateState({ isTooltipVisible: false })
  }
  
  private getStyles(position: any): React.CSSProperties {
      const css: React.CSSProperties = {
          left: position[0].left,
          top: position[0].top + 40,
      }
      return css;
  }
  
  public render() {
      if (!this.props.domRef.current) {
          return null;
      }
      if(!this.state.isTooltipVisible)
      {
          return null;
      }
      const position = this.props.domRef.current.element.getClientRects();
      const css = this.getStyles(position);
      return ReactDOM.createPortal(&lt;div style={css} className="tooltip"&gt;{this.props.text}&lt;/div&gt;, document.getElementById(DomRoot) )
  }
  }
  </code></pre>
  
  <p>Everything works fine, but when onClick event is fired on button (for example I got button which only set new state to some component and after that simple div will be rendered), <code>componentWillUnmount</code> method is triggered and ref is lost so I cannot remove those two listeners in <code>Tooltip</code> component. Is it possible to unmount children before parent or any other way how I can fix this?</p>