feat: optimize useSet and useMap hooks for performance

src/useMap.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useReducer, useRef } from 'react';
 
 export interface StableActions<T extends object> {
   set: <K extends keyof T>(key: K, value: T[K]) => void;
@@ -11,37 +11,43 @@ export interface Actions<T extends object> extends StableActions<T> {
   get: <K extends keyof T>(key: K) => T[K];
 }
 
-const useMap = <T extends object = any>(initialMap: T = {} as T): [T, Actions<T>] => {
-  const [map, set] = useState<T>(initialMap);
-
-  const stableActions = useMemo<StableActions<T>>(
-    () => ({
-      set: (key, entry) => {
-        set((prevMap) => ({
-          ...prevMap,
-          [key]: entry,
-        }));
-      },
-      setAll: (newMap: T) => {
-        set(newMap);
-      },
-      remove: (key) => {
-        set((prevMap) => {
-          const { [key]: omit, ...rest } = prevMap;
-          return rest as T;
-        });
-      },
-      reset: () => set(initialMap),
-    }),
-    [set]
-  );
+const useMap = <T extends Record<string, any> = Record<string, any>>(
+  initialMap: T = {} as T
+): [T, Actions<T>] => {
+  const initialRef = useRef<T>({ ...(initialMap as any) });
+  const ref = useRef<T>({ ...(initialMap as any) });
+  const [, force] = useReducer((c: number) => c + 1, 0);
+
+  const setKey = useCallback(<K extends keyof T>(key: K, value: T[K]) => {
+    (ref.current as any)[key] = value;
+    force();
+  }, []);
+
+  const setAll = useCallback((newMap: T) => {
+    ref.current = { ...(newMap as any) };
+    force();
+  }, []);
+
+  const remove = useCallback(<K extends keyof T>(key: K) => {
+    if (key in ref.current) {
+      delete (ref.current as any)[key];
+      force();
+    }
+  }, []);
 
-  const utils = {
-    get: useCallback((key) => map[key], [map]),
-    ...stableActions,
-  } as Actions<T>;
+  const reset = useCallback(() => {
+    ref.current = { ...(initialRef.current as any) };
+    force();
+  }, []);
+
+  const get = useCallback(<K extends keyof T>(key: K): T[K] => ref.current[key], []);
+
+  const utils = useMemo<Actions<T>>(
+    () => ({ set: setKey, setAll, remove, reset, get }),
+    [setKey, setAll, remove, reset, get]
+  );
 
-  return [map, utils];
+  return [ref.current, utils];
 };
 
 export default useMap;

src/useSet.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useReducer, useRef } from 'react';
 
 export interface StableActions<K> {
   add: (key: K) => void;
@@ -12,29 +12,50 @@ export interface Actions<K> extends StableActions<K> {
   has: (key: K) => boolean;
 }
 
-const useSet = <K>(initialSet = new Set<K>()): [Set<K>, Actions<K>] => {
-  const [set, setSet] = useState(initialSet);
-
-  const stableActions = useMemo<StableActions<K>>(() => {
-    const add = (item: K) => setSet((prevSet) => new Set([...Array.from(prevSet), item]));
-    const remove = (item: K) =>
-      setSet((prevSet) => new Set(Array.from(prevSet).filter((i) => i !== item)));
-    const toggle = (item: K) =>
-      setSet((prevSet) =>
-        prevSet.has(item)
-          ? new Set(Array.from(prevSet).filter((i) => i !== item))
-          : new Set([...Array.from(prevSet), item])
-      );
-
-    return { add, remove, toggle, reset: () => setSet(initialSet), clear: () => setSet(new Set()) };
-  }, [setSet]);
-
-  const utils = {
-    has: useCallback((item) => set.has(item), [set]),
-    ...stableActions,
-  } as Actions<K>;
-
-  return [set, utils];
+const useSet = <K>(initial: Iterable<K> = []): [Set<K>, Actions<K>] => {
+  const initialSet = useMemo(() => new Set<K>(initial), []);
+  const ref = useRef<Set<K>>(new Set(initialSet));
+  const [, force] = useReducer((c: number) => c + 1, 0);
+
+  const add = useCallback((item: K) => {
+    if (!ref.current.has(item)) {
+      ref.current.add(item);
+      force();
+    }
+  }, []);
+
+  const remove = useCallback((item: K) => {
+    if (ref.current.delete(item)) {
+      force();
+    }
+  }, []);
+
+  const toggle = useCallback((item: K) => {
+    if (ref.current.has(item)) ref.current.delete(item);
+    else ref.current.add(item);
+    force();
+  }, []);
+
+  const reset = useCallback(() => {
+    ref.current = new Set(initialSet);
+    force();
+  }, [initialSet]);
+
+  const clear = useCallback(() => {
+    if (ref.current.size) {
+      ref.current.clear();
+      force();
+    }
+  }, []);
+
+  const has = useCallback((item: K) => ref.current.has(item), []);
+
+  const utils = useMemo<Actions<K>>(
+    () => ({ add, remove, toggle, reset, clear, has }),
+    [add, remove, toggle, reset, clear, has]
+  );
+
+  return [ref.current, utils];
 };
 
 export default useSet;