本セッションの登壇者
セッション動画（YouTubeチャンネル登録もお願いします。）
それでは「How useEvent would change our applications」というタイトルでReactのLTをさせていただきます。よろしくお願いします。
当初は「Is Suspense for Data Fetching Ready yet?」というタイトルのスライドにしていたんですけど、急遽「useEvent」というテーマが出てきて、こちらのほうがおもしろかったので差し替えました。こちらについても、本編のスライドの後にそのまま残してあるので、興味があれば読んでみてください。この話もまたどこかでできればなと思っています。
自己紹介です。koba04というアカウントで、GitHubとかTwitterとかをやってます。
useEventは開発者体験を変える!?
useEventなんですけれども、こちらは新しいhooksについての提案で、これが入るとけっこう開発者体験が変わるかなと思っているので、個人的には注目しています。おもにuseEffectだったり、useCallbackにあるような依存の配列あたりが変わってくるのかなと思っています。ただ、まだこれは提案段階なので、今後変わるかもしれないというのが注意点としてあります。
useEventとuseCallback
さっそくなんですけど、useEventはこんな感じでハンドラを作るようなhooksになっています。
ぱっと見るとuseCallbackとすごく似ているんですが、これをuseCallbackで書くとこうなります。
中でnameを使ってるので、nameが依存の配列に入ってくるんですけど、useEventの場合はそれが必要ないという感じになります。
で、つねにnameは最新のものが使えるというところと、この場合のonClickはつねに同じ参照が返ってくるので、ここでButtonのコンポーネントがメモ化されていても最適化が適用される、という形になります。
useEventで依存の配列を書き換える
やっぱりhooksベースでアプリケーションを作っていると、依存の配列はけっこう扱いが難しいケースが多いかなと思っていて、単純に指定する情報が多くなるという点もそうだし、あとuseEffectに関しては「その最新の値を使いたいけど、その値が変わったとしてもEffect自体は実行される必要はない」みたいなケースはあると思っていて、その場合にはEffectのコールバックの中で条件分けて…とか、そういうことをする必要が出てくると思っています。なので、ESLintのコメントなどで一時的に無効化したりとか、そういうケースも多いんじゃないかなと思っています。
たとえば「URLが変わったら、イベントを送りたいようなケースで、そのときにユーザーのIDなども送りたい」みたいなケースだと、URLとユーザーを指定する必要があるという形になると思うんですけど、これをuseEventで書くとこうなります。
送る処理をハンドラとして定義しておいて、useEffectのほうは、URLが変わったらということで、依存の配列はURLだけ指定できるようになって、handleUrlChange関数自体も必要なくなるので、パッと見た感じ「URLが変わったらこれが実行されるんだな」というのがすごくわかりやすくなっていると思います。
useEventの振る舞い
useEventの振る舞いのイメージなんですけど、これも紹介されていて、実際の内部の実装はこうではないんですけど、「つねにハンドラを最新のものが使われて、返す関数はuseCallbackで同じものが返る」みたいなイメージを持っていると、わかりやすいんじゃないかなと思います。
あとuseEventに対してESLintのプラグインでもちゃんと特別扱いしてあげたりとか、型システムレベルでもuseEventが返す関数を特別に扱うことでいろんなことができるようにしていこう、というのも今後の提案としてあります。
ほかのパターンとしては、たとえばコールバックを受け取るCustomHooksなどで、そのコールバックをつねにuseEventで同じ参照にするとかもできますし、さっきの型システムの話を使えば、「useEventで作られたuseCallbackだけを受け取る」ということを型レベルで保証したりとか、そういうのもできるようになるかもしれないという感じです。
けっこういろんな内容を見てると、やっぱり名前についてのコメントが多くて、なんでuseEventかというところは、ここのGitHubのコメントに書いてあるので、興味あれば読んでみてください。
というわけで、まだまだ提案中なのでどうなるかわからないですけど、実際これがくるとアプリケーションがより直感的に書けたりして、すごくいいなと思っているので、個人的にはとても注目しています。
冒頭でもお伝えしたように、今回のスライドと最初に想定していたスライドがそのまま資料として残っているので、興味あれば見ておいてください。
以上です。ありがとうございました。
