Javascript 在React中优化onScroll事件

我有一个简单的水平滚动div

function Horizontal(){
  const [now, setNow] = React.useState(0);
  function handleScroll(e){
    const { scrollLeft } = e.currentTarget;
    setNow(scrollLeft);
  }
  return (
    <>
      <p>{now}px</p>
      <div width={3000} height={80} onScroll={handleScroll}>
        {...}
      </div>
    </>
  )
}

函数水平（）{
const[now，setNow]=React.useState（0）；
函数handleScroll（e）{
const{scrollLeft}=e.currentTarget；
setNow（左滚动）；
}
返回(
{now}px

{...}
)
}

这是一个示例代码，运行良好

但我意识到

向左滚动

会导致

回流

所以，我想尽可能地优化它

---

如果您有任何建议，请留下意见。

如果您将

{now}

移动到另一个组件，并将此

useState

移动到父节点，并在

水平
上使用
memo
？这只是一个示例，因此真正的代码具有更复杂的结构。好的，但是，您的原始代码与您无法进行这些更改的代码有什么不同呢？