Get rid of useless useCallback

Author: martpie

README.md

@@ -39,7 +39,7 @@ All properties except `onKey` are optional.
 
 | Property                         | Description                                                                                                          | Default value |
 |----------------------------------|----------------------------------------------------------------------------------------------------------------------|---------------|
-| `onKey` (required)               | the function executed after a key event                                                                              | n/a           |
+| `onKey` (required)               | the function executed after a key event. You're responsible for keeping is stable                                    | n/a           |
 | `type`                           | keyup or keydown                                                                                                     | `'keydown'`   |
 | `target`                         | the element you want to attach the event to: an **existing** DOM element, a CSS selector (you will need to add `tabIndex='0'` to your element, otherwise the event won't be caught), or a **React ref** (`RefObject<HTMLElement>`) — if a ref is passed and `.current` is `null`, the listener is silently skipped | `document`    |
 | `preventInputConflict`           | prevent onKey from firing if you have an onChange on an input, a textarea or a select                                | `false`       |

src/keybinding.tsx

@@ -1,4 +1,4 @@
-import { type RefObject, useCallback, useEffect } from 'react';
+import { type RefObject, useEffect } from 'react';
 
 export type KeybindingProps = {
   onKey: (e: KeyboardEvent) => void;
@@ -62,8 +62,12 @@ export default function Keybinding(props: KeybindingProps) {
     stopPropagation = false,
   } = props;
 
-  const onKeyEvent = useCallback(
-    (e: KeyboardEvent) => {
+  useEffect(() => {
+    const actualTarget = getTarget(target);
+
+    if (!actualTarget) return;
+
+    const onKeyEvent = (e: KeyboardEvent) => {
       const target = e.target as HTMLElement | null;
 
       if (target != null) {
@@ -86,27 +90,22 @@ export default function Keybinding(props: KeybindingProps) {
           onKey(e);
         }
       }
-    },
-    [
-      preventDefault,
-      stopPropagation,
-      preventInputConflict,
-      preventContentEditableConflict,
-      onKey,
-    ],
-  );
-
-  useEffect(() => {
-    const actualTarget = getTarget(target);
-
-    if (!actualTarget) return;
+    };
 
     actualTarget.addEventListener(type, onKeyEvent as EventListener);
 
     return () => {
       actualTarget.removeEventListener(type, onKeyEvent as EventListener);
     };
-  }, [target, type, onKeyEvent]);
+  }, [
+    target,
+    type,
+    onKey,
+    preventDefault,
+    stopPropagation,
+    preventInputConflict,
+    preventContentEditableConflict,
+  ]);
 
   return null;
 }