defer loading image

delayImage.js

export default class Hero extends React.Component {
  state = {
    showImages: false,
  };

  componentDidMount() {
    // load images when images comes within the viewport once user starts scrolling
    const domRect = this.sectionElement && this.sectionElement.getBoundingClientRect();
    if (domRect && window.innerHeight - domRect.top >= 0) {
      this.enableImages();
      return;
    }
  }
  
  enableImages() {
    this.setState({
      showImages: true,
    });
  }

  renderImage(image) {
    if (this.state.showImages && image) {
      return <img src={image.src} className={`${ORGANISM_NAME}__image`} alt={image.alt} />;
    }
    return null;
  }
  
  render() {
    ....
  }
}