React input 输入卡顿问题

下面代码会有输入卡顿问题，是因为changeLockWindows会调后端，setPosY不会立即刷新页面值，必须鼠标点击一下，触发onblur事件，input才会刷新

const [posY, setPosY] = useState(100);
const changePosY = useCallback((val: number) => {
  setPosY(val);
  changeLockWindows({y: val});
}, [])
  

<input
  className="pill__input"
  type="number"
  value={posY}
  onChange={(event) =>
    changePosY(Number(event.target.value))
  }
/>

解决办法

const [posY, setPosY] = useState(100);
// 单纯更新state，不包含延时逻辑
const changePosY = useCallback((val: number) => {
    setPosY(val);
}, [])

// 监听posY变化，延迟执行窗口逻辑
useEffect(() => {
    changeLockWindows({y: posY});
}, [posY])

<input
  className="pill__input"
  type="number"
  value={posY}
  onChange={(event) =>
    changePosY(Number(event.target.value))
  }
/>

原因：是因为我的changeLockWindows回调函数里不知道哪里更改了PosY的值的原因，同步更新值就好了。上面方法做为参考。