SuspendyTree Class — react Architecture

Source Code

fixtures/dom/src/components/fixtures/suspense/index.js lines 62–107

class SuspendyTree extends React.Component {
  parentContainer = React.createRef(null);
  container = React.createRef(null);
  componentDidMount() {
    this.setState({});
    document.addEventListener('keydown', this.onKeydown);
  }
  componentWillUnmount() {
    document.removeEventListener('keydown', this.onKeydown);
  }
  onKeydown = event => {
    if (event.metaKey && event.key === '/') {
      this.removeAndRestore();
    }
  };
  removeAndRestore = () => {
    const parentContainer = this.parentContainer.current;
    const container = this.container.current;
    parentContainer.removeChild(container);
    parentContainer.textContent = '(removed from DOM)';
    setTimeout(() => {
      parentContainer.textContent = '';
      parentContainer.appendChild(container);
    }, 500);
  };
  render() {
    return (
      <>
        <div ref={this.parentContainer}>
          <div ref={this.container} />
        </div>
        <div>
          {this.container.current !== null
            ? ReactDOM.createPortal(
                <>
                  <SuspendyTreeChild>{this.props.children}</SuspendyTreeChild>
                  <button onClick={this.removeAndRestore}>Remove</button>
                </>,
                this.container.current
              )
            : null}
        </div>
      </>
    );
  }
}