memoized dispatch

Author: quisido

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-force-update",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "author": "Charles Stover <use-force-update@charlesstover.com>",
   "bugs": {
     "email" : "use-force-update@charlesstover.com",

src/use-force-update.ts

@@ -1,14 +1,21 @@
-import { useReducer } from 'react';
+import { useMemo, useReducer } from 'react';
 
 type VoidFunction = () => void;
-type VoidFunctionCreator = () => VoidFunction;
-type ToggleReducer = (state: boolean, action: void) => boolean;
 
-const reducer: ToggleReducer = state => !state;
+const reducer = (state: boolean, _action: null): boolean => !state;
 
-const useForceUpdate: VoidFunctionCreator = () => {
-  const [, dispatch] = useReducer(reducer, true);
-  return dispatch as VoidFunction;
+const useForceUpdate = (): VoidFunction => {
+  const [ , dispatch] = useReducer<boolean, null>(reducer, true);
+
+  // Turn dispatch(required_parameter) into dispatch().
+  const memoizedDispatch = useMemo(
+    (): VoidFunction =>
+      (): void => {
+        dispatch(null);
+      },
+    [ dispatch ]
+  );
+  return memoizedDispatch;
 };
 
 export default useForceUpdate;

tests/use-force-update.spec.tsx

@@ -1,40 +1,57 @@
 import { expect } from 'chai';
 import * as React from 'react';
 import * as TestRenderer from 'react-test-renderer';
-import useForceUpdate from '../src/use-force-update';
+import useForceUpdate from '../use-force-update';
+
+type VoidFunction = () => void;
 
 describe('useForceUpdate', () => {
-  let forceUpdate: () => void;
+  const forceUpdates: VoidFunction[] = [];
   let renders: number;
-  let TestComponent: React.FunctionComponent<{}>;
+  let TestComponent: React.FunctionComponent<{}> = () => null;
 
   beforeEach(() => {
 
+    // Reset array of forceUpdate functions.
+    forceUpdates.splice(0, forceUpdates.length);
+
     // Reset render count.
     renders = 0;
 
     // Create the component.
     // This creates a new forceUpdate hook for each test.
     TestComponent = () => {
-      forceUpdate = useForceUpdate();
+      forceUpdates.push(useForceUpdate());
       renders++;
       return null;
     };
 
   });
 
-  it('should update a component', () => {
+  it('should accept no parameters', () => {
+    TestRenderer.create(<TestComponent />);
+    expect(forceUpdates[0].length).to.equal(0);
+  });
+
+  it('should maintain the same reference', () => {
+    TestRenderer.create(<TestComponent />);
+    forceUpdates[0]();
+    expect(forceUpdates[0]).to.equal(forceUpdates[1]);
+  });
+
+  it('should return undefined', () => {
+    TestRenderer.create(<TestComponent />);
+    expect(forceUpdates[0]()).to.be.undefined;
+  });
+
+  it('should update the component', () => {
     expect(renders).to.equal(0);
     TestRenderer.create(<TestComponent />);
     expect(renders).to.equal(1);
-    forceUpdate();
+    forceUpdates[0]();
     expect(renders).to.equal(2);
-  });
-
-  it('update function should return undefined', () => {
-    expect(forceUpdate()).to.be.undefined;
-    // @ts-ignore test with parameters :shrug:
-    expect(forceUpdate('anything')).to.be.undefined;
+    forceUpdates[1]();
+    expect(renders).to.equal(3);
   });
 
 });