Hooksアンチパターン

こんなhooksは嫌だ

複数のeffectがdocument.titleが書き換え合戦をする

無限ループeffect

refsに頼りすぎる

うっかり更新が検知されない

基本的にstateの方が混乱しない。

refsをdepsに絡ませると一気に更新タイミングが謎になる

stateをお互いが書き換え合戦する

Contextがお互いを参照してる

ContextがObjectを直接食ってる

↑無限ループ

他のstateの値を中間保存するstateがある

整合性が取れなくなる

useMemoで回避する

selectorの考え方の応用

memoした結果を返すだけのhooksがあれば良い

ライフサイクルによって破損したら困る値をuseStateする

keysのし掛け間違いで死にがちなど

ESLintが検知できないタイプの悪い使い方をしちゃう

動的なhooks生成など

アンチパターンを避けるために？（for ビギナー)

Basic Hooksだけ使おう

useMemoとかuseCallbackとか一回慣れるまで忘れましょうというはなし

eslintでルール入れましょう

Basick Hooksと言えどuseEffectが厄介です

ハマるパターンの半分以上は潰せるはずです

depsは意図通りにならないことがあるかも