From d5609d3c57f2f931526ef562259f4b7f07b23771 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Sun, 9 Aug 2020 20:54:18 -0400
Subject: [PATCH] useTransientState: set default delay (1000ms) and resolve
 retriggers

When setTransientState() triggers a new timeout, we clear any pending
timeouts to prevent stale state from being applied if a superceding
value was set in the interim.

Maybe in future we should also allow users to cancel pending transitions
directly, by returning useTimeoutFn's cancel() function along with the
state and setter.
---
 src/hooks/useTransientState.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useTransientState.ts b/src/hooks/useTransientState.ts
index 32e710b..2762596 100644
--- a/src/hooks/useTransientState.ts
+++ b/src/hooks/useTransientState.ts
@@ -1,11 +1,15 @@
+/* eslint-disable */
 import { useState, useEffect } from "react";
 import { useTimeoutFn } from "react-use";
 
-export default <T>(baseState: T, duration: number): [T, (setter: T) => void] => {
+export default <T>(baseState: T, ms: number = 1000): [T, (transientValue: T) => void] => {
   const [value, setValue] = useState<T>(baseState);
-  const [, , restart] = useTimeoutFn(() => setValue(baseState), duration);
+  const [, cancel, restart] = useTimeoutFn(() => setValue(baseState), ms);
 
-  useEffect(() => setValue(baseState), [baseState]);
+  useEffect(() => {
+    cancel();
+    setValue(baseState);
+  }, [baseState, ms]);
 
   const setTransientValue = (transientValue: T): void => {
     setValue(transientValue);