🎣

ローディングのチラつきを防ぐためのカスタムフックを作った!

2022/04/23に公開

ローディングの時間がとても短いとき、チラつくことがありました。

そこで、
ローディングの表示時間の最小値を設定 し、チラつきを防ぐカスタムフック を作りました。

フック適応前 フック適応後
useLoadingWithBuffer.ts
import { useEffect, useState } from "react";

export const useLoadingWithBuffer = (
  isDefaultLoading: boolean,
  buffer: number = 500
) => {
  const [isLoading, setIsLoading] = useState(isDefaultLoading);
  const [isLocking, setIsLocking] = useState(false);

  useEffect(() => {
    // 「ローディング中」に変化したとき
    if (isDefaultLoading) {
      // 「ローディング中」に更新
      setIsLoading(isDefaultLoading);

      // 一定時間ローディング状態をロックする
      setIsLocking(true);
      setTimeout(() => setIsLocking(false), buffer);
    }

    // 「非ローディング中」に変化し、ロックされていないとき
    if (!isDefaultLoading && !isLocking) {
      // 「非ローディング中」に更新
      setIsLoading(isDefaultLoading);
    }
  }, [isDefaultLoading, isLocking]);

  return isLoading;
};

上記のフックにローディングのフラグを与えることで利用できます。

const isLoading = useLoadingWithBuffer(isDefaultLoading);

Discussion