How do you go about throttling an effect?

[growthwp]

Hey,

Thanks a lot for the nice library. I was wondering how one would go about throttling an effect (onSet). I'm updating a value very frequently and I'd like it logged. For simplicity's sake, assume this was a progressbar being dragged. I'd like to eventually store that value, but, if the user keeps dragging it for 5s straight, I should still only fire a logSomething function once, not hundreds/thousands of times. There are multiple ways to tackle. Plenty of libraries too. However, when trying to use lodash's throttle (together with memoize), it fails. I am not privy to how/when effects are ran and their bindings.

atom({
  key,
  default: value,
  effects: [
    ({ onSet }) => {
      onSet((newValue) => {
      //Run a debouced function here.
      });
    }
  ]
}),

Any ideas? Appreciate it.

[drarmstr]

It should be reasonable to debounce a callback provided to onSet() or a function called from such a callback.

[growthwp]

Well, this is the exact code I had and it doesn't work, perhaps it's an issue on my end, not Recoil's:

onSet((newValue) => {
  const handler = memoize(debounce(dispatchStuff, 1500));

  handler(dispatch, newValue);

  return () => {
    handler.cancel();
  };
});

Where dispatchStuff is simply just a function. It doesn't work. Am I missing something?

[drarmstr]

That won't work because you are creating a new memoized function on each callback invocation. Create your memoized handler at the module scope and then just call it from the onSet() callback handler.

[growthwp]

(Just to reiterate: my goal is to take a value that's changed and log it somewhere every 1.5s, because this value updates very frequently and there's no reason to log it dozens of times per second)

Sorry, I posted an older snippet after trying to fiddle with it and was thinking of something else. Here's exactly what I have: https://codesandbox.io/s/magical-wildflower-dgne6j?file=/src/fastMap.ts:424-472

The issue is that memoize clearly memoizes based on the value I provide. It will ALWAYS rebuild the function. With this in mind, given dispatchStuff needs to have the latest value at the time it's firing, this is not an issue of building a memoized function, but rather, one of when this function is called. The function doesn't need to be memoized. All I need is for this function to fire 1.5 after the value's changed in a debounce-y fashion.

I understand the processes involved, I just don't know exactly when to call dispatchStuff in the context of Recoil.

Hope that clears it up a bit. Sorry, I didn't explain it as well as I could.

[drarmstr]

The sandbox still doesn't look what I would expect.. You're memoizing the debouce function per input value. So, you would be getting a different debouncer for each input. It's also still generating a new debouncer with each onSet() call so it's not actually debouncing anything.

See this edit: https://codesandbox.io/s/hidden-field-bhpxt4?file=/src/fastMap.ts