>ReactのSyntheticEventとDebounceReactではevent設定時にSyntheticEvent(合成イベント)が生成されネイティブのイベントと設定した関数の中継ぎをします。ReactのSyntheticEvent例えば下記のようにinput要素のonChangeイベントにhandleChange関数を設定した場合直接ネイティブのChangeイベントがhandleChange関数を実行するのではなく間に生成されているSyntheticEventを仲介してhandleChange関数を実行がされます。通常は気にすることはないのですが、SyntheticEventはパフォーマンスの観点からイベントオブジェクトを保持しておらず非同期処理の場合には注意が必要です。下記のようにhandleChange関数内で非同期処理をおこないイベントオブジェクトにアクセスした場合にエラーになってしまいます。設定することでイベントオブジェクトが破棄されずに利用できるようになります。(e.currentTargetなどの一部のプロパティはe.persist();を記述しても破棄されてしまいます。)SyntheticEventとDebounceこの性質で厄介なのがDebounceによるハンドリングが上手に行かないこと。指定しても意味がなく制御前に指定をしなくてはいけない。実行してdebouncedHandleChange関数内で実際の処理を行うという順番を変えることで対応が可能です。このままではe.persist();が何度も実行され、せっかくDebounceしている意味が薄れる。その場合はイベントオブジェクではなくイベントオブジェクトのターゲットオブジェクトをdebouncedHandleChange関数に引き渡すことでも対応ができる。名前:メールアドレス:URL:コメント:to-RについてJavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。GitHub株式会社トゥーアールについて渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。