Back to tasks
EvappsGet help with live coding in real time with Sobes Copilot
Junior — Senior
39
Рефакторинг компонента ClickListener в React
Companies where asked:
Task condition
Необходимо улучшить реализацию компонента 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}</>;
};