2022/5/14に開催されたTechFeed Conference 2022を拝聴した
このとき@koba04さんの発表で、提案段階のuseEvent
とという新しいHooksを知ったのでメモ
useCallback
でこのように書いていた処理では、中でnameを使っているので、引数の配列にname
を渡す必要がある
function User() { const [name, setName] = useState(''); const onClick = useCallback(() => { saveUserName(name); }, [name]); return <Button onClick={onClick} />; }
これをuseEvent
を使うと引数なしで最新のname
が使える
function User() { const [name, setName] = useState(''); const onClick = useEvent(() => { saveUserName(name); }); return <Button onClick={onClick} />; }
モチベーションとして、今の引数に渡す依存の配列がややこしい時がある
例えば、useEffect
の場合は中の処理で必要だからといって配列に変数を格納してしまうと、その変数が変更された場合にeffectが実行されるため、処理の中で条件分けが必要だったりする
なので、更新されたら再実行したい変数とそうでない変数を分ける仕組みが必要だよねということで提案されているみたい