問題一覧に戻る
中級カスタムフック
問題52: useToggle

真偽値の切り替えを行う汎用的なカスタムフック「useToggle」の実装を学びます。このフックは、モーダルの開閉、メニューの表示切り替え、チェックボックスの状態管理など、様々な場面で再利用できます。初期値をパラメータとして受け取り、現在の値とトグル関数を返します。トグル関数は現在の値を反転させるだけのシンプルな実装ですが、この単純さが再利用性を高めています。カスタムフックを使うことで、同じトグルロジックを複数のコンポーネントで使い回すことができ、コードの重複を避けられます。また、ロジックが一箇所に集約されるため、バグの修正や機能拡張も容易になります。実際の開発では、このような小さなカスタムフックを組み合わせて、より複雑な機能を構築することが一般的です。

import React, { useState } from 'react';

{/* トグルカスタムフックの定義 */}
function useToggle(initial = false) {
  const [value, setValue] = useState(initial);
  {/* 現在の値を反転させる関数 */}
  const toggle = () => setValue(!);
  return [, toggle];
}

function App() {
  {/* useToggleフックを使用 */}
  const [isOn, ] = (false);

  return (
    <div>
      <p>{isOn ? "ON" : "OFF"}</p>
      <button onClick={toggle}>切替</button>
    </div>
  );
}

export default App;
···