Назад к задачам
EvappsПолучайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Junior — Senior
40
Рефакторинг компонента 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}</>;
};