普通文組 2.5

影片筆記：Managing React State -- 10 Years of Lessons Learned

筆記

單圖精華：

8 ways to handle state in react app

提升內聚性

如果狀態彼此之間帶有強烈關聯，使用一個 useState 變數集中管理即可。比如下列的「信用卡號」「卡片有效日期」「持卡人姓名」其實可以集中到「付款資訊」一個變數中：

// don't
const [cardNo, setCardNo] = useState("");
const [cardExpDate, setCardExpDate] = useState("");
const [cardHolderName, setCardHolderName] = useState("");


// do
const [cardInfo, setCardInfo] = useState({
  no: "",
  expDate: "",
  holderName: "",
});

如果不確定狀態們是否「有關」，可以根據「這些資料是否會包成一個 request body 送到後端」來判斷。

當你發現自己經常「同時執行多組 state set」時，可考慮是否該將這些狀態包在一起（參考上述），或是改用 useReducer 來管理：

// don't
setUser(user);
setIsLoading(false);


// do: update multiple states in one dispatch
dispatch({ type: "save-user", payload: user });

偏好推導

在透過 useEffect 監聽前兩組狀態變數，以計算第三個狀態變數時，請確認「第三個變數」是否真的需要被 useState 管理：

// don't
useEffect(() => {
  setFullName(`${firstName}, ${LastName}`);
}, [firstName, lastName]);


// do
const fullName = `${firstName}, ${LastName}`;

多使用推導（derive）來計算值，有時候你不需要這麼多組 useEffect / useState 😇

避免在 useEffect 中呼叫 api

影片看法：避免在 useEffect 中呼叫 api 來取得資料，請考慮使用 custom hook 或現成的第三方套件（React Query, SWR 等）來處理 api 互動。

react 官方文件的看法：直接在 useEffect 裡面呼叫 api 不是不行，但要記得處理 race condition 以及元件卸載（unmount）時清空本地狀態。

參考資料