如何防止组件在组件外部的悬停事件上重新渲染？

Question

当我将鼠标悬停在包含 React 组件的 div 上时，我的行为会更改页面中元素的不透明度。这种行为效果很好。但是，我注意到每次事件都会触发包装的组件重新渲染。我想避免这种情况。有办法防止这种情况吗？

顺便说一句，我在相关组件中使用 React.memo() 。

我非常感谢您提供的任何帮助。

伪代码

• 检测光标是否位于组件上
• 如果确认悬停，则更改另一个组件的不透明度，而无需重新渲染包装的组件

代码

<div
  role="none"
  onMouseEnter={() => {
    setIsShown(cursorOpacity)
  }}
  onMouseLeave={() => {
    setIsShown(1)
  }}
>
  <SectionHeader />
</div>