How to create a derived atom with a delayed update

[siderakis]

I'm trying to create a function that returns a derived atom that has the following behavior

• is true when the input atom is true (immediately)
• is false when the input atom is false (after a 500ms delay)
• setting true should cancel any pending timers to set it to false

I'm thinking the syntax could be:

  const inputAtom = atom(false);
  const delayedFalseAtom = delayedFalse(inputAtom);

It seems like it can be done very simply but I still need to wrap my head around some things, any tips would be appreciated. Thanks

Also something like this could be useful in the utils, especially if it can be generalized.

Generalized delayed updater

  const inputAtom = atom(false);
  const onlyDelayFalse = (newValue) => newValue === false ? 500 : 0
  const delayedAtom = delayedSet(inputAtom, onlyDelayFalse);

where delayedSet takes in the inputAtom and a function that determines the delay for any new value.

[dai-shi]

setting true should cancel any pending timers to set it to false

It's an imperative action, so it's basically impossible to do it in a declarative way.

It's tricky, but one idea would be something like this:

const inputAtom = atom(false);
const internalAtom = atom((get) => {
  const input = get(inputAtom);
  let value = true;
  let cancel = () => {};
  if (input === false) {
    value = new Promise((resolve) => {
      cancel = () => resolve(false);
      setTimeout(() => resolve(false), 500);
    });
  }
  return { value, cancel }
});
const outputAtom = atom(
  (get) => get(internalAtom).value,
  (get) => get(internalAtom).cancel()
);

[siderakis]

Thanks for the starter code!

What does the last line (get) => get(internalAtom).cancel() do?

I couldn't get it working in my app and I suspect it's because of the Promise/suspense.

Can the changing input trigger a delayed update without using a Promise? I don't see a way to call set that is triggered from a changing input.

function useDelayedUpdater(inputAtom, outputAtom) {
  const input = useAtomValue(inputAtom);
  const [output, setOutput] = useAtom(outputAtom);
  let timeoutId;
  useEffect(()=>{
    if(input){
      setOutput(true);
      timeoutId  && clearTimeout(timeoutId);
      timeoutId = undefined;
    } else {
      timeoutId  = setTimeout(() => {
          setOutput(false), 500);
          timeoutId = undefined;
      }
    }
  }, [input]);
  return [output, setInput];
}

Something like this seems to work. Is there a downside of wiring together atoms like this?

Thanks again for the help!

[dai-shi]

What does the last line (get) => get(internalAtom).cancel() do?

That's the write function.

I think I misunderstood "setting true should cancel any pending timers to set it to false".

You mean, setting true to inputAtom, right?

I couldn't get it working in my app and I suspect it's because of the Promise/suspense.

Oh, I thought you wanted suspense.

Here's another trial:

const internalAtom = atom({ value: false, timer: undefined });
const outputAtom = atom(false);
const inputAtom = atom(
  (get) => get(internalAtom).value,
  (get, set, newValue) => {
    const prev = get(internalAtom);
    let timer = undefined;
    clearTimeout(prev.timer);
    if (newValue === true) {
      set(outputAtom, true);
    } else {
      timer = setTimeout(() => {
        set(outputAtom, false);
      }, 500);
    }
    set(internalAtom, { value: newValue, timer });
  }
);

It may look tricky, but it's valid. No downsides.

Something like this seems to work. Is there a downside of wiring together atoms like this?

You could use a hook, but it's very unfortunate because it's outside of atom model.

[siderakis]

That makes sense and will work for my use case, thanks!

In my case inputAtom is a derived atom so I'll have to update the parent, right? No problem, since it's just one level higher, but in general it might be tricky.