React Hooks - yacheng3249/SoniQube GitHub Wiki

React Memo

React.memo 在比較 props 改變時，背後是使用 Object.is() 去判定，當 props 是原始型別時，比較的是值是否相同，當 props 是物件型別時，比較的是記憶體位置(by reference)。

所以父元件重新渲染時，重新提供新的 props 給子元件，如果是物件型別的話，即使內容的值完全一樣，但還是會導致 memo 失效，重新渲染子元件。

成功範例：因為傳進子元件 (Todos) 的 props (todos) 是原始型別，比較的是值，因此使用 React Memo 成功避免子元件不必要的渲染。

失敗範例：因為傳進子元件 (Todos) 的 props (addTodo) 是物件型別，比較的是記憶體位置，就算值一樣但比較的記憶體位置不一樣，因此使用 React Memo 還是會讓子元件重新渲染。

useMemo

在重新渲染之間，用來緩存計算結果的方法。傳入一個創建函式和依賴項目，創建函式會需要返回一個值，只有在依賴發生變化時，才會更新值。此方法通常用在性能優化時。

範例：當點擊 Add todo 時，因為有使用 useMemo，所以子元件不會重新渲染，只有在 count 發生變化時才會重新渲染。

useCallback

在重新渲染之間，用來緩存函式的方法。會回傳一個被 memoized 的 callback 函式，只有在依賴發生變化時，才會更新。此方法通常用在性能優化時。

範例：當點擊 + 按鈕 時，因為有使用 useCallback，所以子元件不會重新渲染，只有在 todos 發生變化時才會重新渲染。

這三者的差別是 useMemo 會回傳 memoized 的一個值，useCallback 會回傳 memoized 的 function 然後 React.memo 會回傳 memoized 的 component!