From 0b5a83f40d939b461fcea17a0570db50c22816f6 Mon Sep 17 00:00:00 2001
From: Deepak Jose <deepakjosp@gmail.com>
Date: Fri, 9 Aug 2024 10:48:48 +0530
Subject: [PATCH 1/4] memoized the config to prevent unnecessarily running the
 effect.

---
 src/index.js | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/index.js b/src/index.js
index 212ddc0..3b92839 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,18 +11,20 @@ import {
 
 const useHotKeys = (hotkey, handler, userConfig, externalDocument) => {
   const ref = useRef(null);
-  const convertedHotkey = convertHotkeyToUsersPlatform(hotkey);
-  const config = mergeLeft(userConfig, DEFAULT_CONFIG);
-
-  if (!handler) {
-    throw new Error("You must provide a handler function to useHotKeys");
-  }
+  const memoizedConfig = useMemo(
+    () =>
+      mergeLeft(
+        { enabled: userConfig?.enabled, mode: userConfig?.mode },
+        DEFAULT_CONFIG
+      ),
+    [userConfig?.enabled, userConfig?.mode]
+  );
 
   useEffect(() => {
-    if (!config.enabled) return undefined;
+    if (!memoizedConfig.enabled) return undefined;
 
     const mousetrapInstance = bindHotKey({
-      mode: config.mode,
+      mode: memoizedConfig.mode,
       hotkey: convertedHotkey,
       handler,
       ref,
@@ -32,13 +34,13 @@ const useHotKeys = (hotkey, handler, userConfig, externalDocument) => {
     return () => {
       unBindHotKey({
         mousetrapInstance,
-        mode: config.mode,
+        mode: memoizedConfig.mode,
         hotkey: convertedHotkey,
       });
     };
-  }, [handler, config.mode, convertedHotkey, config]);
+  }, [handler, config.mode, convertedHotkey, memoizedConfig]);
 
-  return config.mode === MODES.scoped ? ref : null;
+  return memoizedConfig.mode === MODES.scoped ? ref : null;
 };
 
 export default useHotKeys;

From 24e26df09a86f50f323fdc406dc80029a724e12d Mon Sep 17 00:00:00 2001
From: Deepak Jose <deepakjosp@gmail.com>
Date: Fri, 9 Aug 2024 10:50:28 +0530
Subject: [PATCH 2/4] Removed the handler from the useEffect dependency list
 and assigned it to a ref, so that every time the handler is called, latest
 version will be available in ref object sicne it keeps on mutating the object
 for every render.

---
 src/index.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/index.js b/src/index.js
index 3b92839..7163026 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,6 +11,10 @@ import {
 
 const useHotKeys = (hotkey, handler, userConfig, externalDocument) => {
   const ref = useRef(null);
+  const handlerRef = useRef(handler);
+
+  handlerRef.current = handler;
+
   const memoizedConfig = useMemo(
     () =>
       mergeLeft(
@@ -26,7 +30,7 @@ const useHotKeys = (hotkey, handler, userConfig, externalDocument) => {
     const mousetrapInstance = bindHotKey({
       mode: memoizedConfig.mode,
       hotkey: convertedHotkey,
-      handler,
+      handler: handlerRef.current,
       ref,
       externalDocument,
     });
@@ -38,7 +42,7 @@ const useHotKeys = (hotkey, handler, userConfig, externalDocument) => {
         hotkey: convertedHotkey,
       });
     };
-  }, [handler, config.mode, convertedHotkey, memoizedConfig]);
+  }, [convertedHotkey, externalDocument, memoizedConfig]);
 
   return memoizedConfig.mode === MODES.scoped ? ref : null;
 };

From c8d9f44672540667cb73ceda0e7500f4b7bdf589 Mon Sep 17 00:00:00 2001
From: Deepak Jose <deepakjosp@gmail.com>
Date: Fri, 9 Aug 2024 10:51:15 +0530
Subject: [PATCH 3/4] Memoized the converted key so that we don't have to
 convert it for every render.

---
 src/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index 7163026..1fe1cd2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 
 import { mergeLeft } from "ramda";
 
@@ -15,6 +15,11 @@ const useHotKeys = (hotkey, handler, userConfig, externalDocument) => {
 
   handlerRef.current = handler;
 
+  const convertedHotkey = useMemo(
+    () => convertHotkeyToUsersPlatform(hotkey),
+    [hotkey]
+  );
+
   const memoizedConfig = useMemo(
     () =>
       mergeLeft(

From ba4a42e67ec1f4f29ca21525b914a86e7b340c20 Mon Sep 17 00:00:00 2001
From: Deepak Jose <deepakjosp@gmail.com>
Date: Fri, 9 Aug 2024 11:54:40 +0530
Subject: [PATCH 4/4] Fixed the false value in user config getting overriden by
 the default value.

---
 src/index.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/index.js b/src/index.js
index 1fe1cd2..15b6385 100644
--- a/src/index.js
+++ b/src/index.js
@@ -21,12 +21,8 @@ const useHotKeys = (hotkey, handler, userConfig, externalDocument) => {
   );
 
   const memoizedConfig = useMemo(
-    () =>
-      mergeLeft(
-        { enabled: userConfig?.enabled, mode: userConfig?.mode },
-        DEFAULT_CONFIG
-      ),
-    [userConfig?.enabled, userConfig?.mode]
+    () => mergeLeft(userConfig, DEFAULT_CONFIG),
+    [userConfig?.enabled, userConfig?.mode, userConfig?.unbindOnUnmount]
   );
 
   useEffect(() => {