feat: 🎸 improve useCounter interface

BREAKING CHANGE: useCounter interface changed

Author: streamich

src/__stories__/useCounter.story.tsx

@@ -4,13 +4,18 @@ import {useCounter} from '..';
 import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
-  const [value, inc, set] = useCounter();
+  const [value, {inc, dec, get, set, reset}] = useCounter(5);
 
   return (
     <div>
-      <div>{value}</div>
+      <div>{value} is {get()}</div>
       <button onClick={() => inc()}>Increment</button>
+      <button onClick={() => dec()}>Decrement</button>
+      <button onClick={() => inc(5)}>Increment (+5)</button>
+      <button onClick={() => dec(5)}>Decrement (-5)</button>
       <button onClick={() => set(100)}>Set 100</button>
+      <button onClick={() => reset()}>Reset</button>
+      <button onClick={() => reset(25)}>Reset (25)</button>
     </div>
   );
 };

src/useCounter.ts

@@ -1,12 +1,31 @@
-import {useState} from './react';
+import useGetSet from './useGetSet';
+import {useCallback} from './react';
 
-export type Increment = (inc?: number) => void;
-export type Set = (value: number) => void;
+export interface CounterActions {
+  inc: (delta?: number) => void;
+  dec: (delta?: number) => void;
+  get: () => number;
+  set: (value: number) => void;
+  reset: (value?: number) => void;
+}
 
-const useCounter = (initialValue: number = 0): [number, Increment, Set] => {
-  const [value, set] = useState<number>(initialValue);
+const useCounter = (initialValue: number = 0): [number, CounterActions] => {
+  const [get, set] = useGetSet<number>(initialValue);
+  const inc = useCallback((delta: number = 1) => set(get() + delta), []);
+  const dec = useCallback((delta: number = 1) => inc(-delta), []);
+  const reset = useCallback((value: number = initialValue) => {
+    initialValue = value;
+    set(value);
+  }, []);
+  const actions = {
+    inc,
+    dec,
+    get,
+    set,
+    reset,
+  };
 
-  return [value, (inc = 1) => set(value + inc), set];
+  return [get(), actions];
 };
 
 export default useCounter;

src/useGetSet.ts

@@ -1,15 +1,14 @@
-import {useRef} from './react';
+import {useRef, useCallback} from './react';
 import useUpdate from './useUpdate';
 
 const useGetSet = <T>(initialValue: T): [() => T, (value: T) => void] => {
-  const update = useUpdate();
   let state = useRef(initialValue);
-
-  const get = () => state.current;
-  const set = (value: T) => {
+  const update = useUpdate();
+  const get = useCallback(() => state.current, []);
+  const set = useCallback((value: T) => {
     state.current = value;
     update();
-  };
+  }, []);
 
   return [get, set];
 };