# Memoization in React: introduction
## 目標
減少不必要的計算，提升性能

## 可以優化什麼地方
react的execution flow:
1. **Render phase** : 由component的return值建立element tree
2. Reconciliation phase: 比較先前的element tree並決定如何更新
3. Commit phase: 執行必要的更動來更新DOM tree

## Render何時發生
1. state改變
2. props改變
3. listen的context改變
4. parent component發生re-render

[註] 改變：primitive的值改變 / non-primitive的記憶體位址改變

## 常用API
- React.memo
- useCallback
- useMemo

## Component level optimization: React.memo
當component階層變得很多很深，根據第4.會多出不必要的re-render
React.memo可以記住先前return的值，當props不變時直接回傳舊的結果而不必重新建一次element

**為何不大量使用?**
## Memorize function object: useCallback
函數在js裡是物件，每次執行到宣告函數的地方都會為他分配新的記憶體位址，用到他的人也會以為真的改變了(2.)而因此重新render
useCallback可以記住第一個function instance，當deps list不變時直接回傳記住的function

**useCallback vs useMemo用法差異**
## Memorize computation result: useMemo
與useCallback類似，但記住的是function（第一個參數）執行後回傳的值

**為何不用useState + useEffect就好?**