前言
當我們還是新手時，常常寫了一大堆程式碼，程式碼越來越亂，UI與邏輯瘋狂耦合，發生bug又找不到在哪，又發現好多地方都是差不多的功能，卻每個地方都寫不一樣，又不知道是哪個地方產生bug的，這時候我們就需要使用自己的custom hook，但是我們應該怎麼寫呢，這就是為什麼這篇主題產生的原因了。
使用custom Hook與寫測試的理由
代碼重用與模組化
當你發現自己在不同的React組件或專案中重複相同的邏輯時，使用Custom Hooks是一種很好的方式來重用這些邏輯。這讓你能夠抽取共用的功能，並在多個組件或專案間重用它。
減少冗餘和提升可維護性
使用Custom Hooks可以幫助你減少冗餘的代碼，使你的專案更簡潔。這將使未來的維護工作更容易，因為你只需在一個地方更新邏輯，而不必在多個地方做相同的更改。
狀態邏輯的封裝
Custom Hooks允許你將狀態邏輯封裝在一個獨立的單元中。這樣，你可以在不影響組件結構的情況下，更容易地為你的應用添加新功能或修改現有功能。
易於測試
將邏輯分離到Custom Hooks中使其更容易單獨進行測試。你可以專注於測試單一的Hook，而不是整個組件，這樣測試會更精確、更容易實施。
提升可讀性和可理解性
使用Custom Hooks有助於使你的組件代碼更加乾淨和組織良好。這將使其他開發人員（或未來的你）更容易理解和維護代碼。
提高開發速度
一旦你建立了一個可重用的Custom Hooks庫，你會發現開發新功能或新專案的速度會更快。這是因為你可以重用既有的邏輯，而不必每次都重新寫代碼。
更容易進行代碼審查
當你的代碼模組化和解耦時，代碼審查的過程也會更容易。這將使團隊更容易理解每個部分的作用，更快地找到潛在的錯誤或改進點。
提升團隊協作
擁有一個內部的、高度可重用的Hooks庫可以加快團隊開發速度，並確保各個組件和功能遵循相同的最佳實踐。
開始前須知：
- 看這篇前需要對React有基礎了解
- 本篇文章是使用React18，觀看本篇文章前可以先使用CRA或Vite等方法開啟一個react專案
- 開啟專案後請先下載以下套件
- 如果不會設定typescript的朋友，可以複製以下設定
- jest 的設定也可以參考以下
謝謝大家，這三十天我們就一起努力吧～