use a state inside an event listener that is in an useEffect

Question

In this case, how do I make it so that the event listener doesn't get recreated every time position changes but still being able to track the updated position?const [position, setPosition] = useState({ x: 1, y: 1 });
useEffect(() => {
    window.addEventListener('keydown', (e) => {
      switch (e.key) {
        case 'ArrowUp':
          if (map[position.y - 1][position.x] === 0) {
            setPosition((prev) => ({
              x: prev.x,
              y: prev.y - 1,
            }));
          }
          break;
       // other keys
      }
    });
}, [position]);

Ray · Accepted Answer

try this  useEffect(() => {
    const handleKeydown = (e) => {
      switch (e.key) {
        case "ArrowUp":
          setPosition((prev) => {
            if (map[prev.y - 1][prev.x] === 0) {
              return {
                x: prev.x,
                y: prev.y - 1,
              };
            }
            return prev;
          });
      }
      break;
      // other keys
    };

window.addEventListener("keydown", handleKeydown);

return () => {
      window.removeEventListener("keydown", handleKeydown);
    };
  }, []);

use a state inside an event listener that is in an useEffect

2 Replies