Add useSet

Author: pblazh

README-ARRAY.md

@@ -66,7 +66,7 @@ const [[newTodo], actions] = useInput("");
 ```jsx
 <input value={newTodo} onChange={actions.onChange} />
 ```
-Actions:
+UseSetActions:
 
 - `clear`
 - `onChange` - default native event.target.value handler
@@ -91,7 +91,7 @@ const [[newTodo], actions, { nativeBind, valueBind }] = useBindToInput(useInput(
 <Slider {...valueBind} />
 ```
 
-Actions:
+UseSetActions:
 
 - `nativeBind` - binds the `value` and `onChange` props to an input that has `e.target.value`
 - `valueBind` - binds the `value` and `onChange` props to an input that's using only `value` in `onChange` (like most external components)
@@ -102,7 +102,7 @@ Actions:
 const [todos, actions] = useArray([]);
 ```
 
-Actions:
+UseSetActions:
 
 - `push`
 - `unshift`
@@ -139,7 +139,21 @@ Actions:
 - `clear`
 - `initialize` - applies tuples or map instances
 - `setValue`
- 
+
+### useSet
+
+```jsx
+const [ value, actions ] = useSet(new Set<number>([1, 2]))
+```
+
+`value` - a Set with only non mutating methods of a plain JS Set
+
+Actions:
+
+- `setValue`
+- `add`
+- `remove`
+- `clear`
 
 ## useSetState
 
@@ -221,4 +235,4 @@ const [[value, hasValue], actions, { eventBind, valueBind }] = useBindToInput(us
 ```
 
 Note that first element in destructured array has tuple of `[value, hasValue]` since it's for values
-and second argument is for `actions` e.g. only for functions.
+and second argument is for `actions` e.g. only for functions.

README.md

@@ -216,6 +216,12 @@ Actions:
 - `initialize` - applies tuples or map instances
 - `setValue`
 
+### useSet
+
+```jsx
+const set = useSet(new Set<number>([1, 2]));
+```
+
 ### useSetState
 
 ```jsx

src/array/index.test.ts

@@ -7,6 +7,7 @@ import { useInput } from './useInput';
 import { useBindToInput } from './useBindToInput';
 import { useSetState } from './useSetState';
 import { useMap } from './useMap';
+import { useSet } from './useSet';
 
 afterEach(cleanup);
 describe('useNumber array', () => {
@@ -407,6 +408,76 @@ describe('useBoolean array', () => {
   });
 });
 
+describe('useSet array', () => {
+  const initial = new Set([1, 2, 3]);
+
+  it('should update old value', () => {
+    // given
+    const { result } = renderHook(() => useSet<number>(initial));
+    const [value, { setValue }] = result.current;
+
+    expect(value).toEqual(initial);
+    // when
+    act(() => setValue(new Set([2])));
+    // then
+    expect(result.current[0]).toEqual(new Set([2]));
+  });
+
+  it('should add new value', () => {
+    // given
+    const { result } = renderHook(() => useSet<number>(initial));
+    const [, { add }] = result.current;
+    // when
+    act(() => add(4));
+    // then
+    expect(result.current[0]).toEqual(new Set([1, 2, 3, 4]));
+  });
+
+  it('should remove a value', () => {
+    // given
+    const { result } = renderHook(() => useSet<number>(initial));
+    const [, { remove }] = result.current;
+    // when
+    act(() => remove(2));
+    // then
+    expect(result.current[0]).toEqual(new Set([1, 3]));
+  });
+
+  it('should clear', () => {
+    // given
+    const { result } = renderHook(() => useSet<number>(initial));
+    const [, { clear }] = result.current;
+    // when
+    act(() => clear());
+    // then
+    expect(result.current[0]).toEqual(new Set());
+  });
+
+  describe('hooks optimizations', () => {
+    it('should change value reference equality after change', () => {
+      // given
+      const { result } = renderHook(() => useSet<number>(initial));
+      const [originalValueReference, actions] = result.current;
+      expect(result.current[0]).toBe(originalValueReference);
+      // when
+      act(() => actions.setValue(new Set([1])));
+      // then
+      expect(originalValueReference).not.toBe(result.current[0]);
+    });
+
+    it('should keep actions reference equality after value change', () => {
+      // given
+      const { result } = renderHook(() => useSet<number>(initial));
+      const [, originalActionsReference] = result.current;
+      expect(result.current[1]).toBe(originalActionsReference);
+      // when
+      act(() => originalActionsReference.setValue(new Set([1])));
+      // then
+      expect(originalActionsReference).toBe(result.current[1]);
+    });
+  });
+});
+
 describe('useMap array', () => {
   describe('set', () => {
     it('should update old value', () => {

src/array/index.ts

@@ -1,7 +1,8 @@
-export { useBindToInput, UseBindToInput, BindToInput } from './useBindToInput';
 export { useArray, UseArray, UseArrayActions } from './useArray';
+export { useBindToInput, UseBindToInput, BindToInput } from './useBindToInput';
 export { useBoolean, UseBoolean, UseBooleanActions } from './useBoolean';
 export { useInput, UseInput, UseInputActions } from './useInput';
 export { useMap, UseMap, MapOrEntries, UseMapActions, UseMapFunctions } from './useMap';
 export { useNumber, UseNumber, UseNumberActions } from './useNumber';
+export { useSet, UseSet, UseSetActions } from './useSet';
 export { useSetState, UseSetState, UseSetStateAction } from './useSetState';

src/array/useSet.ts

@@ -0,0 +1,51 @@
+import { Dispatch, SetStateAction, useCallback, useMemo, useState } from 'react';
+
+export type UseSetActions<T> = {
+  setValue: Dispatch<SetStateAction<Set<T>>>;
+  add: (a: T) => void;
+  remove: (a: T) => void;
+  clear: Set<T>['clear'];
+};
+
+export type UseSet<T> = [Set<T>, UseSetActions<T>];
+
+const clone = <T>(value: Set<T>) => new Set<T>(value);
+
+export function useSet<T>(initialState: Set<T> = new Set()): UseSet<T> {
+  const [value, setValue] = useState(initialState);
+  const add = useCallback((item: T) => {
+    setValue((prevValue) => {
+      const copy = clone(prevValue);
+      copy.add(item);
+      return copy;
+    });
+  }, []);
+
+  const remove = useCallback((item: T) => {
+    setValue((prevValue) => {
+      const copy = clone(prevValue);
+      copy.delete(item);
+      return copy;
+    });
+  }, []);
+
+  const clear = useCallback(() => {
+    setValue((prevValue) => {
+      const copy = clone(prevValue);
+      copy.clear();
+      return copy;
+    });
+  }, []);
+
+  const actions: UseSetActions<T> = useMemo(
+    () => ({
+      setValue,
+      add,
+      remove,
+      clear,
+    }),
+    [add, clear, remove],
+  );
+
+  return useMemo(() => [value, actions], [value, actions]);
+}

src/index.test.ts

@@ -7,6 +7,7 @@ import { useBoolean } from './useBoolean';
 import { useInput } from './useInput';
 import { useSetState } from './useSetState';
 import { useMap } from './useMap';
+import { useSet } from './useSet';
 
 afterEach(cleanup);
 describe('useStateful', () => {
@@ -370,6 +371,33 @@ describe('useBoolean', () => {
   });
 });
 
+describe('useSet', () => {
+  const initial = new Set([1, 2, 3]);
+
+  describe('hooks optimizations', () => {
+    it('should change value reference equality after change', () => {
+      // given
+      const { result } = renderHook(() => useSet<number>());
+      const value = result.current;
+      // when
+      act(() => value.setValue(initial));
+      // then
+      expect(value).not.toBe(result.current);
+    });
+
+    it('should keep actions reference equality after value change', () => {
+      // given
+      const { result } = renderHook(() => useSet<number>());
+      const { setValue } = result.current;
+      expect(result.current.setValue).toBe(setValue);
+      // when
+      act(() => setValue(new Set([1, 1])));
+      // then
+      expect(setValue).toBe(result.current.setValue);
+    });
+  });
+});
+
 describe('useMap', () => {
   describe('set', () => {
     it('should update old value', () => {

src/index.ts

@@ -1,21 +1,22 @@
+export { ClickOutsideOptions, useOnClickOutside } from './useClickOutside';
 export { useArray, UseArray } from './useArray';
 export { useBoolean, UseBoolean } from './useBoolean';
+export { useDelay } from './useDelay';
+export { useDocumentReady } from './useDocumentReady';
+export { useFocus } from './useFocus';
+export { useGoogleAnalytics, UseGoogleAnalyticsProps } from './useGoogleAnalytics';
+export { useImage } from './useImage';
 export { useInput, UseInput } from './useInput';
 export { useLogger } from './useLogger';
 export { useMap, UseMap, MapOrEntries } from './useMap';
 export { useNumber, UseNumber } from './useNumber';
+export { useOnClick } from './useOnClick';
+export { usePageLoad } from './usePageLoad';
+export { usePersist } from './usePersist';
 export { usePrevious } from './usePrevious';
+export { UseScript, useScript, UseScriptProps } from './useScript';
+export { useSet, UseSet } from './useSet';
 export { useSetState, UseSetState, UseSetStateAction } from './useSetState';
 export { useStateful, UseStateful } from './useStateful';
-export { usePageLoad } from './usePageLoad';
-export { UseScript, useScript, UseScriptProps } from './useScript';
-export { useDocumentReady } from './useDocumentReady';
-export { useGoogleAnalytics, UseGoogleAnalyticsProps } from './useGoogleAnalytics';
-export { useWindowSize } from './useWindowSize';
-export { useDelay } from './useDelay';
-export { usePersist } from './usePersist';
 export { useToggleBodyClass } from './useToggleBodyClass';
-export { useOnClick } from './useOnClick';
-export { ClickOutsideOptions, useOnClickOutside } from './useClickOutside';
-export { useFocus } from './useFocus';
-export { useImage } from './useImage';
+export { useWindowSize } from './useWindowSize';

src/useSet.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import { useSet as useSetArray, UseSetActions } from './array/useSet';
+import type { UseStateful } from './useStateful';
+
+export interface UseSet<T> extends UseStateful<Set<T>>, UseSetActions<T> {}
+
+export function useSet<T>(initialState: Set<T> = new Set()): UseSet<T> {
+  const [value, actions] = useSetArray(initialState);
+
+  return useMemo(() => {
+    return {
+      value,
+      ...actions,
+    };
+  }, [actions, value]);
+}