fix: Performance degredation when multiple tabs are open

app/components/Sidebar/components/Header.tsx

@@ -14,7 +14,7 @@ type Props = {
  */
 export const Header: React.FC<Props> = ({ id, title, children }) => {
   const [firstRender, setFirstRender] = React.useState(true);
-  const [expanded, setExpanded] = usePersistedState(
+  const [expanded, setExpanded] = usePersistedState<boolean>(
     `sidebar-header-${id}`,
     true
   );

app/hooks/useLastVisitedPath.tsx

@@ -1,10 +1,17 @@
 import * as React from "react";
 import usePersistedState from "~/hooks/usePersistedState";
 
-export default function useLastVisitedPath() {
+/**
-  const [lastVisitedPath, setLastVisitedPath] = usePersistedState(
+ * Hook to set locally and return the path that the user last visited. This is
+ * used to redirect the user back to the last page they were on if preferred.
+ *
+ * @returns A tuple of the last visited path and a method to set it.
+ */
+export default function useLastVisitedPath(): [string, (path: string) => void] {
+  const [lastVisitedPath, setLastVisitedPath] = usePersistedState<string>(
     "lastVisitedPath",
-    "/"
+    "/",
+    { listen: false }
   );
 
   const setPathAsLastVisitedPath = React.useCallback(

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
+  defaultValue: T,
-): [Primitive, (value: Primitive) => void] {
+  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));
     }
   });