当サイトは、アフィリエイト広告を利用しています

【ReactHooks】Reactにおけるフックのルール

作成日：2025月08月10日
更新日：2025年08月10日

Reactフックとは？

フック（Hook） は、Reactの関数コンポーネントで状態管理や副作用処理を可能にする特別な関数のこと。

大きく分けると下記の2種類がある

  • Reactの組み込みフック
  • カスタムフック

Reactの組み込みフックとは？

Reactが標準で提供しているフックで、主に以下のような種類がある。

  • useState：コンポーネント内で状態（state）を管理する
  • useEffect：副作用処理（データ取得、イベント登録、タイマー設定など）を行う
  • useContext：コンテキストから値を取得する
  • useRef：DOM要素や値の参照を保持する
  • useMemo / useCallback：パフォーマンス最適化のためのメモ化処理

下記記事でそれぞれまとめている

カスタムフックとは？

開発者が独自に作成するフックのこと。
複数のコンポーネントで同じ状態管理やロジックを再利用したい場合に使う。

フックのルール（Rules of Hooks）とは？

Reactのフックは特定の使い方を守らないと正しく動作しないため、2つのルールが定められてる。

  • フックは関数の「トップレベル」で呼ぶ
  • フックはReact関数コンポーネント or カスタムフックの中でのみ使う

これは上記の「組み込みフック」と「カスタムフック」の両方で守る必要がある。

フックは関数の「トップレベル」で呼ぶ

具体的なには

  • フックはループ、条件分岐、ネストされた関数の中では呼び出さない

ということ
基本的にhookは使う場合は、すぐ書くようにする！

正しい例

sample
import React, { useState } from 'react';


export default function App() {
  const [count, setCount] = useState(0); // トップレベルで呼び出し


  return (
    <>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>;
    </>
  );
}
  • トップレベルで呼び出している

間違った例

js
export default function App() {
  if (someCondition) {
    // 条件分岐の中でフックを呼び出してはいけない
    const [count, setCount] = useState(0);
  }


  return (
    <>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>;
    </>
  );
}
  • 条件分岐の中でフックを呼び出してはいけない

フックはReact関数コンポーネント or カスタムフックの中でのみ使う

フックは

  • React関数コンポーネント
  • カスタムフック

の中でしか使うことができない。

React関数コンポーネント内で使う

React関数コンポーネントとは
ReactでUIを作るためのJavaScript関数で、引数としてpropsを受け取り、JSXを返す構造のコンポーネントのこと。

関数コンポーネントサンプル
const MyComponent = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

関数コンポーネント内ではフックを使うことができる

sample
import React, { useState } from 'react';


// JSXを返しているのでこれは関数コンポーネント
export default function App() {
  const [count, setCount] = useState(0);


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

関数コンポーネント以外で使う誤った例

関数コンポーネント以外で使う誤った例
import React, { useState } from 'react';


// ただの関数（コンポーネントでもカスタムフックでもない）
function normalFunction() {
  const [count, setCount] = useState(0); // フックをここで使うのは違反
  return { count, setCount };
}


export default function App() {
  const { count, setCount } = normalFunction(); // 呼び出し


  return (
    <>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}
  • 通常関数で使うのは違反

カスタムフック内で使う

カスタムフック内でも使うことができる。
たとえば

関数コンポーネント以外で使う誤った例
import React, { useState } from 'react';


// ただの関数（コンポーネントでもカスタムフックでもない）
function normalFunction() {
  const [count, setCount] = useState(0); // フックをここで使うのは違反
  return { count, setCount };
}


export default function App() {
  const { count, setCount } = normalFunction(); // 呼び出し


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

は通常の関数のため違反だが、normalFunctionをカスタムフックにすれば問題ない

js
import React, { useState } from 'react';


// カスタムフック
function useCounter() {
  const [count, setCount] = useState(0);
  return { count, setCount };
}


export default function App() {
  const { count, setCount } = useCounter();


  return (
    <>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}
  • カスタムフックならネストしても問題ない

ルールに違反して場合はどうなる？

違反した場合は実行時エラーとなる。 ※ESLintなら事前にチェックできる

まとめ

Reactのフックのルールを具体的なサンプルを使ってまとめてみた。
しばらくReact触ってないと、忘れるので忘備録として残す。

関連記事

新着記事

タグ別一覧
top