[React]hoverで表示するツールチップなどはstateを使わずに切り替えるべし

hoverで表示する時はstateを使うんじゃない

タイトルはキャッチーな感じで

本題

const [isHover, setIsHover] = useState(false)

...

const handleMouseOver = () => {
  setIsHover(true)
}

const handleMouseLeave = () => {
  setIsHover(false)
}

...

return (
  <div onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>
  {
    isHover && <>ツールチップ</>
  }
  </div>
)

上記のような実装でツールチップやアイコンの表示・非表示を切り替えていることがあるかもしれませんが
この手法だとマウスを早く動かされたりするなどで切り替えがうまくいかないことがあります。
またツールチップの表示・非表示するだけでその個数分stateを作らないといけないのも非効率です。
ですので
hoverを使用した実装にするのが良いです。

...
// 今回はTailwindcss
// 他でも同じように使用できます
return (
  <div className='hover:[&>div]:block'>
    <div className='none'>ツールチップ</div>
  </div>
)

[&>div]を修正すればsvgなどにも対応できるので、非常に便利です。
ぜひ皆さんもこちらで切り替えをしてみてください。

最後に

	display	visiblity
非表示時の領域確保	×	⚪︎

非表示時に使う代表的なこの２つの違いを認識しておくと使う時に根拠がはっきりすると思います。

閲覧ありがとうございました。