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


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

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

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

# どうやって実装したか

handleCheck関数をonChangeの中に置いて、ユーザーの入力を検知します
![img](/mosaic-code.jpg)

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

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


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

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

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

# どうやって実装したか

handleCheck関数をonChangeの中に置いて、ユーザーの入力を検知します
```js
<TextField
  error={!!errors.title}
  fullWidth
  variant="outlined"
  helperText={errors.title?.message}
  {...field}
  onChange={(e) => {
    field.onChange(e)
    handleCheck()
   }}
 />
```

stateを用意して、setTimeoutを格納します。
格納前にclearTimeoutして、毎回リセットします。
これで、入力が続いてる限りは発火しなくなります。
draft関数が下書きをする関数です。
```js
const [draftTimer, setDraftTimer] = useState(null)
const handleCheck = () => {
  clearTimeout(draftTimer)
  setDraftTimer(
    setTimeout(() => {
      draft()
    }, 1000),
  }
}
```

自動保存実装時の問題点

続きを読むには単価診断を受けてください 30秒