refactoring: use array versions in object versions to reduce bundle size.

Author: RIP21

package.json

@@ -37,19 +37,20 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@types/jest": "^24.0.11",
-    "@types/react": "^16.8.13",
+    "@types/jest": "^24.0.15",
+    "@types/react": "^16.8.23",
     "cross-env": "^5.2.0",
     "gh-pages": "^1.2.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-hooks-testing-library": "^0.4.0",
-    "react-testing-library": "^6.1.2",
+    "@testing-library/react": "^8.0.5",
+    "@testing-library/react-hooks": "^1.1.0",
+    "react-test-renderer": "^16.8.6",
     "rimraf": "^2.6.3",
-    "typescript": "^3.4.2",
-    "jest": "^24.5.0",
+    "typescript": "^3.5.3",
+    "jest": "^24.8.0",
     "ts-jest": "^24.0.2",
-    "babel-eslint": "10.0.1",
+    "babel-eslint": "10.0.2",
     "@typescript-eslint/parser": "1.5.0",
     "@typescript-eslint/eslint-plugin": "1.5.0",
     "eslint-plugin-react-hooks": "1.5.1",
@@ -64,7 +65,7 @@
     "eslint-plugin-react": "7.12.4",
     "eslint-config-react-app": "3.0.8",
     "eslint-config-revolut-react": "0.0.22",
