Charonyu's Profile

剩最後幾天了，今天講最後一個hook，接下來應該會用一個實際的小project來實戰練習

這個 hook 可以讓你在指定的時間間隔重複地執行一個回調函數，它的功能就跟原生的 setInterval 類似。


import { useEffect, useRef } from "react";

const useInterval = (callback: Function, delay?: number | null) => {
  const savedCallback = useRef<Function>(() => {});

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    if (delay !== null) {
      const interval = setInterval(() => savedCallback.current(), delay || 0);
      return () => clearInterval(interval);
    }

    return undefined;
  }, [delay]);
};

export default useInterval;

const savedCallback = useRef<Function>(() => {}); 使用 useRef 保存回調函數。目的是讓回調函數在不同的 render 之間保持其持久性，但不會引起組件的重新渲染。

第一個 useEffect：更新保存的回調函數，讓他始終都是最新的。

第二個 useEffect：如果 delay 不為 null，將設置一個新的間隔。並在組件卸載時，清除這個間隔。

其實概念跟之前說的useTimeout差不多

[Day 24] useInterval 製作