BFE.devでのAI解答例 - React コーディング問題
6. useHover()

以下が私たちの解決策です。

import { useState, useEffect, useRef } from 'react';

function useHover() {
  const [hovered, setHovered] = useState(false);
  const ref = useRef(null);

  function handleMouseOver() {
    setHovered(true);
  }

  function handleMouseOut() {
    setHovered(false);
  }

  useEffect(() => {
    const node = ref.current;
    node.addEventListener('mouseover', handleMouseOver);
    node.addEventListener('mouseout', handleMouseOut);

    return () => {
      node.removeEventListener('mouseover', handleMouseOver);
      node.removeEventListener('mouseout', handleMouseOut);
    };
  }, []);

  return [ref, hovered];
}

function App() {
  const [ref, isHovered] = useHover();
  return (
    <div ref={ref}>
      {isHovered ? 'hovered' : 'not hovered'}
    </div>
  );
}

export default App;

この Hook は、配列に 2 つの要素を返します。第 1 要素は、コンポーネントに渡すために参照を保持する useRef フックであり、第 2 要素は、現在要素がホバーされているかどうかを示す真偽値です。

useEffect フックは、コンポーネントが最初にマウントされるときにのみ実行されます。 その後、ref.current.addEventListener メソッドを使用して、イベントリスナーが設定され、戻り関数でイベントリスナーが削除されるようにします。

このように、useHover フックはホバー状態を追跡し、それが原因で UI が変更される可能性がある場所で簡単に使用できます。