什麼是派生狀態（Derived State）？

在 React 中，派生狀態是指從現有的某個狀態或屬性計算出來的狀態，這篇文章將探討派生狀態的概念，以及如何運用它來簡化程式碼並確保資料的同步性。

使用 useState 前先思考

在這個例子中，我們使用三個 useState 來創建三個狀態，如果仔細分析，會發現它們都依賴於 cart 這個狀態。

// 購物車品項
const [cart, setCart] = useState([
  { name: "JavaScript", price: 1200 },
  { name: "Node.js", price: 1400 },
]);

// 購物車數量
const [numItems, setNumItems] = useState(2);

// 商品價格的總和
const [price, setPrice] = useState(2600);

numItems 代表購物車中的物品數量，而 totalPrice 代表購物車中所有商品價格的總和。

但是，這兩個狀態所需的資料已經存在於 cart 中，因此沒有必要創建這兩個額外的狀態變數，這樣做會帶來兩個主要問題。

1. 我們需要確保這三個狀態始終保持同步，每當我們更新 cart 時，必須再手動更新 numItems 和 price ，否則我們的狀態就會失去同步。
2. 分別更新這三個狀態會導致元件重新渲染三次，這在這個例子中是完全不必要的。

派生狀態的實際應用

我們可以從 cart 狀態中派生出 numItems 和 totalPrice 狀態，從而解決上述問題，因為 cart 已經包含了我們需要的所有資料，以下是一個簡單的範例：

// 購物車品項
const [cart, setCart] = useState([
  { name: "JavaScript", price: 1200 },
  { name: "Node.js", price: 1400 },
]);

// 購物車數量
const numItems = cart.length;

// 商品價格的總和
const totalPrice = cart.reduce((acc, cur) => acc + cur.price, 0);

這樣一來，我們無需使用 useState，也不會導致不必要的重新渲染， cart 狀態充當了這些相關狀態的單一資料來源，確保一切始終保持同步。

這是因為更新 cart 狀態將重新渲染元件，這意味著該元件函式會再次被執行，因此，當程式碼執行時，numItems 和 totalPrice 將根據 cart 狀態的值重新計算。

結語

當我們遇到類似的情況，其中一個狀態可以輕鬆地從另一個狀態計算出來時，我們應該考慮使用派生狀態，這樣的做法可以幫助我們簡化程式碼，確保狀態的一致性，並減少不必要的重新渲染。