Provides a stable send method. Closes #12 (#18)

* Provides a stable send method

* Fix linter & lint

.eslintrc.js

@@ -1,6 +1,8 @@
 module.exports = {
-  plugins: ['react-hooks'],
-  rules: {
-    'react-hooks/exhaustive-deps': 'warn',
+  extends: ['react-app', 'prettier/@typescript-eslint', 'plugin:prettier/recommended'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
   },
 };

package.json

@@ -30,7 +30,7 @@
     "@size-limit/preset-small-lib": "^4.10.1",
     "@testing-library/react-hooks": "^5.1.0",
     "@types/react": "^17.0.3",
-    "eslint-plugin-react-hooks": "^4.1.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^5.1.3",
     "react": ">=16.8.0",
     "react-test-renderer": "^17.0.1",

src/index.tsx

@@ -117,18 +117,29 @@ function useStateMachineImpl<Context>(context: Context): UseStateMachineWithCont
 
     const reducer = useConstant(() => getReducer<Context, S, T>(config));
 
-    const [machine, send] = useReducer(reducer, initialState);
+    const [machine, dispatch] = useReducer(reducer, initialState);
     // The updater function sends an internal event to the reducer to trigger the actual update
-    const sendUpdater: Dispatch<ContextUpdate<Context>> = updater => send({ type: 'Update', updater });
-    // The public updater function exposed to the user
-    const sendNext: Dispatch<T> = next => send({ type: 'Transition', next });
+    const update: Dispatch<ContextUpdate<Context>> = updater =>
+      dispatch({
+        type: 'Update',
+        updater,
+      });
+    // The public dispatch/send function exposed to the user
+    const send: Dispatch<T> = useConstant(() => next =>
+      dispatch({
+        type: 'Transition',
+        next,
+      })
+    );
 
     useEffect(() => {
-      const exit = config.states[machine.value]?.effect?.(sendNext, sendUpdater);
-      return typeof exit === 'function' ? () => exit(sendNext, sendUpdater) : undefined;
+      const exit = config.states[machine.value]?.effect?.(send, update);
+      return typeof exit === 'function' ? () => exit(send, update) : undefined;
+      // We are bypassing the linter here because we deliberately want the effects to run on explicit machine state changes.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [machine.value]);
 
-    return [machine, sendNext];
+    return [machine, send];
   };
 }
 

src/logger.ts

@@ -1,6 +1,6 @@
 export default function log(message: string, ...optionalParams: any[]) {
   if (process.env.NODE_ENV === 'development') {
-    const logArguments = ['%cuseStateMachine ' + `%c${message}`, 'color: #888;', 'color: default;', ...optionalParams];
+    const logArguments = [`%cuseStateMachine %c${message}`, 'color: #888;', 'color: default;', ...optionalParams];
 
     // Console.log clearly accepts parameters other than string, but TypeScript is complaining, so...
     // @ts-ignore