# 📘 React 純函式教戰守則：寫錯 setState 的人都去哪了

---

# 🧠 為什麼 React 的 `setState` 要像個修行者一樣「純」？

你以為你在寫程式，其實你是在參加一場沒有通知的哲學考試。React 要求你在用 `setState` 的時候必須提供「純函式」——這不只是個建議，這是 React 的宗教信仰。

setCount(prev => prev + 1);

這種用法是對的。為什麼？因為 React 有點像是個潔癖控制狂，它可能會**重複呼叫你那個 updater 函式**來進行奇怪的內部操作、批次處理、以及預知未來。

⚠️ 如果你在這個函式裡偷偷做一些奇怪的事，比如：
- 呼叫另一個 `setState`
- 修改外部變數
- 打 API、對 DOM 動手腳
- 印 log 想觀察人生

那 React 就會變得不可靠，甚至直接報錯給你看，像是在說：「你這種行為我不認識。」

---

## 🧐 所以什麼鬼叫做「純函式」？

來，拿出你高中數學課沒丟掉的腦粒子。

> **純函式** 就是：
> - 相同輸入，必定給你相同輸出
> - 沒有副作用（這不是在說你感情生活）

### ✅ 純函式長這樣：
- 不去偷改外部變數
- 不亂印 log、不打 API、不操作 DOM
- 不搞非同步、也不偷偷做事
- 乖乖根據參數算出東西，然後結束

---

## 🧠 `setCount` 是哪裡來的？從天上掉下來的嗎？

不，是從 React 的 `useState` Hook 變魔術變出來的。

const [count, setCount] = useState(0);

這裡的意思是：
- `count` 是你目前手上的數值（從 0 開始）
- `setCount` 是 React 給你的一支安全剪刀，用來改 `count`，但你要學會不要拿剪刀亂戳人

這種 `[a, b] = arr` 的寫法叫做「**陣列解構賦值**」。React 這套寫法的背後意圖是：
> 「狀態的生命週期，我來管，你只負責說明怎麼變就好。」

---

## 🔍 怎麼判斷你寫的 updater 是不是一個純良市民？

問問你自己這些靈魂拷問：

| 問題 | 回答如果是 | 代表你有救 |
|------|------------|------------|
| 輸出只看參數嗎？ | ✅ 是 | 純 |
| 有沒有偷改外部變數？ | ❌ 沒有 | 純 |
| 有沒有副作用（log, API call）？ | ❌ 沒有 | 純 |
| 輸入一樣，輸出會一樣嗎？ | ✅ 會 | 純 |

---

## 🧪 setState 的錯誤與正確用法大對決

### 💣 範例 1：地獄級錯誤（非純 ❌）

setCount(prev => {
  setCount(p => p + 1); // 你是來毀滅世界的嗎？
  return prev + 1;
});

- ❌ 在 updater 裡呼叫 updater，是在召喚狄俄尼索斯的混亂靈魂
- ❌ 有副作用，整個函式從純淡變路

---

### ✨ 範例 2：好寶寶寫法（純 ✅）

setCount(prev => prev + 1);
setCount(prev => prev + 1);

- ✅ 兩次獨立呼叫，每次都使用最新的值
- ✅ 沒有奇怪的副作用，純到發光

---

### 🙃 範例 3：用變數？你以為這是同步操作？

setCount(count + 1);
setCount(count + 1);

- ❌ React 很可能會把這兩次一起批次處理，`count` 只是你**舊的**記憶
- ❌ 結果你會只加一次，React 在旁邊冷笑

---

## 🧐 快速實戰：來評鑑你寫的函式有沒有犯案

### Q1.

setName("John");

✅ 純。只是設定個值，沒人受傷。

---

### Q2.

setList(prev => {
  prev.push("item");
  return prev;
});

❌ 不純。你直接改了舊的 state，像是在畫 Mona Lisa 上面塗口紅。

✅ 正確打開方式：

setList(prev => [...prev, "item"]);

---

### Q3.

setScore(score + 1);
setScore(score + 1);

❌ 錯誤用法，因為你用的是舊的 `score`，兩次操作會互相蓋掉

✅ 改寫：

setScore(s => s + 1);
setScore(s => s + 1);

---

## 📚 想變強？不如看看這些：

- [React 官方 useState 文件](https://react.dev/reference/react/useState)
- [MDN：Pure Function 是什麼？](https://developer.mozilla.org/en-US/docs/Glossary/Pure_function)

---

你撐到這裡了，代表你對純函式的熱愛可能比你對朋友的訊息回覆還認真。好好寫程式，React 不會讚你，但我心裡會默默記一筆。
（然後馬上忘記）

>>> Generated by 我的 ChatGPI 家庭教師