react-hook-notes

useState

這個hook可以讓你在函式元件中加入狀態。它接受一個初始值，並返回一個包含「當前狀態值」和「更新該狀態的函式」的陣列。呼叫更新函式會觸發元件重新渲染。

狀態更新是非同步且會被批次處理的，所以若新狀態依賴舊狀態，應該傳入 updater function（prev => ...）而不是直接讀當前值，避免拿到過時的值。

const [count, setCount] = useState(0);

// 直接設值
setCount(1);

// 依賴前一個狀態時用 updater function
setCount((prev) => prev + 1);

// 初始值很貴時，傳函式做 lazy initialization（只在首次渲染執行）
const [data, setData] = useState(() => expensiveCompute());

useEffect

當我們使用 setInterval 設定一個重複執行的函式，它會返回一個 "計時器ID"（timerID），這樣我們就可以使用該 ID 來停止或清除訂閱，以防止無限制地重複執行。

在第一個示例中，我們在 useEffect 中使用了 return 函式，當元件被解除安裝時該函式會執行並清除先前設定的計時器。而在第二個示例中, 我們沒有提供return函式，因此該計時器可能在元件解除安裝後仍然持續執行，這會浪費記憶體和 CPU 頻寬，並可能損害 React 應用程式的效能。

對於您的第二個問題中的 “timerID”，它是“setInterval”函式返回的“timerID”，它是一個數字，每次生成唯一的識別符號。當我們列印 “timerID” 時，我們可以看到其值不斷遞增，表明間隔正在正常進行。

最後，為了避免使用大量記憶體和 CPU 資源，請確保正確切換清除 INTERVAL。 setInterval 持續執行直到被明確取消。相反，setTimeout 只執行一次所設定的函式後就解除訂閱。

useEffect(() => {
        const timerID = setInterval(() => {
            setCount((count) => count + 1);
        }, 1000);
        console.log("timerID", timerID)
        return () => {
            clearInterval(timerID); // 清除訂閱
        };
    });

// 沒有清除 一段時間後會使用大量內存 和 CPU資源導致問題
useEffect(() => {
        const timerID = setInterval(() => {
            setCount((count) => count + 1);
        }, 1000);
        console.log("timerID", timerID)      
    });

useReducer

這個hook可以用來管理複雜的狀態邏輯，它可以接受一個reducer函式和初始狀態值，並返回一個狀態值和一個dispatch函式。

useCallback

這個hook可以用來最佳化效能，它可以讓你快取一個函式，只有當依賴列表中的值發生變化時才重新生成。

useMemo

這個hook也可以用來最佳化效能，它可以讓你快取一個值，只有當依賴列表中的值發生變化時才重新生成。

useContext

這個hook可以讓你在React樹中使用全域的上下文值，它可以接受一個上下文物件並返回上下文的當前值。

useRef

這個hook可以讓你建立一個可變的ref物件，這個物件可以在多次渲染之間保持不變。它返回一個帶有 .current 屬性的物件，修改 .current 不會觸發重新渲染——這是它跟 useState 最大的差別。

常見兩種用途：存取 DOM 元素，或保存一個跨渲染但不需要反映到畫面上的可變值（例如計時器 ID、前一次的 props）。

// 1. 存取 DOM 元素
const inputRef = useRef<HTMLInputElement>(null);
inputRef.current?.focus();

// 2. 保存可變值（改 .current 不會 re-render）
const timerRef = useRef<number>();
timerRef.current = setInterval(...);

useTransition

React 並不會在所有非同步操作中暫停渲染，而是隻有當使用了 **startTransition** API 時才會暫停渲染。

當 **startTransition** 函式被呼叫時，React 將會暫停渲染，並且將處於 **pending** 狀態的非同步操作排入優先順序較高的佇列中，等待所有優先順序較低的操作完成後再進行執行。在這種情況下，React 將暫停渲染，直到非同步操作完成或者超時。

對於普通的非同步操作，例如 Promise 或 async/await，React 並不會暫停渲染，而是會繼續進行渲染操作。當非同步操作完成後，React 會檢查元件是否需要進行重新渲染，如果需要，則進行重新渲染。

useDeferredValue和useTransition是React 18新推出的Hooks，兩者的目的都是為了最佳化大型列表或表格的效能。

useDeferredValue用於處理快速修改和更新的狀態，例如在一個大型列表中滾動時需要對可視範圍內的資料進行更新，但希望讓頁面滾動更加平滑。使用useDeferredValue，可以把要更新的數值放到deferred value中，當渲染時再顯示更新後的數值，達到更平滑的更新效果。它的基本語法如下：

const deferredValue = useDeferredValue(value)

其中：

• value: 需要延遲的值

useTransition則用於在頁面上插入、移動、刪除等情況下的過渡效果。在執行類似建立、更新、刪除操作時，React會先在頁面上顯示 "等待" 狀態，等到非同步操作完成後再顯示 "成功" 或 "失敗" 的狀態，如果操作時間過長還可以顯示 "超時" 的狀態。這樣的設計使得複雜的程式碼實現起來更容易，而這種過渡過程就是 useTransition 要實現的功能。

useTransition接受兩個引數：第一個參數列示是否觸發過渡，第二個參數列示過渡持續的時間，第三個參數列示過渡結束後要執行的回撥函式。其基本語法如下：

const [isPending, startTransition] = useTransition()

startTransition(() => {
// 過渡開始前要做的事情
})

其中：

• isPending: 表示過渡是否正在進行中的布林值
• startTransition: 觸發過渡的函式

總而言之，useDeferredValue解決的是快速更新的問題，而useTransition解決的是頁面過渡效果的問題，兩者可以相互配合使用，提高React的效能和友好度。

useLayoutEffect

這個hook和useEffect非常類似，但它會在DOM更新之前同步呼叫。

useImperativeHandle

這個hook可以讓你定義一個對外暴露的ref物件，這個物件只包含你希望外部訪問的方法或屬性。