問題一覧に戻る
中級カスタムフック
問題51: カスタムフックの基本

Reactのカスタムフックの基本的な実装方法を学びます。カスタムフックは、コンポーネント間でステートフルなロジックを再利用するための仕組みです。「use」で始まる名前を付ける命名規則があり、これによりReactがフックの規則を適用できます。カスタムフック内では、useState、useEffect、その他のフックを自由に使用でき、複雑なロジックをカプセル化できます。戻り値は配列やオブジェクトで返すことが一般的で、呼び出し側で分割代入により必要な値や関数を取得します。カスタムフックにより、ビジネスロジックとUIロジックを分離し、テストしやすく保守性の高いコードを実現できます。

import React, { useState } from 'react';

{/* カスタムフックの定義（use接頭辞が必須） */}
function Counter() {
  const [count, setCount] = useState(0);
  {/* 値と更新関数を配列で返す */}
  return [, () => setCount(count + 1)];
}

function App() {
  {/* カスタムフックを使用 */}
  const [count, increment] = ();

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}

export default App;
···