Component

class Popover extends React.PureComponent {
  state = {
    active: false,
    visible: false
  }
  
  componentDidMount() {
    if (this.props.active) {
      this.show();
    }
  }
  
  componentWillReceiveProps({ active }) {
    if (active !== this.state.active) {
      if (active) {
        this.show();
      } else {
        this.hide();
      }
    }
  }

  show() {
    this.setState({ active: true }, () => {
      // some DOM operations to position popover based on the ref sizes
      
      this.setState({ visible: true });
      this.props.onShow();
    })
  }
  
  hide() {
    this.setState({
      active: false,
      visible: false,
    })
  }
}