Charonyu's Profile

今天突然想分享一些東西

其實分享到現在可能會有人覺得很枯燥，這些東西在工作上不一定用得到，能不能講一些實際常常會用到的test或者hook，我會這樣以基礎的來講，是因為在工作上常常會碰到不同的情形，我沒辦法模擬每個情況，但是可以根據我們之前有學到的test裡的技巧放進去，最後能自己寫出來才是最重要

廢話不多說，就來寫useTimeout吧


import { useEffect, useRef } from "react";

// Custom Hook
export function useTimeout(callback: () => void, delay: number | null) {
  const savedCallback = useRef<() => void>();

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

  useEffect(() => {
    function fn() {
      if (savedCallback.current) {
        savedCallback.current();
      }
    }
    if (delay !== null) {
      const id = setTimeout(fn, delay);
      return () => clearTimeout(id);
    }
  }, [delay]);
}

我使用 useRef 來保存 callback 來確保總是使用最新版本的 callback 的方法，不管 useEffect 的依賴如何變化。 useTimeout 內部總是執行最新 callback ，比較不會有閉包問題

[Day 10] 來撰寫useTimeout吧