-    "prettier": "1.17.0"
+    "prettier": "1.18.2"
   },
   "favoriteScripts": [
     "test:watch"

src/array/index.test.ts

@@ -1,4 +1,5 @@
-import { renderHook, cleanup, act } from 'react-hooks-testing-library';
+import { renderHook, act } from '@testing-library/react-hooks';
+import { cleanup } from '@testing-library/react';
 import { useNumber } from './useNumber';
 import { useArray } from './useArray';
 import { useBoolean } from './useBoolean';

src/array/useArray.ts

@@ -42,6 +42,7 @@ export function useArray<T = any>(initial: T[]): UseArray<T> {
     () => ({
       setValue,
       add,
+      push: add,
       move,
       clear,
       removeById,

src/array/useInput.ts

@@ -2,7 +2,7 @@ import { default as React, SetStateAction, useCallback, useMemo, useState } from
 
 export type UseInputActions = {
   setValue: React.Dispatch<SetStateAction<string>>;
-  onChange: (e: React.SyntheticEvent) => void;
+  onChange: (e: React.BaseSyntheticEvent) => void;
   clear: () => void;
 };
 export type UseInput = [[string, boolean], UseInputActions];

src/array/useMap.ts

@@ -41,7 +41,9 @@ export function useMap<K, V>(initialState: MapOrEntries<K, V> = new Map()): UseM
       setValue: setMap,
       clear,
       set,
+      // TODO: To be removed in the next major release
       remove: deleteByKey,
+      delete: deleteByKey,
       initialize,
     }),
     [clear, deleteByKey, initialize, set],

src/index.test.ts

@@ -1,4 +1,5 @@
-import { renderHook, cleanup, act } from 'react-hooks-testing-library';
+import { renderHook, act } from '@testing-library/react-hooks';
+import { cleanup } from '@testing-library/react';
 import { useStateful } from './useStateful';
 import { useNumber } from './useNumber';
 import { useArray } from './useArray';

src/useArray.ts

@@ -1,5 +1,6 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { UseStateful } from './useStateful';
+import useArrayArray from './array/useArray';
 
 export type UseArray<T> = UseStateful<T[]> & {
   add: (value: T) => void;
@@ -10,43 +11,13 @@ export type UseArray<T> = UseStateful<T[]> & {
 };
 
 export function useArray<T = any>(initial: T[]): UseArray<T> {
-  const [value, setValue] = useState(initial);
-  const add = useCallback(a => setValue(v => [...v, a]), []);
-  const move = useCallback(
-    (from: number, to: number) =>
-      setValue(it => {
-        const copy = it.slice();
-        copy.splice(to < 0 ? copy.length + to : to, 0, copy.splice(from, 1)[0]);
-        return copy;
-      }),
-    [],
-  );
-  const clear = useCallback(() => setValue(() => []), []);
-  const removeById = useCallback(
-    // @ts-ignore not every array that you will pass down will have object with id field.
-    id => setValue(arr => arr.filter(v => v && v.id !== id)),
-    [],
-  );
-  const removeIndex = useCallback(
-    index =>
-      setValue(v => {
-        const copy = v.slice();
-        copy.splice(index, 1);
-        return copy;
-      }),
-    [],
-  );
+  const [value, actions] = useArrayArray(initial);
   return useMemo(
     () => ({
       value,
-      setValue,
-      add,
-      move,
-      clear,
-      removeById,
-      removeIndex,
+      ...actions,
     }),
-    [add, clear, move, removeById, removeIndex, value],
+    [actions, value],
   );
 }
 

src/useBoolean.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { SetStateAction, useCallback, useMemo, useState } from 'react';
+import { SetStateAction, useMemo } from 'react';
+import useBooleanArray from './array/useBoolean';
 
 export type UseBoolean = {
   value: boolean;
@@ -10,19 +11,13 @@ export type UseBoolean = {
 };
 
 export function useBoolean(initial: boolean): UseBoolean {
-  const [value, setValue] = useState<boolean>(initial);
-  const toggle = useCallback(() => setValue(v => !v), []);
-  const setTrue = useCallback(() => setValue(true), []);
-  const setFalse = useCallback(() => setValue(false), []);
+  const [value, actions] = useBooleanArray(initial);
   return useMemo(
     () => ({
       value,
-      setValue,
-      toggle,
-      setTrue,
-      setFalse,
+      ...actions,
     }),
-    [setFalse, setTrue, toggle, value],
+    [actions, value],
   );
 }
 

src/useInput.ts

@@ -3,11 +3,11 @@ import { useCallback, useMemo, useState } from 'react';
 import { UseStateful } from './useStateful';
 
 export type UseInput = UseStateful<string> & {
-  onChange: (e: React.SyntheticEvent) => void;
+  onChange: (e: React.BaseSyntheticEvent) => void;
   hasValue: boolean;
   clear: () => void;
   eventBind: {
-    onChange: (e: React.SyntheticEvent) => void;
+    onChange: (e: React.BaseSyntheticEvent) => void;
     value: string;
   };
   valueBind: {

src/useMap.ts

@@ -1,5 +1,6 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { UseStateful } from './useStateful';
+import useMapArray from './array/useMap';
 
 export type MapOrEntries<K, V> = Map<K, V> | [K, V][];
 export type UseMap<K, V> = UseStateful<Map<K, V>> & {
@@ -10,41 +11,13 @@ export type UseMap<K, V> = UseStateful<Map<K, V>> & {
 };
 
 export function useMap<K, V>(initialState: MapOrEntries<K, V> = new Map()): UseMap<K, V> {
-  const [map, setMap] = useState(Array.isArray(initialState) ? new Map(initialState) : initialState);
-
-  const set = useCallback((key, value) => {
-    setMap(aMap => {
-      const copy = new Map(aMap);
-      return copy.set(key, value);
-    });
-  }, []);
-
-  const deleteByKey = useCallback(key => {
-    setMap(_map => {
-      const copy = new Map(_map);
-      copy.delete(key);
-      return copy;
-    });
-  }, []);
-
-  const clear = useCallback(() => {
-    setMap(() => new Map());
-  }, []);
-
-  const initialize = useCallback((mapOrTuple: MapOrEntries<K, V> = []) => {
-    setMap(() => new Map(mapOrTuple));
-  }, []);
-
+  const [map, actions] = useMapArray(initialState);
   return useMemo(
     () => ({
       value: map,
-      setValue: setMap,
-      clear,
-      set,
-      remove: deleteByKey,
-      initialize,
+      ...actions,
     }),
-    [clear, deleteByKey, initialize, map, set],
+    [actions, map],
   );
 }