【Mobx】scheduler と delay の違い

MobXにおける scheduler と delay の違いついて調べたメモ

mobx.js.org

MobXは、リアクティブな状態管理の更新スケジューリングに scheduler と delay という2つのオプションが存在する

どちらも状態の更新タイミングに関与しますが、それぞれ異なる動作を持つ

その違いを調べた

scheduler

概要

scheduler は、副作用（reaction、autorun など）が実行されるタイミングをカスタマイズするためのオプション

使い方

reaction や autorun などの MobX のリアクティブシステムを制御するときに scheduler を指定することで、更新のスケジューリング方法を変更できる

import { observable, autorun } from "mobx";

const state = observable({ count: 0 });

autorun(() => {
  console.log("Count updated:", state.count);
}, {
  scheduler: (run) => setTimeout(run, 1000) // 1秒後に実行
});

state.count++; // すぐに更新されるが、ログは1秒遅れる

特徴

• scheduler を指定すると、副作用の実行タイミングを変更できる
• setTimeout や requestAnimationFrame などを活用して、非同期に処理をスケジューリング可能
• デフォルトでは MobX 内部で同期的に副作用が実行されるが、scheduler を使うと非同期的に制御できる

delay

概要

delay は、MobX の reaction において変更検知後に一定時間待ってから副作用を実行するオプション

使い方

reaction を使う際に、delay を指定すると、変更後に一定時間経過してから処理が実行される

import { observable, reaction } from "mobx";

const state = observable({ count: 0 });

reaction(
  () => state.count,
  (count) => {
    console.log("Count changed:", count);
  },
  {
    delay: 500 // 500ms 後に実行
  }
);

state.count++; // 変更後500ms経過してからログが出力される

特徴

• delay を指定すると、値が変更された後に一定時間待ってから処理を実行する
• debounce のような動作を実現できる
• 連続した変更が発生した場合、最後の変更のみが反映される

scheduler と delay の違い

オプション	目的	動作	主な用途
scheduler	スケジューリング	更新のたびに指定の関数を使って処理をスケジュール	非同期処理、カスタムスケジューリング
delay	遅延実行	変更後に一定時間経過してから処理を実行	デバウンス、連続イベントの抑制

scheduler と delay の使い分け

scheduler を使うべきケース

• 非同期で副作用を制御したい場合
• 特定のスケジューリング方法（requestAnimationFrame など）を適用したい場合
• カスタムなタスクキュー処理を行いたい場合

scheduler: (run) => requestAnimationFrame(run) // アニメーションフレームごとに実行

delay を使うべきケース

• 頻繁に発生する状態変更をまとめたい場合（デバウンス）
• 検索ボックスや入力フォームの値の変更を最適化したい場合
• 最後の変更のみを処理したい場合

delay: 300 // 300ms 後に最後の変更を反映