ReactでIME変換中に起きる2つの落とし穴——Enter送信とデバウンス自動検索

• URL: https://dev.classmethod.jp/articles/react-ime-composition-pitfalls
• 日付: 2026-06-20
• Tier: Tier 2
• 要旨: ReactのonChangeハンドラがIME変換中（日本語入力の確定前）に発火してしまう問題と、compositionstart/compositionendイベントを使った正しい対処法を解説した記事。

詳細

ReactのinputでonChangeを直接使うと、日本語IME変換中の未確定状態でも発火し、検索クエリや文字数カウントが途中の読み（ひらがな）で更新される問題が起きる。対処はcompositionstartでisComposing=trueにセットし、compositionend後にのみonChange相当の処理を実行するパターン。React 18以降ではisComposingをnative eventから取得できるが、Safariの挙動の差異も紹介されている。inputのtype=“search"とのクロスブラウザ差分も確認されている。