React Material:带有鼠标监听器的progressBar

Question

我在使用React和React Material UI组件时遇到了问题。我需要什么：

1( 用户单击我的组件中的按钮-我应该将mousemove监听器添加到页面中并显示ProgressBar
2(用户移动鼠标-我统计事件，并更新我的ProgressBar
3(当事件计数为50时，我删除mousemove侦听器并隐藏ProgressBar。

我试着用React useEffect，useState Hooks来做这件事，但它并没有删除监听器。我不明白，为什么

这是我的代码：

const [completed, setCompleted] = React.useState(0);
const [keyGenState, setKeyGenState] = React.useState(0);
const updateMousePosition = ev => {
console.log("UMP");
setCompleted(old => old + 1);
/*I tried to check completed value here, but it always is 0 - maybe, React re-renders component on setState..
And I decided to take useEffect hook (see below)*/
};
useEffect(() => {
console.log(completed); /*Just to understand, what happens) */
if (completed === 49) {
return () => {
/*When completed value is 50, this log message appears, but mouse listener still works! */
console.log("Finish!");
document.removeEventListener("mousemove", updateMousePosition);
setKeyGenState(2);
}
}
}, [completed]); 
function handleChange(e) {
switch (e.currentTarget.id) {
/*startKeyGen - it is ID of my Button. When user clicks it, I show ProgressBar and add mousemove listener*/
case "startKeyGen" : {
setKeyGenState(1);
document.addEventListener("mousemove", updateMousePosition);
break;}
}
}
/*Other logics. And finally, JSX code for my ProgressBar from Material-UI*/
<LinearProgress hidden={keyGenState !== 1 } variant="determinate" value={completed} style={{marginTop: 10}} />

这看起来真的很奇怪：为什么React忽略removeEventListener<请解释一下，我的错在哪里。>
UPD:非常感谢！我使用了useCallback钩子，以这种方式：

const updateMousePosition = React.useCallback(
(ev) => {
//console.log("Calback");
console.log(ev.clientX);
setCompleted(old => old + 1);
},
[],
);
useEffect(() => {
//console.log(completed); /*Just to understand, what happens) */
if (completed === 49) {
return () => {
/*When completed value is 50, this log message appears, but mouse listener still works! */
console.log("Finish!");
document.removeEventListener("mousemove", updateMousePosition);
setKeyGenState(2);
}
}
}); 

但我还是不完全理解。。所以，当我使用带有空依赖数组的useCallback时，这个函数(updateMousePosition(在我的组件的所有"生命"期间都不会改变
在useEffect中，我删除了mouseListener。这对我来说很神奇：为什么useEffect在没有useCallback的情况下忽略删除？

Answer 1

尝试将React.useCallback用于updateMousePosition。组件中的每一个更改都会创建新的功能(引用(。所以React.useEffect删除了最后一个updateMousePosition，但没有删除handleChange中添加的。