做下去，遇上新難題閱讀時間約 2 分鐘
檔案長度，是一個訊號
像 App.tsx 這類主檔案，很容易隨着開發慢慢收進頁面導覽、網路請求、編輯狀態和保存規則。每次新加功能時本身都能運作，但下次要改動時，就得同時讀懂越來越多互相牽連的邏輯。真正的困難在於責任糾纏在一起，而不是超過某個固定行數就一定出問題。
Fiction Studio 和 My Next Step 都按功能責任抽出了專門的 controller（控制模組）。當這樣做能釐清「哪個模組負責哪件事」，拆分就有價值；如果只是把原本糾纏在一起的關係打散到很多小檔案，追查問題時反而更難。
先說清楚，拆開後兩邊怎樣交接
動手前，先選一份連貫的責任，例如機會配對或寫作保護。列出它與其他部分之間需要傳入甚麼參數、傳回甚麼狀態、有哪些回呼函式（callbacks）與外部操作（side effects），並明確界定保存的資料（persisted data）由誰負責管理。
在 React 中，把邏輯移進自訂 Hook（custom Hook）是重用邏輯，不代表不同呼叫者會自動共用同一份狀態（shared state）。抽離時要檢查：狀態何時建立與銷毀、effect 怎樣清理（cleanup）、依賴項（dependencies）改變時會怎樣，以及重新繪製（rerender）會否重複啟動工作。
讓這次改動，只有一件主要事情
先把原有的預期行為穩定下來並說清楚，寫好針對性的檢查，然後才搬動這份責任；同一次改動不要順便加新功能。抽出的模組與留下的呼叫位置都要檢視，不能只見 import 路徑編譯通過就算完成。
之後親自走一次實際操作路徑，包括失敗處理和返回上一頁。如果拆分時發現原有功能本身有錯，應另外記下，或明確調整這次修改的範圍。把「結構抽離」與「行為修改」分清楚，才容易確認這次搬動有沒有守住原有的功能。