自動保存で使う遅延関数をuseStateとsetTimeoutを使って実装する

0

2022年04月03日 4:21

ISSUEではトピックを投稿できる機能があります。
そのトピック機能では、ユーザーが入力した1秒後に自動で下書き保存する機能が備わっています。

自動保存実装時の問題点

この自動保存は onChange の中に置いてある関数をcallしていますが、
入力の度に関数を発火させるとリクエストの数がとても多くなります。

サービスのDBやインスタンスの負荷が高くなるので、
入力後しばらくしたら1回だけリクエストを飛ばすようにしたいです。

他のサービスはどうやってるか

Qiitaは、正くこの機能を実装しています。
Zennは下書き保存ボタンを押すと、保存される手動保存です。
初期はこれでもいいかなと思いましたが、そこまで実装工数がかからなさそうなことと、なるべくならUIパーツは置かない方がUXは高くなると思い自動保存を選びました。

どうやって実装したか

handleCheck関数をonChangeの中に置いて、ユーザーの入力を検知します
img

stateを用意して、setTimeoutを格納します。
格納前にclearTimeoutして、毎回リセットします。
これで、入力が続いてる限りは発火しなくなります。
draft関数が下書きをする関数です。
img

# React.js
0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。

目次を見る