Add reset util to useList

docs/useList.md

@@ -8,7 +8,7 @@ React state hook that tracks a value of an array.
 import {useList} from 'react-use';
 
 const Demo = () => {
-  const [list, { clear, filter, push, remove, set, sort, updateAt }] = useList();
+  const [list, { clear, filter, push, remove, set, sort, updateAt, reset }] = useList();
 
   return (
     <div>
@@ -19,7 +19,8 @@ const Demo = () => {
       <button onClick={() => filter(item => item % 2 === 0)}>Filter even values</button>
       <button onClick={() => sort((a, b) => a - b)}>Sort ascending</button>
       <button onClick={() => sort((a, b) => b - a)}>Sort descending</button>
-      <button onClick={() => clear()}>Clear</button>
+      <button onClick={clear}>Clear</button>
+      <button onClick={reset}>Reset</button>
       <pre>{JSON.stringify(list, null, 2)}</pre>
     </div>
   );

src/__stories__/useList.story.tsx

@@ -4,7 +4,7 @@ import { useList } from '..';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
-  const [list, { clear, filter, push, remove, set, sort, updateAt }] = useList();
+  const [list, { clear, filter, push, remove, set, sort, updateAt, reset }] = useList([1, 2, 3, 4, 5]);
 
   return (
     <div>
@@ -15,7 +15,8 @@ const Demo = () => {
       <button onClick={() => filter(item => item % 2 === 0)}>Filter even values</button>
       <button onClick={() => sort((a, b) => a - b)}>Sort ascending</button>
       <button onClick={() => sort((a, b) => b - a)}>Sort descending</button>
-      <button onClick={() => clear()}>Clear</button>
+      <button onClick={clear}>Clear</button>
+      <button onClick={reset}>Reset</button>
       <pre>{JSON.stringify(list, null, 2)}</pre>
     </div>
   );

src/__tests__/useList.test.ts

@@ -16,6 +16,7 @@ it('should init list and utils', () => {
     push: expect.any(Function),
     filter: expect.any(Function),
     sort: expect.any(Function),
+    reset: expect.any(Function),
   });
 });
 
@@ -150,3 +151,43 @@ it('should sort current list by provided function', () => {
   expect(result.current[0]).toEqual(['March', 'Jan', 'Feb', 'Dec']);
   expect(result.current[0]).not.toBe(initList); // checking immutability
 });
+
+it('should reset the list to initial list provided', () => {
+  const initList = [1, 2, 3];
+  const { result } = setUp(initList);
+  const [, utils] = result.current;
+
+  act(() => {
+    utils.push(4);
+  });
+
+  expect(result.current[0]).toEqual([1, 2, 3, 4]);
+
+  act(() => {
+    utils.reset();
+  });
+
+  expect(result.current[0]).toEqual([1, 2, 3]);
+  expect(result.current[0]).not.toBe(initList); // checking immutability
+});
+
+it('should memoized its utils methods', () => {
+  const initList = [1, 2, 3];
+  const { result } = setUp(initList);
+  const [, utils] = result.current;
+  const { set, clear, updateAt, remove, push, filter, sort, reset } = utils;
+
+  act(() => {
+    push(4);
+  });
+
+  expect(result.current[1]).toBe(utils);
+  expect(result.current[1].set).toBe(set);
+  expect(result.current[1].clear).toBe(clear);
+  expect(result.current[1].updateAt).toBe(updateAt);
+  expect(result.current[1].remove).toBe(remove);
+  expect(result.current[1].push).toBe(push);
+  expect(result.current[1].filter).toBe(filter);
+  expect(result.current[1].sort).toBe(sort);
+  expect(result.current[1].reset).toBe(reset);
+});

src/useList.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 
 export interface Actions<T> {
   set: (list: T[]) => void;
@@ -8,14 +8,14 @@ export interface Actions<T> {
   push: (item: T) => void;
   filter: (fn: (value: T) => boolean) => void;
   sort: (fn?: (a: T, b: T) => number) => void;
+  reset: () => void;
 }
 
 const useList = <T>(initialList: T[] = []): [T[], Actions<T>] => {
   const [list, set] = useState<T[]>(initialList);
 
-  return [
-    list,
-    {
+  const utils = useMemo<Actions<T>>(
+    () => ({
       set,
       clear: () => set([]),
       updateAt: (index, entry) =>
@@ -24,8 +24,12 @@ const useList = <T>(initialList: T[] = []): [T[], Actions<T>] => {
       push: entry => set(currentList => [...currentList, entry]),
       filter: fn => set(currentList => currentList.filter(fn)),
       sort: (fn?) => set(currentList => [...currentList].sort(fn)),
-    },
-  ];
+      reset: () => set([...initialList]),
+    }),
+    [set]
+  );
+
+  return [list, utils];
 };
 
 export default useList;