React Effect Hook 使用 setTimeout

最近在写一个自动补全的输入框,使用antd的AutoComplete组件,但是存在一个问题，当使用搜索的时候，每当完成一个字母、一个词的输入则立即搜索，这显然不是好的体验。
于是想通过timeout来解决。

Timeout使用示例如下：

import React from ‘react’;
export default ({ name }) => {
const [isButtonVisible, setIsButtonVisible] = React.useState(false);
const [isMouseOver, setIsMouseOver] = React.useState(false);
const [timeoutId, setTimeoutId] = React.useState(null);
React.useEffect(() => {
return () => clearTimeout(timeoutId);
}, []);
React.useEffect(() => {
if (isMouseOver) {
clearTimeout(timeoutId);
} else {
const id = setTimeout(() => {
setIsButtonVisible(false);
}, 1000);
setTimeoutId(id);
}
}, [isMouseOver]);
const handleMouseEnter = React.useCallback(() => {
setIsMouseOver(true);
setIsButtonVisible(true);
}, []);
const handleMouseLeave = React.useCallback(() => {
setIsMouseOver(false);
}, []);
return (
<>
<button
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
A
</button>
<br /><br /><br />
{isButtonVisible && (
<button
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
B
</button>
)}
</>
);
};