Reactjs 如何避免反复调用setState函数？

我是新手，只有当变量的值与以前的状态不同时，我才需要更新变量的状态。
假设我有一个初始值为false的状态

const [open, setOpen] = useState(false);

我需要在水平滚动上更新变量的状态，我在滚动上附加了一个监听器，每次我滚动时它都会调用函数handleClickAway

useEffect(() => {
   const scroll = document.querySelector('.myclass');
   scroll.addEventListener("scroll", () => handleClickAway());
   return () => {
       scroll.removeEventListener("scroll", () => handleClickAway());
   };
}, []);

const handleClickAway = () => {
    setOpen(false);
}

现在，它将通过调用Scroll上的

setOpen（false）

每次更新状态，我不知道如何处理这个问题

---

我不想再次调用

setOpen（false）

，如果它已经被调用，并在滚动时将值设置为

false

，只需添加if语句，仅当

open

为

true

时才调用

setOpen

const handleClickAway = () => {
    if (open) {
      setOpen(false);
    }
}

或者再短一点：

const handleClickAway = () => {
  open && setOpen(false);
}

以下是解决方案：

const handleClickAway = () => open && setOpen(false);

---

非常感谢你的回答。愿上帝保佑你

const handleClickAway = () => {
 if(open) {
   setOpen(false);
 }
}