カスタムフック

なぜ学ぶか： useAuth()・useWindowWidth() — AIのコードにはuseで始まる自作関数がよく出ます。これはカスタムフックといって、stateやuseEffectを含む処理を「部品」として切り出したものです。例を見てください。

まずはこの例を見てみましょう

// カスタムフック: 「ウィンドウの幅を追いかける」処理を部品化
function useWindowWidth() {
  const [width, setWidth] = useState(0);
  useEffect(() => {
    const update = () => setWidth(window.innerWidth);
    update();
    window.addEventListener("resize", update);
    return () => window.removeEventListener("resize", update);
  }, []);
  return width;
}

// 使う側は、たった1行
function Layout() {
  const width = useWindowWidth();
  return <p>{width < 768 ? "モバイル表示" : "PC表示"}</p>;
}

state・useEffect・後片付けという面倒な部分がフックの中に隠れ、使う側は1行になります。