Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

React v17 からイベントリスナーの張り方変わるけど、breaking changes は抑え気味だよ

touchmove について調べてて気になったので。

React v16 まで

React v16 までは、React コンポーネントに張られたイベントリスナーは ドキュメントのルート要素にすべて集約して貼られていました。そのため、React v16 までは、onTouchStart や onTouchMove 内で event.preventDefault() を呼び出すことができずエラーになっていました。

(一部ブラウザでは、document.body, window などドキュメントのルート要素に touchstart イベントや touchmove イベントのリスナーを張ろうとすると、自動的に {passive: true} を引数に渡したとみなされます)

React v17 から

結論から書くと、React v17 からも基本的に preventDefault は呼び出せないままです

React v17 から、イベントリスナーを張る対象が変更されました。v17 からは すべてのイベントリスナーは React のエントリポイント要素へ張られます。よって、touchstart イベントや touchmove イベントも passive: true ではなくなる…はずでした。しかし、この変更を加えてしまうと大きな breaking changes になってしまうので、いったん明示的に passive: true を渡すようにしたそうです。

結論

もしや React v17 のイベントリスナーの張り方、breaking changes なんじゃないのか? と思って調べたけれども、ちゃんと考慮してありましたという話でした。