react-use の実装から学ぶ custom hooks

react-use とは React の便利 custom hooks が定義されているライブラリ。 頑張って実装した hooks が「react-use にすでにありますよ」と指摘されることがよくある。 記事の目的 react-use を使う、使わないに関わらず react hooks の実装や設計から学べることは多い。 いくつか react-use の実装例[1]を見ながら、 筆者が面白いと思う実装例をいくつか紹介したい。 useToggle on/off を切り替えるトグル。 実装 import { Reducer, useReducer } from 'react'; const toggleReducer = (state: boolean, nextValue?: any) => typeof nextValue === 'boolean' ? nextValue : !sta