開發React的專案也有好一陣子了，趁著有空閒的時間和大家分享一些我常會在不同專案用到的共同自訂義hook function，這系列會由淺入深啦，所以先從基本的概念下手就好。

1. useToggle
   相信大家開發的時候都會遇到toggle button的需求吧，雖然用useState綁定boolean值，不是太難做到，但如果這樣做，每次都還是要為了不同按鈕的開關，做不同的naming，減少重複動作也就造就了這樣的custom hook。
   提供一個剛學React時的做法：

// (before return) 原生 useState 作法
const [toggle, setToggle] = useState(false)
const toggleChange = () => {
  setToggle(!toggle)
}

<!-- in return -->
<div>
  <h1>{toggle.toString()}</h1>
  <button onClick={toggleChange}>toggle</button>
  <button onClick={() => setToggle(true)}>open</button>
  <button onClick={() => setToggle(false)}>close</button>
</div>

那既然要自定義hook，當然就是要像引入react hook function那樣，把東西整合成一隻檔案，去處理想要達成的邏輯，所以可以令列一隻.js檔案來處理邏輯的部分：

// in useToggle.js
import { useState } from "react";
// 這裡我們將toggleChange 整合進來
const useToggle = (defaultValue) => {
  // 傳入 defaultValue 覆蓋初始值
  const [value, setValue] = useState(defaultValue)
  const toggleValue = (value) => {
  // 這邊將原有的close && open的邏輯也整合進來，只要帶的值是 boolean, 讓它複寫
    setValue(prev => 
      typeof value === "boolean" ? value : !prev  
    )
  }
  // 最後回傳value && toggleValue
  return [value, toggleValue];
}

export default useToggle;

那麼，我們再回到原本的component檔案引入並修改：

// (before return) 原生 useState 作法
// const [toggle, setToggle] = useState(false)
// const toggleChange = () => {
//   setToggle(!toggle)
// }
import useToggle from "...你useToggle.js的路徑";
// 整合成一行
const [value, toggleValue] = useToggle(false)

<!-- in return -->
<div>
  <h1>{value.toString()}</h1>
  <button onClick={toggleValue}>toggle</button>
  <button onClick={() => toggleValue(true)}>open</button>
  <button onClick={() => toggleValue(false)}>close</button>
</div>

透過這樣的方式，可以有效減少change function的設立，也方便維護邏輯檔案。

剛開始就先從基礎的概念開始分享，後續會分享更多專案上常用的custom hook function。