Web Front-end 菜鳥心得：用 React Custom Hooks 製作頭尾相依的連鎖反應

以下是一隻菜鳥在無窮迴圈之森與變數未宣告之谷中逃出生天的掉漆冒險故事

昨天花一整天才弄好的東西，過程中一度進退維谷、想衝去 slack 跟 senior 喊救命，最後菜鳥我終究還是靠著驚人的意志力，一邊維持不打擾別人休息時間的紀律，一邊奮力爬行抵達了終點... _:(´ཀ`」 ∠):

想解決的問題

系統中有三類物件，彼此互有關連，這些關連只會紀錄在其中一方，因此前端從 api 拿到資料後，會做一些計算，才能在每個物件的畫面上顯示出它和誰相關連。任一類物件新增、修改、刪除時，前端也需要重新計算，更新相關連物件的狀態。

前端這邊的計算任務為：

• 物件 A 變動時，自動更新物件 B 與物件 C
• 物件 B 變動時，自動更新物件 A
• 物件 C 變動時，自動更新物件 A

試誤過程

寫 react custom hooks 比較上手以後，發現 custom hooks 可以把別的 hooks 吐出來的變數吃下去當作參數，就決定利用這個特性來做相關連物件的自動更新。

參數不更新之障壁

一開始遇到的低級問題，是 custom hooks 從別人那邊吃進來的參數，只有第一個值有效，之後新的值都無效。後來發現，這是因為我沒有用 useEffect 訂閱該參數的關係，有訂閱的話，參數更新時才會觸發 re-render，我的 custom hooks 裡面的 state 也才會更新。

無窮迴圈之森

參數更新做好以後，緊接著就發生了無窮迴圈，你知道的，useEffect 原本就很容易不小心寫出無窮迴圈... 解法是站起來動一動，喝杯水，讓腦袋清醒一下，不要把 useEffect 的 dependency list 跟隔壁 useCallback 的 dependency list 搞混，在成人的世界，很多東西只有 useCallback 能訂閱，你 useEffect 不能隨隨便便就跟著人家一起訂閱...

變數未宣告之谷

解開無窮迴圈以後，最後遇到的是變數宣告順序的問題。由於 custom hook B 和 custom hook C 需要使用 custom hook A 吐回來的變數，因此必須先寫 A 再寫 B 跟 C。但同時 A 又需要使用 B 和 C 吐回來的變數，因此 A 寫在前面的話，吃到 A 裡面的 B 跟 C 就永遠是 undefined。想了老半天，最後的解法是開頭先用 useState 定義一個 A'，然後把 A' 餵給 B 跟 C，再把 B 跟 C 餵給 A，最後用 useEffect 訂閱 A 的值，A 的值一有變化，就回頭去更新 A'。

結論

講這麼多，總歸起來其實也就兩個心得：

在 custom hooks 內，用 useEffect 訂閱來自其他 custom hooks 的參數

在 custom hooks 間，用 useState 佔位給尚未宣告的參數，再用 useEffect 更新它

後記

在 egghead 上完課、對 react hooks 漸漸上手後，一時不知道接下來該往哪個方向鑽研，覺得一個人邊練功邊自學的方式，開始遇到瓶頸。原本想換去有一線 senior 的地方工作，進步比較快，但又覺得換工作的過程要一直出門跟大量陌生人接觸，光用想的就累，只好一直不上不下的擺著。

最近事情有了轉機，主管 被我盧到受不了所以（X） 不知道為什麼突然就（O） hire 了一個我想共事的 senior 進來。於是，在第一份寫程式工作滿一年又六個月的現在，菜鳥我終於有了可以問問題跟討論技術的對象，學習瓶頸也自然而然地打破了 😃✨

配合著 senior 的工作步調，菜鳥我展開了精實的 cowork 生活，精實到讓人忘了時間，跟老鳥 cowork 了快一個月，驀然回首，才發現其實只過了一個禮拜...

天公伯啊！一線的世界都這麼 hardcore 嗎？！ 😱😱😱