這三十天我們介紹了許多的 hooks，在開發上常常會需要使用這些 hook 做組合技，也會常常使用到重覆的功能，這時候就可以將這些 hook 抽出來，做成 custom hook。

為什麼需要 Custom hook

在寫程式時，有時候會碰到不同元件裡有同樣邏輯程式碼的情況，重複寫兩遍以上不僅僅麻煩，也會讓程式更不好維護。
因此，我們可以將相同邏輯的程式碼抽出來做成一個自定義的 function，若這個 function 是處理 state 或 side effect 的，那就是一個自定義的 hook。

如何自定義 hook

前一段有說，其實自定義 hook 就是 function，因此相當簡單，只是仍需要符合 React 的命名規則，也就是：Custom hook 要以 use 開頭命名，就如同 useState、useEffect 一樣，這樣才能確保開發者知道他是個 hook ，並且適用 hook 的規則。
要自定義 hook，只需要將需要的 hook 邏輯包在 function 中：

const useLogin = (token)=>{
    const [isLogin, setIsLogin] = useState(false);
    
    useEffect(()=>{
        if(token){
            setIsLogin(true)
        }
    }, [token])
    
    return isLogin;
}

這是一個簡單的驗證有沒有登入的自定義 hook ，使用了 useState 以及 useEffect 兩個 hook 的組合，並且會回傳 isLogin 出來，方便確認登入狀態。

也可以不用回傳值：

const usePrint = (value) => {
    useEffect(()=>{
        console.log(value)
    }, [value])
}

跟 HOC 的比較

除了自定義 hook ，也可以使用 HOC 將邏輯抽出來使用。

const HOC = Component => props => (
    <div>
        <Component name={...props}/>
    </div>
)

HOC 可以幫助我們組合不同的 component、加上功能，也可以管理 state，過去多用 HOC 來分享 state。
相較於 HOC ，Custom hook 只是 function ，沒有包裹住 component，但兩者都可以做到使用重複邏輯的功能，只是使用場合會有些不同。

在寫 React 時，多運用 Custom hook ，想必會更加事半功倍！