SuspendyTreeChild Class — react Architecture

Source Code

fixtures/dom/src/components/fixtures/suspense/index.js lines 25–60

class SuspendyTreeChild extends React.Component {
  id = suspendyTreeIdCounter++;
  state = {
    step: 1,
    isHidden: false,
  };
  increment = () => this.setState(s => ({step: s.step + 1}));

  componentDidMount() {
    document.addEventListener('keydown', this.onKeydown);
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.onKeydown);
  }

  onKeydown = event => {
    if (event.metaKey && event.key === 'Enter') {
      this.increment();
    }
  };

  render() {
    return (
      <>
        <Suspense fallback={<div>(display: none)</div>}>
          <div>
            <AsyncStep text={`${this.state.step} + ${this.id}`} ms={500} />
            {this.props.children}
          </div>
        </Suspense>
        <button onClick={this.increment}>Hide</button>
      </>
    );
  }
}