Start cleaning up the mess of useServer; make startup page update in real time

resources/scripts/plugins/useDeepCompareEffect.ts

@@ -0,0 +1,5 @@
+import { DependencyList, EffectCallback, useEffect } from 'react';
+import { useDeepMemoize } from './useDeepMemoize';
+
+export const useDeepCompareEffect = (callback: EffectCallback, dependencies: DependencyList) =>
+    useEffect(callback, useDeepMemoize(dependencies));

resources/scripts/plugins/useDeepCompareMemo.ts

@@ -0,0 +1,5 @@
+import { DependencyList, useMemo } from 'react';
+import { useDeepMemoize } from '@/plugins/useDeepMemoize';
+
+export const useDeepCompareMemo = <T> (callback: () => T, dependencies: DependencyList) =>
+    useMemo(callback, useDeepMemoize(dependencies));

resources/scripts/plugins/useDeepMemo.ts

@@ -1,12 +0,0 @@
-import { useRef } from 'react';
-import isEqual from 'react-fast-compare';
-
-export const useDeepMemo = <T, K> (fn: () => T, key: K): T => {
-    const ref = useRef<{ key: K, value: T }>();
-
-    if (!ref.current || !isEqual(key, ref.current.key)) {
-        ref.current = { key, value: fn() };
-    }
-
-    return ref.current.value;
-};

resources/scripts/plugins/useDeepMemoize.ts

@@ -0,0 +1,12 @@
+import { DependencyList, MutableRefObject, useRef } from 'react';
+import isEqual from 'react-fast-compare';
+
+export const useDeepMemoize = <T = DependencyList> (value: T): T => {
+    const ref: MutableRefObject<T | undefined> = useRef();
+
+    if (!isEqual(value, ref.current)) {
+        ref.current = value;
+    }
+
+    return ref.current as T;
+};

resources/scripts/plugins/usePermissions.ts

@@ -1,10 +1,10 @@
 import { ServerContext } from '@/state/server';
-import { useDeepMemo } from '@/plugins/useDeepMemo';
+import { useDeepCompareMemo } from '@/plugins/useDeepCompareMemo';
 
 export const usePermissions = (action: string | string[]): boolean[] => {
     const userPermissions = ServerContext.useStoreState(state => state.server.permissions);
 
-    return useDeepMemo(() => {
+    return useDeepCompareMemo(() => {
         if (userPermissions[0] === '*') {
             return Array(Array.isArray(action) ? action.length : 1).fill(true);
         }