react-autosuggestでapiのコール回数を減らす

検索フォームでGoogleのように検索ワードのサジェストをやりたくて、以下のパッケージを入れた。

react-autosuggest

使い方はサンプル通りで良いんだけど、データはapi経由でサーバから取得してくる。
apiを叩く回数を減らしたくて色々やってみた。

lodashって名前は聞いた事あるけど使った事ないjsライブラリに、

throttle

とか

debounce

って言うメソッドがあったので、最初はこれを使ってみたんだけど、検索ワードの入力を素早く行うと、ブラウザが一時的に固まる。
jsはシングルスレッドという話をどっかで聞いた事あるので、api通信中に入力が被ると固まるのだろうと思った(多分)

さて、どうしようと考えた結果、結局以下のやり方であっさり出来た。

WAIT_INTERVAL = 600;
timer = null;

getSuggestions = (value) => {
    // api通信して結果をsetStateする部分
};

onSuggestionsFetchRequested = ({value}) => {
    clearTimeout(this.timer);

    this.timer = setTimeout(() => {
        this.getSuggestions(value);
    }, this.WAIT_INTERVAL);
};

パクリ元

何か遠回りしたけど、簡単になったので良しとしよう。