Context value not updating inside event listener in React

Question

I am building a simple game in react. The problem is context is properly updated but the context value inside an event listener function is not updating. If I access the value outside the event function then the new updated value is rendered.

For the first keyup event the value will be 0 but for the next events, it should be a new updated value.

  const updateGame = useUpdateGame();
  const gameData = useGameData(); 
  //Assume Default gameData.board value is 0

  // Assume context value updated to 5

  useEffect(() => {
    document.addEventListener("keyup", (e) => {
      e.stopImmediatePropagation();
      console.log(gameData.board) //0
      handleKeyPress(e.key, gameData.board, updateGame);
    });
  }, []);
  console.log(gameData.board) //5

score 5 · Accepted Answer · answered Nov 07 '22 at 07:18

The event listener has closed over the old value of context (think closures). You will need to keep the updated value of the context in the event listener.

This could either be done by defining the event listener everytime the context value changes or using a ref.

Register and clear the event listener in the useEffect after every render when gameData changes.

const updateGame = useUpdateGame();
  const gameData = useGameData(); 

  useEffect(() => {
    let listener = (e) => {
      e.stopImmediatePropagation();
      handleKeyPress(e.key, gameData.board, updateGame);
    };

    document.addEventListener("keyup", listener);

return () => {
    document.removeEventListener("keyup", listener);
};
  }, [gameData]); //updateGame should be added here too ideally

Keep a ref which mimics the value you are looking for. ref are stable containers so they will always have the correct value of the state

  const updateGame = useUpdateGame();
  const gameData = useGameData(); 
  const gameDataRef = useRef(gameData?.board ?? null);


  useEffect(() => {
    document.addEventListener("keyup", (e) => {
      e.stopImmediatePropagation();
      handleKeyPress(e.key, gameDataRef.current, updateGame);
    });
  }, []);

  useEffect(() =>{
   gameDataRef.current = gameData.board;
  },[gameData]);

score 0 · Answer 2 · answered Nov 07 '22 at 07:14

Whenever gameData changes, you should add another keyup listener (and remove the one that currently exists, if any) so that the state value in the closure is the most up-to-date one - right now, the empty dependency array means that the gameData in the handler always refers to its initial value, which isn't what you want.

updateGame is also referenced inside the listener, so it should be in the dependency array as well.

useEffect(() => {
    const handler = (e) => {
        e.stopImmediatePropagation();
        handleKeyPress(e.key, gameData.board, updateGame);
    };
    document.addEventListener("keyup", handler);
    return () => document.removeEventListener("keyup", handler);
}, [gameData, updateGame]);

Consider enabling and following the exhaustive-deps rule to automatically prompt you to fix these sorts of potential mistakes in the future.

Context value not updating inside event listener in React

2 Answers2