ReactのSyntheticEventとDebounce

Reactではevent設定時にSyntheticEvent(合成イベント)が生成されネイティブのイベントと設定した関数の中継ぎをします。

ReactのSyntheticEvent

例えば下記のようにinput要素のonChangeイベントにhandleChange関数を設定した場合直接ネイティブのChangeイベントがhandleChange関数を実行するのではなく間に生成されているSyntheticEventを仲介してhandleChange関数を実行がされます。

通常は気にすることはないのですが、SyntheticEventはパフォーマンスの観点からイベントオブジェクトを保持しておらず非同期処理の場合には注意が必要です。

下記のようにhandleChange関数内で非同期処理をおこないイベントオブジェクトにアクセスした場合にエラーになってしまいます。

これを防ぐにはハンドル関数内で e.persist(); を設定することでイベントオブジェクトが破棄されずに利用できるようになります。(e.currentTargetなどの一部のプロパティはe.persist();を記述しても破棄されてしまいます。)

SyntheticEventとDebounce

この性質で厄介なのがDebounceによるハンドリングが上手に行かないこと。Debounce自体が内部的に非同期処理で制御をしているため制御後にe.persist(); を指定しても意味がなく制御前に指定をしなくてはいけない。

そのためhandleChange関数内でe.persist(); を実行してdebouncedHandleChange関数内で実際の処理を行うという順番を変えることで対応が可能です。

ただこのままではe.persist();が何度も実行され、せっかくDebounceしている意味が薄れる。その場合はイベントオブジェクではなくイベントオブジェクトのターゲットオブジェクトをdebouncedHandleChange関数に引き渡すことでも対応ができる。

参考

合成イベント (SyntheticEvent) – React
React SyntheticEvent reuse – Trabe – Medium
[React] Debounce SyntheticEvent | DailyEngineering

スポンサードリンク

«ReactのContext APIを利用してコンポーネント間の情報を共有 | メイン | WordPressのRest API のUser一覧で非投稿者も表示する»