From 6202c4d2bb74e7c7af3c6d50da29fef2b4318a7c Mon Sep 17 00:00:00 2001
From: Tobias Fried <friedtm@gmail.com>
Date: Fri, 31 Jul 2020 19:53:12 -0400
Subject: [PATCH] useTransientState: implement hook

This utility hook provides access to a piece of state and a setter
function, which can be used to supply a temporary value and a duration
for which it is valid, before reverting to preceeding value. Following
the pattern:

const [value, setTransientValue] = useTransientValue<number>(42, 5000);
setTransientValue(69); // value === 69 for 5000ms, before returning to 42

We can easily fire and forget a temporary state transition.
---
 src/hooks/useTransientState.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/hooks/useTransientState.ts

diff --git a/src/hooks/useTransientState.ts b/src/hooks/useTransientState.ts
new file mode 100644
index 0000000..32e710b
--- /dev/null
+++ b/src/hooks/useTransientState.ts
@@ -0,0 +1,16 @@
+import { useState, useEffect } from "react";
+import { useTimeoutFn } from "react-use";
+
+export default <T>(baseState: T, duration: number): [T, (setter: T) => void] => {
+  const [value, setValue] = useState<T>(baseState);
+  const [, , restart] = useTimeoutFn(() => setValue(baseState), duration);
+
+  useEffect(() => setValue(baseState), [baseState]);
+
+  const setTransientValue = (transientValue: T): void => {
+    setValue(transientValue);
+    restart();
+  };
+
+  return [value, setTransientValue];
+};