Sobes.tech
Back to tasks
Junior — Senior
39

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

Companies where asked:

EvappsEvapps
Get help with live coding in real time with Sobes Copilot
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}</>;
};