filterBestPokemon useMemo

[QzCurious]

原 useEffect 邏輯以 useMemo 取代會更合適:

1. filterBestPokemon 是依賴其他狀態 "衍生" 的狀態
2. 原 useEffect 寫法在狀態上會經過 "2個階段"，但 useMemo 只會有 "1個階段"
   • useEffect
     1. 初始狀態 (狀態1): filterBestPokemon = []
     2. 更新: filterPopularPokemon -> useEffect -> setFilterBestPokemon
     3. 最後狀態 (狀態2): filterBestPokemon = [/* 被篩選過得資料 */]
   • useMemo
     1. 狀態與其相依的狀態 bestDamage, popularPokemon, storeAllPokemon 同步，沒有額外的 "更新動作"
3. 不需要額外呼叫 filterPopularPokemon
4. 換一個方式看，如果有n個 components 需要用到 filterBestPokemon 時:
   • ~n個 components 都呼叫 filterPopularPokemon，那 filterPopularPokemon 其實多執行了不必要的 n-1 次~ 用 useMemo 仍是會執行 n 次
   • 只由1個 component 去呼叫 filterPopularPokemon，那就會很難決定是哪1個 component 去呼叫 filterPopularPokemon

---

我沒有去動原有的邏輯，這邊只是展示更合適的寫法

[QzCurious]

我在改的時候發現其實 filterPopularPokemon 根本沒被用到，但就放這裡當範例。

然後整個程式看起來有很多地方都可以套用上述邏輯去改，可以再練習看看。

[QzCurious]

修正錯誤的內容:

4. 換一個方式看，如果有n個 components 需要用到 filterBestPokemon 時:
   • ~n個 components 都呼叫 filterPopularPokemon，那 filterPopularPokemon 其實多執行了不必要的 n-1 次~ 用 useMemo 仍是會執行 n 次