Fix excessive re-rendering due to route changesd

resources/scripts/plugins/useLocationHash.ts

@@ -0,0 +1,30 @@
+import { useLocation } from 'react-router';
+import { useMemo } from 'react';
+
+export default () => {
+    const location = useLocation();
+
+    const getHashObject = (value: string): Record<string, string> =>
+        value
+            .substring(1)
+            .split('&')
+            .reduce((obj, str) => {
+                const [ key, value = '' ] = str.split('=');
+
+                return !str.trim() ? obj : { ...obj, [key]: value };
+            }, {});
+
+    const pathTo = (params: Record<string, string>): string => {
+        const current = getHashObject(location.hash);
+
+        for (const key in params) {
+            current[key] = params[key];
+        }
+
+        return Object.keys(current).map(key => `${key}=${current[key]}`).join('&');
+    };
+
+    const hash = useMemo((): Record<string, string> => getHashObject(location.hash), [ location.hash ]);
+
+    return { hash, pathTo };
+};

resources/scripts/plugins/useUserSWRContentKey.ts

@@ -1,8 +1,14 @@
 import { useStoreState } from '@/state/hooks';
+import { useDeepCompareMemo } from '@/plugins/useDeepCompareMemo';
 
-export default (context: string | string[]) => {
-    const key = Array.isArray(context) ? context.join(':') : context;
+// eslint-disable-next-line @typescript-eslint/ban-types
+export default (context: string | string[] | (string | number | null | {})[]) => {
     const uuid = useStoreState(state => state.user.data?.uuid);
+    const key = useDeepCompareMemo((): string => {
+        return (Array.isArray(context) ? context : [ context ])
+            .map((value) => JSON.stringify(value))
+            .join(':');
+    }, [ context ]);
 
     if (!key.trim().length) {
         throw new Error('Must provide a valid context key to "useUserSWRContextKey".');