【React】useEventという提案段階のhooksを知ったのでざっくりメモ

2022/5/14に開催されたTechFeed Conference 2022を拝聴した

TechFeed Conference 2022

このとき@koba04さんの発表で、提案段階のuseEventとという新しいHooksを知ったのでメモ

github.com

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が実行されるため、処理の中で条件分けが必要だったりする

なので、更新されたら再実行したい変数とそうでない変数を分ける仕組みが必要だよねということで提案されているみたい