boolean型のstateをスマートに切り替える useToggleを使ってみた

onClickなどのイベントでboolean型のstateのtrue falseを切り替える場面てよくありますよね。
例えば、モーダルのコンポーネントを呼ぶ、呼ばないなどで、僕は目が腐るほどみてます。

booleanのstateのtrue, falseを切り替える際、以下のよう記述することがよくあります。

const [boolState, setBoolState] = useState(false)
const toggleBool = () => setBoolState(!boolState)

return (
 <button onClick={toggleBool}>toggle1</button>
 <button onClick={toggleBool}>toggle2</button>
)

上記のように

const toggleBool = () => setBoolState(!boolState)

でboolStateの逆をセットするのてなんか気持ち悪いですよね。

この際、使えるのがreact-useのuseToggleというhooksが使えます。

https://github.com/streamich/react-use

https://github.com/streamich/react-use/blob/master/docs/useToggle.md

まずはreact-useを入れてください。

useToggleを使って例

const [boolState, setBoolState] = useToggle(false)//初期値をセット

return (
 <button onClick={setBoolState}>逆を入れる</button>
 <button onClick={setBoolState(false)}>falseにする</button>
 <button onClick={setBoolState(true)}>trueにする</button>
)

このようにuseToggleを使わない際の

const toggleBool = () => setBoolState(!boolState)

この部分を省略することができます。

setBoolStateは何も指定しない場合は現在の値の逆が入ります。