useState 引数は primitive? object?
先日の投稿の続きです。「memoize input array を空にする」ことにこだわらなければ、この憂慮は不要です。handler関数が外側のstate を参照しない様にした場合、以下の様な課題に遭遇します。
const [flag, setFlag] = useState(true)
const [count, setCount] = useState(0)
const handleToggleFlag = useCallback(() => {
setFlag(prev => !prev)
},[])
const handleIncrement = useCallback(() => {
setCount(prev => {
if (!flag) return prev
return prev + 1
})
},[flag]) // これを空にしたい
動くには動きますが、flag 更新毎に handleIncrement
が再定義されてしまいます。解決策として state を object 一つに集約する方法があります。useState の引数は「object である必要はないが、要望があれば可能」とされています。
const [state, update] = useState({
flag: true,
count: 0
})
const handleToggleFlag = useCallback(() => {
update(prev => ({ ...prev, flag: !prev.flag }))
},[])
const handleIncrement = useCallback(() => {
update(prev => {
if (!prev.flag) return prev
return { ...prev, count: prev.count + 1 }
})
},[])
Hooks 記事では言う必要もなく、これは現時点での考察になりますのでご注意下さい。
Author And Source
この問題について(useState 引数は primitive? object?), 我々は、より多くの情報をここで見つけました https://qiita.com/Takepepe/items/b803e05917ab74a32ebc著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .