React Custom hook 踩坑日记 - useToggle

开发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。