ブログ

メモアプリなどのアプリでは、テキストエリアをリアルタイムで更新しておきたい時があります。

onChangeの度にupdateする方法もありますが、これでは無駄なupdate文が発行されてしまいます。

今回は入力後に一定時間何も入力がなかった場合にのみ更新するという仕組みを実装してみます。

「onChangeの度に更新」何が問題？

無駄なupdate文

「こんにちは」と文字を入力したい時に、

こ、こん、こんに、こんにち、こんにちは

のように5回updateがかかります。

更新までに時間がかかる

フォーム入力後に更新APIを叩くので完了するまでに時間がかかります。

更新が完了する前にブラウザを閉じてしまうとユーザーの期待した値で保存されません。

例：フォーム内では「こんにちは」と入力済み、しかしAPIの待ちもあり「こん」までしか更新されていない

「入力後に一定時間入力がなかったら保存」の実装方法

update処理のタイミングをずらしてみます。

updateの処理をsetTimeoutにし、入力後に500ms後に更新APIを叩きます。

1: setTimeoutを保持するstateを用意します。

// any許して
const [taskId, setTaskId] = React.useState<any>()

onChange毎に発火予定のupdateタスクを削除し、次のupdateタスクをセットします。

handleChange = (e) => {
  clearTimeout(taskId)
  const tId = setTimeout(() => {
    update(e.target.value).then(res=> {
      console.dir(res)
    })
  }, 500)
  setTimeoutId(tId)
}

<input onChange={handleChange} value={value}/>

入力後に500ms次の入力がなかったら、現在のフォームの値でupdateがかかる処理が完成