How does reaction scheduler work?

[ygnoh]

I've assigned debounce as a reaction scheduler:

  scheduler: debounce(run => run(), X ms)

I thought the run will be invoked after X ms when there are no actions.
But it doesn't work as expected. It is invoked every X ms even if there are many action in X ms. It's like throttling!

How does MobX decide to call reaction scheduler?
And I wanna debounce schedulers. How can I do that?

Thank you.

[agammann]

The reaction scheduler schedules a pending reaction; it is not called again for every change while that reaction is already pending. A debounce placed there therefore does not keep restarting its timer.

For a trailing debounce, let the reaction track each change normally and debounce its effect:

import { observable, reaction } from 'mobx';
import debounce from 'lodash/debounce.js';

const search = observable({ query: '' });
const commit = debounce(query => console.log(query), 100);
const stop = reaction(
  () => search.query,
  query => commit(query),
);

Update search.query inside your normal actions. Each changed value reaches commit, restarting the trailing timer. When disposing of this setup, call both stop() and commit.cancel() so a queued effect is also cancelled.

I checked this with MobX 6.15.0/7.0.6 and Lodash 4.17.21 using real timers: changes within the debounce interval produced one effect with the latest query, and cancellation prevented a pending effect. A separate scheduler probe confirmed that multiple changes while pending scheduled one run. See reaction scheduling.