React Hooks - izudon/izudon.github.io GitHub Wiki
カスタムフックの流儀
Custom Hooks
30 useLongPress
29 useHover
28 useDebugInformation
27 useRenderCount
26 useOnlineStatus
25 useTranslation
24 useCookie
23 useCopyToClipboard
22 useDarkMode
21 useClickOutside
20 useEffectOnce
19 useSize
18 useStateWithValidation
17 useGeolocation
16 useMediaQuery
15 useWindowSize
14 useOnScreen
13 useEventListener
- 実際
- 任意のエレメント（デフォルトはトップレベルエレメント）に、
コールバックを伴ってイベントリスナを仕掛ける（ addEventListener() する）。
- 何が嬉しいかというとこの時、対となる
removeEventListener() が、
アンマウント時に行われるような予約を、同時にやっておいてくれるという点だ。
addEventListener() は、useEffect() を用いて、副作用としておこなうが、
戻り値として removeEventListener() する関数を戻しておくわけだ。
12 useDeepCompareEffect
11 useScript
10 useFetch
- 予想
- 返値
[ loading, error, data ]
- 引数
useFetch( uri, options, forData )
options にはデフォルト値があり、デフォルトと違うものを
あえて指定するプロパティのみオブジェクトで伝える。
- 呼んだ時点で
fetch が飛び、非同期なのですぐ返ってくる。
loading はしたがってすぐ true となり、
レスポンスが返り次第それは false になる。- それとほぼ時を同じくして、
error または data に、
何らかのオブジェクトが入っていることになる。
- 期待（たぶんこんな
useFetch() が欲しかったのだわと今気付く）
- 引数
useFetch( uri, options )
- 返値
[ loading, error, data, doFetch ]
doFetch() の引数 doFetch( formData, options )doFetch を呼んではじめて fetch が飛ぶ。
- 実際
09 useAsync
08 useStorage / useSessionStorage / useLocaStorage
07 useStateWithHistory
- 予想
- 当該変数の値を履歴として最初からすべて記憶している。
- 実際
- 履歴上の任意の点に戻って（参照点を移して）、
そこから履歴を作り直すこともできる。
（このとき参照点以降の履歴は白紙撤回になる）。
- 前回値と今回値に変化があったかなかったか、
useRef() を使って前回値を保存しておいて調べている。
06 usePrevious
- 予想
- 返値
[ prevValue, nowValue, setValue ]
- 引数
usePreviout( initialValue )
- 実際
useRef() を使って前回値を保存している。
（useState() ではいけなかったのか？）
05 useArray
- 予想
- 返値
[ array, { setArray, clear, push, pop, shift, unshift, splice } ]
- 引数
useArray( initialArrayValue )
04 useUpdateEffect
- 実際
useEffect() のプチ進化版。- 引数
useUpdateEffect( callback, 依存配列 )
- 第２引数の依存配列の値に変化があればコールバックが呼ばれる。
但し useEffect() と異なり、初回ロード時にはコールバックされない。
03 useDebounce
- debounce 跳ね返りを抑えること
- 予想
- 引数
useDebounce( timeoutSec, callback )
- 返値
[ restOfTime, chatter ]
timeoutSec 内に何度 chatter が呼ばれてもコールバックは呼ばれない。
最後の chatter から timeoutSec 秒経過まで全く chatter がなければ、
初めて callback が呼ばれる。
02 useTimeout
- 予想
- 返値
[ count, { resetCount, doStartStop } ]
- 引数
useTimeout( initialCount, callback )
resetCount(・・引数なし・・) で、カウントは元の値に戻る（10秒タイマなら10に戻る）。
resetCount( initialCount ) で、カウントは引数指定の値 initialCount に戻る。
カウントの進行停止は変化なし。
- 実際
- 次節
useDebounce の前フリとなるように仕様された関数だった。
01 useToggle
- 予想
- 戻値
[ state, toggleState ]
- 引数
useToggle( initialVaue );
- 実際
toggleState(・・引数なし・・) で 真偽逆転。
toggleState( true ) で true に設定、
toggleState( false ) で false に設定。
このアイデアは初めて見た。
00 useLocalStorage
- 予想
- 引数
useLocalStorage( key, defaultValue )
- 返値
[ value, setValue ]
setValue によりステート変数 value の値も変化するほか、
同時に LocalStorage への保存もおこなわれる。