はじめに

タイトルの通り、ReactでInputフィールドに全角入力された時に綺麗に動かなかったので、IME対応メモです。

ざっくり環境はこんな感じです。

仕様は以下のUML図の通り、

1. Inputフィールドに入力
2. Inputフィールドに入力した内容でAPIリクエスト
3. APIのレスポンスをstoreに保存
4. storeからpropsに渡してレンダリング

Material-UIの公式ドキュメントに用意されているメソッドではなくて、Inputタグが持つイベントのReactバージョンとして用意されているようです。
参照：公式Reactリファレンス（composition events）

具体的な回避策

onChangeメソッドで全角入力中かどうかのstate値を見て、falseの場合のみfetchするように変更
半角入力には特に制限はしていないので、半角入力時の多重リクエストは回避できません。。。泣

onChange = ({ target: { value: keyword }) => {
  this.setState({ keyword }, () => {
    if(!this.state.isIME) {
      this.props.fetch（this.state.keyword）
    }
  }) 
}
onCompositionStart = () => {
  this.setState({ isIME: true })
}
onCompositionEnd = () => {
  this.setState({ isIME: false }})
}

...
<Input
  name="keyword"
  type="text"
  onChange={this.onChange}
  onCompositionStart={this.onCompositionStart}
  onCompositionEnd={this.onCompositionEnd}
  value={this.state.keyword}
>
...

これでなんとか理想の動作は確認できました。

その２　入力中をいい感じに取得して多重リクエストを回避

setTimeout()を使って、APIリクエストを行うようにしました。
onChangeが走ったタイミングで、入力中というステータスを管理するstateを生成。

setTImeout(fetch, 800)と、0.8秒など適当な間隔で、fetchさせるようにします。
（0.8秒以内の再リクエストはまだ入力中だと判断させる）
多重リクエストを避けるために、onChange発火タミング時にタイマーをリセットさせることで、回避させました。

これで、0.8秒以内に新しくリクエストが発生しそうな場合も前回リクエストを停止させます。

具体的な回避策

これで、0.8秒以内のテキスト入力時はAPIリクエストされずに、無駄な処理も走りません。
フロントもちょっと軽くすることができた。

onChange = ({ target: { value: keyword } }) => {
    clearTimeout(this.timer)
    this.setState(
      {
        isChange: true,
        keyword,
      },
      () => {
        this.timer = setTimeout(() => {
          this.setFilterState()
        }, 800)
      },
    )
  }

...
<Input
  name="keyword"
  type="text"
  onChange={this.onChange}
  value={this.state.keyword}
>
...

さいごに

処理重いって結構ユーザーにとって、嫌われる割合高いので（自分も嫌）、開発者として軽い動作だったり、滑らかなインタラクションというは気がけて行きたいなと思います。
setTImeout()とかって結構クールじゃない感じのメソッドという印象が強くて、あまり使いたくないんですが、今回は結構いい使い方できたのでは？と勝手に思ってます。

他にもっといいやり方あるとか、そもそもダメだろってところもあるかもなので、そいうのコメントとかしてもらえたら感謝です。。。

蛇足

Reactやっていると、componentDidUpdataとか、ループ並みに処理走っちゃうことがよくあるのですが、致し方ないものなのだろうか。。。
この辺綺麗にかけるように設計練り練りすべきなのだろうか...。

React初めてもうすぐ1年くらい経ちますが、まだまだ慣れないし、難しいなぁと思ってます。
（Hooksもやらなきゃ、redux卒業しないと...）