Как я могу предварительно загрузить список изображений в свой компонент React?

Question

В настоящее время в моем приложении есть класс React, который просматривает список из примерно 100 изображений, которые могут загружаться довольно медленно, когда пользователь достигает маршрута, отображающего этот компонент.

В идеале должен быть способ предварительно загрузить эти изображения или загрузить их более эффективно, чтобы предотвратить задержку при визуализации компонента.

Как можно предварительно загрузить эти изображения при загрузке приложения? Мой код для класса выглядит следующим образом:

import React from "react";
import {
  Link,
  useHistory,
  useLocation,
  useParams
} from "react-router-dom";
import '../App.scss';
import ProductData from "./data/ProductData";
import AccessoriesData from "./data/AccessoriesData";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
import { ReactComponent as Logo } from '../images/logo.svg';
import { ReactComponent as WaterTechLogo } from '../images/water-tech-logo.svg';
import { ChoicesContext } from "../context/ChoicesProvider";

class ProductView extends React.Component {

  static contextType = ChoicesContext;

  constructor(props) {
    super(props);

    this.state = {
      seq: null,
      open: null
    };

    this.forwardSequence = this.forwardSequence.bind(this);
    this.reverseSequence = this.reverseSequence.bind(this);
  }

  static sequenceImages(folder, filename, type) {
    let images = [];
    for (let i = 0; i < 51; i++) {
      images.push(<img src={require(`../images/sequences/${folder}/${filename}_000${i}.jpg`)} alt="" className={`${type} sequenceImage`} />);
    }
    return images;
  }

  async sleep(ms) {
    return new Promise(r => setTimeout(r, ms))
  }

  async forwardSequence(sequence, effect, id) {
    Array.prototype.reduce.call
    ( sequence
    , (r, img) => r.then(_ => this.sleep(50)).then(_ => effect(img))
    , Promise.resolve()
    )

    this.setState({
      open: !this.state.open,
      seq: id
    });
  }

  async reverseSequence(sequence, effect) {
    Array.prototype.reduceRight.call
    ( sequence
    , (r, img) => r.then(_ => this.sleep(50)).then(_ => effect(img))
    , Promise.resolve()
    )

    this.setState({
      open: !this.state.open,
      seq: null
    });
  }

  backBtn() {
    const etseq = document.getElementsByClassName("exploreTech");
    const uiseq = document.getElementsByClassName("userInterface");

    if (this.state.open && this.state.seq === "ui") {
      return <div className="backBtn" onClick={() => this.reverseSequence(uiseq, img => img.style.opacity = 0)}><FontAwesomeIcon icon={faArrowLeft} /></div>;
    } else if (this.state.open && this.state.seq === "et") {
      return <div className="backBtn" onClick={() => this.reverseSequence(etseq, img => img.style.opacity = 0)}><FontAwesomeIcon icon={faArrowLeft} /></div>;
    } else {
      return <div className="backBtn" onClick={this.props.history.goBack}><FontAwesomeIcon icon={faArrowLeft} /></div>;
    }
  }

  render() {
    const etseq = document.getElementsByClassName("exploreTech");
    const uiseq = document.getElementsByClassName("userInterface");

    const { choices } = this.context;
    const CurrentProduct = ProductData.filter(x => x.name === choices.productSelected);

    const accessoriesClasses = this.state.open && this.state.seq === "et" ? 'accessories' : 'accessories hide';
    const featuresClasses = this.state.open ? 'features hide' : 'features';

    return (
      <>

        <div className="productInteractive wrapper">
          {CurrentProduct.map((item, i) => (
            <main key={i} className={item.slug}>

              <div className="imageSequence">
                <img src={require(`../images/sequences/${item.static_img}`)} alt="" className="staticImage" />

                {ProductView.sequenceImages(item.explore_tech_img_folder, item.explore_tech_filename, "exploreTech")}
                {ProductView.sequenceImages(item.user_interface_img_folder, item.user_interface_filename, "userInterface")}
              </div>

            </main>
          ))}
        </div>

      </>
    );
  }
}
export default ProductView;