Rules of Hooks
ループや条件、入れ子になった関数でHookを呼び出してはいけない
Hooksの順番が崩れる
ReactはHooksの順番に依存しているためHooksの処理をスキップされると、流れが崩れてしまう
code: sample.js
const customHook = () => {
// good
useEffect(() => {
if(name === '') {
console.log('success!!!')
}
})
// bad
if(name === '') {
useEffect(() => {
console.log('failure!!')
})
}
}
カスタムHooks以外の一般的なJavaScriptの関数以外の場所で呼び出してはいけない
カスタムHooksは2つ以上のHooksが含まれる関数。
つまりHooksが1つしか含まれていない関数は使用不可。
ReduxのReducerによって普及した state = initialState はReactでは使用してはいけない。
initialStateは時々propsが指定されることがあるためHooksの引数にて指定する
useStateはObjectやArrayを結合しない
forceUpdateのような機能を使いたい場合
const [, forceUpdate] = useState(false) と書き、処理のあとに forceUpdate(update => !update) とするとre-renderされる
これを使う(公式)
参考
Rules of Hooks