Critical Fix 🚑️

src/hooks/useKeyPress.js

@@ -1,29 +1,32 @@
-import { useEffect, useState } from "react";
+import { useState, useEffect, useCallback } from "react";
 
 const useKeyPress = function (targetKey) {
   const [keyPressed, setKeyPressed] = useState(false);
 
-  const downHandler = ({ key }) => {
+  const downHandler = useCallback(({ key }) => {
     if (key === targetKey) {
       setKeyPressed(true);
     }
-  };
+  }, [targetKey]);
 
-  const upHandler = ({ key }) => {
+  const upHandler = useCallback(({ key }) => {
     if (key === targetKey) {
       setKeyPressed(false);
     }
-  };
+  }, [targetKey]);
 
   useEffect(() => {
-    document.addEventListener("keydown", downHandler);
-    document.addEventListener("keyup", upHandler);
+    const handleKeyDown = (event) => downHandler(event);
+    const handleKeyUp = (event) => upHandler(event);
+
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("keyup", handleKeyUp);
 
     return () => {
-      document.removeEventListener("keydown", downHandler);
-      document.removeEventListener("keyup", upHandler);
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keyup", handleKeyUp);
     };
-  }, [targetKey]); // added dependency
+  }, [downHandler, upHandler]);
 
   return keyPressed;
 };

tailwind.config.js

@@ -4,5 +4,4 @@ module.exports = {
     extend: {},
   },
   plugins: [],
-  purge: ["./src/**/*.{js,jsx,ts,tsx}"],
 };

yarn.lock

@@ -3269,15 +3269,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001335:
-  version "1.0.30001338"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001338.tgz"
-  integrity sha512-1gLHWyfVoRDsHieO+CaeYe7jSo/MT7D7lhaXUiwwbuR5BwQxORs0f1tAwUSQr3YbxRXJvxHM/PA5FfPQRnsPeQ==
-
-caniuse-lite@^1.0.30001541:
-  version "1.0.30001543"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001543.tgz#478a3e9dddbb353c5ab214b0ecb0dbed529ed1d8"
-  integrity sha512-qxdO8KPWPQ+Zk6bvNpPeQIOH47qZSYdFZd6dXQzb2KzhnSXju4Kd7H1PkSJx6NICSMgo/IhRZRhhfPTHYpJUCA==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001335, caniuse-lite@^1.0.30001541:
+  version "1.0.30001580"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001580.tgz"
+  integrity sha512-mtj5ur2FFPZcCEpXFy8ADXbDACuNFXg6mxVDqp7tqooX6l3zwm+d8EPoeOSIFRDvHs8qu7/SLFOGniULkcH2iA==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"