Frame.js render twice with react 18.2.0

[Tifayq]

Render twice causes Frame render null.

Render 1: iframe not loaded. componentDidMount triggered. Render 2: iframe loaded, and get right result from renderFrameContents(). componentWillUnmount triggered. Render 3: iframe loaded, but this._isMounted is false, get null from renderFrameContents(). componentDidMount triggered.

Frame.js Debug Code:

{
    key: 'render',
    value: function render() {
      var props = _extends({}, this.props, {
        srcDoc: this.props.initialContent,
        children: undefined // The iframe isn't ready so we drop children from props here. #12, #17
      });
      delete props.head;
      delete props.initialContent;
      delete props.mountTarget;
      delete props.contentDidMount;
      delete props.contentDidUpdate;
      delete props.forwardedRef;

      console.debug('render', this.state.iframeLoaded, this.state.iframeLoaded && this.renderFrameContents())

      return _react2.default.createElement(
        'iframe',
        _extends({}, props, { ref: this.setRef, onLoad: this.handleLoad }),
        this.state.iframeLoaded && this.renderFrameContents()
      );
    }
}

Console:

[ryanseddon]

I'm pretty sure this is a react thing to make sure your components are concurrent ready they refer to it as double invoking.