Try this:

useEffect(() => {
  document.addEventListener("keydown", updateActiveCellId, false);
  
  return document.removeEventListener("keydown", updateActiveCellId, false);
}, [activeCellId]);

The [activeCellId] is the dependency of useEffect. Everytimes activeCellId changes, the function inside useEffect will run.

You had an empty dependency, so it ran on initial component mount only.

The returned removeEventListner is used when the component unmounts (See cleanup function in the docs). That is to ensure you have only one event listener runnign at once.

Documentation

Try this:

useEffect(() => {
  document.addEventListener("keydown", updateActiveCellId, false);
  
  return () => {
    document.removeEventListener("keydown", updateActiveCellId, false);
  }
}, [activeCellId]);

The [activeCellId] is the dependency of useEffect. Everytimes activeCellId changes, the function inside useEffect will run.

You had an empty dependency, so it ran on initial component mount only.

The returned function containing removeEventListner is executed when the component unmounts (See cleanup function in the docs). That is to ensure you have only one event listener runnign at once.

Documentation

Try this:

useEffect(() => {
  document.addEventListener("keydown", updateActiveCellId, false);
  
  return document.removeEventListener("keydown", updateActiveCellId, false);
}, [activeCellId]);

The [activeCellId] is the dependency of useEffect. Everytimes activeCellId changes, the function inside useEffect will run.

The returned removeEventListner is used when the component unmounts (See cleanup function in the docs). That is to ensure you have only one event listener runnign at once.

Documentation

Try this:

useEffect(() => {
  document.addEventListener("keydown", updateActiveCellId, false);
  
  return document.removeEventListener("keydown", updateActiveCellId, false);
}, [activeCellId]);

The [activeCellId] is the dependency of useEffect. Everytimes activeCellId changes, the function inside useEffect will run.

You had an empty dependency, so it ran on initial component mount only.

The returned removeEventListner is used when the component unmounts (See cleanup function in the docs). That is to ensure you have only one event listener runnign at once.

Documentation