Рефакторинг компонента ClickListener в React

Условие

Необходимо улучшить реализацию компонента ClickListener, устранив потенциальные проблемы с зависимостями хуков и оптимизировав обработку событий.

import React from "react";

const Service = {
    send: (data) => console.log(data + " uploaded"),
};

const ClickListener = () => {
    const [coordinate, setCoordinate] = React.useState();
    const handleUpload = React.useCallback(() => {
        Service.send(coordinate);
    }, [coordinate]);

    React.useEffect(() => {
        const onClick = (e) => {
            setCoordinate(e.pageX);
            handleUpload();
        };
        document.addEventListener("click", onClick);
        return () => document.removeEventListener("click", onClick);
    }, [handleUpload]);

    return <>{coordinate}</>;
};

Ответ

setCoordinate не меняет coordinate в текущем замыкании, поэтому handleUpload отправляет предыдущее значение. Передавайте в Service.send координату непосредственно из события.

const ClickListener = () => {
  const [coordinate, setCoordinate] = React.useState(null);
  React.useEffect(() => {
    const onClick = event => {
      const next = event.pageX;
      setCoordinate(next);
      Service.send(next);
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);
  return <>{coordinate}</>;
};

Service объявлен вне компонента, поэтому зависимость от coordinate больше не нужна и слушатель не пересоздаётся после каждого клика. Сетевая версия Service.send должна отдельно обрабатывать ошибки. Не переносите отправку внутрь updater состояния: updater должен оставаться чистым.