Merge branch 'main' into dev

src/components/Gameboard/Gameboard.jsx

@@ -58,6 +58,7 @@ const Gameboard = () => {
         socket.on('redirect', () => {
             window.location.reload();
         });
+
     }, [socket, context.playerId, context.roomId, setRolledNumber]);
 
     return (

src/components/LoginPage/NameInput/NameInput.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect, useCallback } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import { SocketContext } from '../../../App';
 import useInput from '../../../hooks/useInput';
 import useKeyPress from '../../../hooks/useKeyPress';

src/hooks/useKeyPress.js

@@ -1,10 +1,13 @@
-import { useEffect } from 'react';
+import { useEffect, useCallback } from 'react';
 export default function useKeyPress(targetKey, callback) {
-    const keyPressHandler = ({ key }) => {
-        if (key === targetKey) {
-            callback();
-        }
-    };
+    const keyPressHandler = useCallback(
+        ({ key }) => {
+            if (key === targetKey) {
+                callback();
+            }
+        },
+        [targetKey, callback]
+    );
 
     useEffect(() => {
         window.addEventListener('keydown', keyPressHandler);