Состояние React обновляется, но изменения не отражаются в прослушивателе событий, вызываемом программно

Проблема, с которой вы столкнулись, связана с замыканиями. При первоначальном рендеринге, когда вы вызываете перехватчик useEffect для подключения сокета и добавления прослушивателя событий окна, функция, которая подключена как прослушиватель событий нажатия клавиши окна, использует начальные значения всех переменных, которые используются внутри этой функции. , эти переменные никак не обновляются при будущих повторных отрисовках.

И этого не происходит при прямом нажатии кнопки из-за каждого повторного рендеринга — устанавливаются новые переменные состояния и функция handleSubmitClick воссоздается, в этом случае она видит все последние обновления и действует так, как ожидалось.

Одно из предложений — использовать крючок useRef для хранения последних значений всего, что вам нужно для прослушивателя событий нажатия клавиш и handleSubmitClick. Я нашел небольшой служебный хук, который действует как useState, но также возвращает переменную ref:

function useStateWithRef<T>(
  initialValue: T
): [T, Dispatch<SetStateAction<T>>, React.MutableRefObject<T>] {
  const [state, setState] = useState<T>(initialValue);
  const ref = useRef<T>(state);

  const setStateAndRef: Dispatch<SetStateAction<T>> = (newState) => {
    if (typeof newState === "function") {
      setState((prevState) => {
        const computedState = (newState as (prevState: T) => T)(prevState);
        ref.current = computedState;
        return computedState;
      });
    } else {
      setState(newState);
      ref.current = newState;
    }
  };

  return [state, setStateAndRef, ref];
}

Использование:

const [userID, setUserID, userIDRef] = useStateWithRef<string>("");
const [messages, setMessages, messagesRef] = useStateWithRef<TMessage[]>([]);
const [messageInput, setMessageInput, messageInputRef] =
  useStateWithRef<string>("");
const [room, setRoom, roomRef] = useStateWithRef<string | null>(null);


const handleSubmitClick = throttle(() => {
  console.info(
    "userID",
    userIDRef.current,
    "room",
    room.current,
    "message",
    messageInput.current.trim()
  );
  // ...etc
}, 400);

Примечание: вы не удаляете прослушиватель событий нажатия клавиши окна в своем useEffect, исправьте это, пожалуйста.

Другой подход — оберните ваши функции keyShortcuts и handleSubmitClick хуками useCallback и добавьте useEffect, который будет присоединять/отсоединять keyShortcuts при изменении состояния:

const lastSocketActionDateMsRef = useRef(0);

const handleSubmitClick = useCallback(() => {
  // can run only after 0.4s after the last call
  if (lastSocketActionDateMsRef.current + 400 > Date.now()) return;
  lastSocketActionDateMsRef.current = Date.now();

  console.info("userID", userID, "room", room, "message", messageInput.trim());

  if (
    !socket.connected ||
    userID === "" ||
    room === null ||
    messageInput.trim() === ""
  )
    return;

  const data = {
    userID: socket.id!,
    message: messageInput.trim(),
    room: room,
  };
  socket.emit("CHAT_SEND", data);
}, [userID, room, messageInput, socket]);

const keyShortcuts = useCallback(
  (e: KeyboardEvent) => {
    if (e.ctrlKey && e.key === "Enter") {
      handleSubmitClick();
    }
  },
  [handleSubmitClick]
);

useEffect(() => {
  window.addEventListener("keydown", keyShortcuts);

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

Предполагая, что handleSubmitClick имеет все проверки состояния сокета, userId, входного значения - если что-то не установлено, это будет ошибка. Прослушиватель событий Keydown будет устанавливаться и отключаться при каждом повторном рендеринге при изменении связанных состояний. Только не забудьте удалить window.addEventListener из useEffect, который обрабатывает инициализацию сокета.

Но в этом случае возникнут некоторые проблемы с функцией дроссельной заслонки - дроссельная заслонка и useCallback не работают друг с другом, вот некоторые подробности и обходные пути, и я бы предложил удалить дроссельную заслонку, добавить const lastSocketActionDateMsRef = useRef(0) и просто проверить время последнего выполнения с использованием этой переменной.