useState
useState 是 React 中一個基本的鉤子（Hook），用於在函數組件中添加狀態。這個鉤子讓你能夠在不編寫類組件的情況下保持組件的內部狀態。
useCallback
useCallback 是 React 的一個鉤子（Hook），它返回一個記憶化（memoized）的回調函數。這個鉤子在某些場景下非常有用，特別是當你需要傳遞迴調函數給優化過的子組件時，或者當回調函數依賴於組件的狀態和屬性時。
爲什麼使用 useCallback
當你將一個回調函數作爲 prop 傳遞給子組件時，如果這個函數在每次父組件渲染時都創建一個新的引用，那麼子組件可能會進行不必要的重新渲染。爲了防止這種情況，你可以使用 useCallback 來記住回調函數，這樣只有當函數的依賴發生變化時，函數纔會重新創建。
基本用法
useCallback 接受兩個參數：一個是創建函數的內聯函數，另一個是依賴項數組。它的基本用法如下：
import React, { useCallback } from 'react';
function MyComponent({ someProp }) {
// 使用 useCallback 記住回調函數
const memoizedCallback = useCallback(
() => {
// 這裏是你的回調函數的邏輯
doSomething(someProp);
},
[someProp], // 依賴數組
);
// 使用 memoizedCallback ...
}
在這個例子中，memoizedCallback 僅在 someProp 發生變化時重新創建。如果 someProp 在渲染之間保持不變，即使 MyComponent 重新渲染，memoizedCallback 也會保持相同的引用。這對於避免因爲傳遞了新的回調函數實例而導致子組件不必要的渲染是非常有用的。
注意事項
過度使用 useCallback 可能會導致性能問題。記住函數也是有成本的，因爲它需要在內存中保持函數的引用。所以，只在有明確性能優化需求時使用它。
在依賴數組中正確地指定所有外部依賴項是非常重要的。如果你錯過了任何依賴項，你可能會遇到使用陳舊變量的問題。
useCallback 通常與 React.memo 配合使用，後者用於記住組件本身，以避免不必要的渲染。
總的來說，useCallback 是一個用於優化 React 應用性能的強大工具，但應謹慎使用，以確保它實際上對性能有所幫助。
useLayoutEffect
useLayoutEffect 是 React 的一個鉤子（Hook），與 useEffect 非常相似，但它在組件生命週期中的調用時機不同。useLayoutEffect 和 useEffect 都允許你在函數組件中執行副作用，但它們的主要區別在於它們執行副作用的時間點。
useLayoutEffect 的特點和用途
執行時機：useLayoutEffect 在 DOM 更新完成後立即同步執行，但在瀏覽器繪製之前。這意味着你可以在瀏覽器繪製之前讀取 DOM 佈局並同步地做出更改，這對於處理 DOM 佈局和動畫非常有用。
防止閃爍：由於 useLayoutEffect 是在瀏覽器繪製之前執行的，因此它可以用於在視覺上修改 DOM 之前進行計算，以避免視覺上的閃爍或不連貫。
和 useEffect 的比較：與 useEffect 相比，useLayoutEffect 發生在更新生命週期的更早階段。如果你的副作用涉及到 DOM 的佈局或者修改，可能會需要 useLayoutEffect 來保證同步更新，避免閃爍問題。但對於不涉及 DOM 的場景，一般推薦使用 useEffect，因爲它不會阻塞瀏覽器的繪製過程，有助於提升性能。
注意事項
雖然 useLayoutEffect 在某些場景下是必需的，但它應該謹慎使用，因爲如果處理不當，可能會導致性能問題。因爲它會在每次組件渲染後同步執行，可能會延遲瀏覽器的繪製過程。
在服務器端渲染（SSR）中，由於沒有 DOM，useLayoutEffect 會導致警告。在這種情況下，如果可能，最好使用 useEffect。