Make a React Component that render delayed after requestAnimationFrame event

makeRafDelayed.js

import React, { Component as ReactComponent} from "react";

export function makeRafDelayed(Component) {
  return class RafDelayedComponent extends ReactComponent {
    state = {
      isFirstRender: true,
    };

    componentDidMount() {
      this.setState({
        isFirstRender: false,
      });
    }

    shouldComponentUpdate() {
      if (this.rafId == null) {
        this.rafId = requestAnimationFrame(() => {
          this.forceUpdate(() => {
            this.rafId = null;
          });
        });
      }

      return false;
    }

    render() {
      if (this.state.isFirstRender) {
        return null;
      } else {
        return <Component {...this.props} />;
      }
    }
  }
}