因為之前有先把第十三天的目標順帶做完了，但我也不想先往後做影響我整個計劃，所以我今天不急著往後做，而是選擇優化原本的功能與補強觀念。
先處理沒有資料時的畫面
首先，我優化了圖表區的無資料狀態。
如果當月沒有收入或支出資料，圖表區可能會直接空掉，使用者可能會以為當掉什麼的。
所以我改成顯示：

• 「本月尚無支出紀錄」
• 「本月尚無收入紀錄」
• 「＋新增一筆記帳」按鈕
  這樣使用者能知道目前的狀態，並且有下一步可以操作。

再來，開始理解useMemo到底在優化什麼
我開始針對原本的程式碼進行效能優化。
像是月收入、月支出、月結餘，以及圓餅圖資料，都需要使用 filter()、reduce() 等方法整理資料。
所以我將這些計算放進 useMemo：

一開始我以為 useMemo 是讓整個 App 不用重新計算，但理解後才發現不是這樣。
React 元件重新渲染，和 useMemo 裡面的運算是否重新執行，是兩件不同的事情。
只要依賴陣列裡的值沒有改變，就可以直接使用上一次的計算結果。

依賴陣列不是放越多越好
今天我也讓 AI 出了一些題目來測試自己。
其中有一題讓我印象很深：

一開始我想說 isSidebarOpen 放進去好像也沒有什麼問題
這題裡面側邊欄有沒有打開，根本不會影響財務資料的平均值
所以如果只是因為側邊欄開關改變，就讓這個計算重新執行，其實就是多做了一次不必要的工作。
最後把它修改成：

因此讓我更加牢記「依賴陣列只放『會影響這個計算結果』的變數」

今天也貼一下app呈現出來的樣子:

總結：
今天我學會了 useMemo 的使用時機：

• 簡單運算 → 不需要特別使用 useMemo
• filter、reduce、sort 等大量資料運算 → 可以考慮使用
• 依賴陣列 → 只放真正會影響計算結果的變數
  適時回頭整理、優化和補強觀念，同樣也是開發的一部分。