debounce-vs-concurrent.ts

// BASE

// debounce
const onChange = debounce((ctx, event) => {
  inputAtom(ctx, event.currentTarget.value);
}, 500);

// concurrent
const onChange = concurrent(async (ctx, event) => {
  await ctx.schedule(() => sleep(500));
  inputAtom(ctx, event.currentTarget.value);
});

// PREPARATION MAPPING

// debounce
const handleChange = debounce((ctx, value) => {
  inputAtom(ctx, value);
}, 500);
const onChange = (ctx, event) => {
  handleChange(ctx, event.currentTarget.value);
};

// concurrent
const onChange = concurrent(async (ctx, event) => {
  const { value } = event.currentTarget;
  await ctx.schedule(() => sleep(500));
  inputAtom(ctx, value);
});

// CONDITIONS

// debounce
const handleChange = (ctx, value) => {
  inputAtom(ctx, value);
};
const handleDebounceChange = debounce(handleChange, 500);
const onChange = (ctx, event) => {
  const { value } = event.currentTarget;
  if (Math.random() > 0.5) handleChange(ctx, value);
  else handleDebounceChange(ctx, value);
};

// concurrent
const onChange = concurrent(async (ctx, event) => {
  const { value } = event.currentTarget;
  if (Math.random() > 0.5) await ctx.schedule(() => sleep(500));
  inputAtom(ctx, value);
});