React lazy loading, debounce

lazy loading

React.Lazyでは、コードを分割できます。 コード分割は、アプリケーションの「遅延ロード」を支援し、ユーザーのパフォーマンスを大幅に向上させます。 アプリケーションのコード量を減らさずに、ユーザーが不要なコードをロードすることを回避し、アプリケーションの初期化ロードに必要なコストを削減します。

import ImgWrapper from "./components/ImgWrapper";

function App() {
  return (
    <div>
      <ImgWrapper />
    </div>
  );
}

export default App;

import React from "react";
import { images } from "../images";
import ImgItem from "./ImgItem";

const ImgWrapper = () => {
  return (
    <>
      {images.map((image, index) => (
        <ImgItem key={index} src={image.src} />
      ))}
    </>
  );
};

export default ImgWrapper;

import React, { lazy, Suspense } from "react";

// import Image from "./Img";
const Image = lazy(() => import("./Img"));

const ImgItem = ({ src }) => {
  return (
    <div>
      <Suspense fallback={<div>Loading....</div>}>
        <Image src={src} />
      </Suspense>
    </div>
  );
};

export default ImgItem;

import React from "react";

export default function Img({ src }) {
  return <img src={src} alt="" />;
}

debounce

-特定のイベントが発生したときにビジネスロジックが過剰に発生しないようにするための関数です。 -主に、入力ボックスに検索語を入力するたびにサーバから関連検索語情報を取得して表示する機能を実現する。 -最後のイベントが呼び出されてからしばらくの間、呼び出し関数が遅延します。