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 が変更される可能性がある場所で簡単に使用できます。