fix: Performance degredation when multiple tabs are open

app/hooks/usePersistedState.ts

@@ -4,18 +4,25 @@ import Logger from "~/utils/Logger";
 import Storage from "~/utils/Storage";
 import useEventListener from "./useEventListener";
 
+type Options = {
+  /* Whether to listen and react to changes in the value from other tabs */
+  listen?: boolean;
+};
+
 /**
  * A hook with the same API as `useState` that persists its value locally and
  * syncs the value between browser tabs.
  *
  * @param key Key to store value under
  * @param defaultValue An optional default value if no key exists
+ * @param options Options for the hook
  * @returns Tuple of the current value and a function to update it
  */
-export default function usePersistedState(
+export default function usePersistedState<T extends Primitive>(
   key: string,
-  defaultValue: Primitive
-): [Primitive, (value: Primitive) => void] {
+  defaultValue: T,
+  options?: Options
+): [T, (value: T) => void] {
   const [storedValue, setStoredValue] = React.useState(() => {
     if (typeof window === "undefined") {
       return defaultValue;
@@ -24,7 +31,7 @@ export default function usePersistedState(
   });
 
   const setValue = React.useCallback(
-    (value: Primitive | ((value: Primitive) => void)) => {
+    (value: T | ((value: T) => void)) => {
       try {
         // Allow value to be a function so we have same API as useState
         const valueToStore =
@@ -42,7 +49,7 @@ export default function usePersistedState(
 
   // Listen to the key changing in other tabs so we can keep UI in sync
   useEventListener("storage", (event: StorageEvent) => {
-    if (event.key === key && event.newValue) {
+    if (options?.listen && event.key === key && event.newValue) {
       setStoredValue(JSON.parse(event.newValue));
     }
   });