Reactでよく使うHooksまとめ
Reactの世界では、Hooks（フック）の登場によってコンポーネントの状態管理や副作用の処理がより柔軟かつ簡潔になりました。本記事では、Reactでよく使われるHooksを解説し、実用的なコード例付きで紹介します。初心者から中級者まで参考になる内容を目指しています。
ReactにおけるHooksとは？
Reactのhooksについて説明する前に、クラスコンポーネントと関数コンポーネントについて説明させてください。
Reactでは、画面の部品を「コンポーネント」として作ります。
このコンポーネントには、大きく分けてクラスコンポーネントと関数コンポーネントの2つの書き方があります。
クラスコンポーネントとは？
昔のReactでは、状態（state）を持ったコンポーネントや、処理のタイミングを制御する機能（ライフサイクル）を使いたいとき、クラスコンポーネントという形で書く必要がありました。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
<div>
<p>カウント: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
増やす
</button>
</div>
);
}
}
関数コンポーネントとは？
よりシンプルな形でコンポーネントを作れるのが関数コンポーネントです。
しかし昔は、関数コンポーネントでは「状態を持つ」ことができませんでした。
そこで登場したのが Hooks（フック）です。
Hooksは、関数コンポーネントでも状態や副作用を扱えるようにするための仕組みです。
React 16.8 から導入され、今ではReactの主流な書き方になっています。
Hooksを使うとどうなる？
上のクラスコンポーネントと同じ機能を、Hooksを使った関数コンポーネントで書くとこうなります：
import { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0); // ← Hooksを使って状態を作成！
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>増やす</button>
</div>
);
}
このように、関数コンポーネントとHooksを組み合わせることで、コードがシンプルでわかりやすくなります。
基本のHooks
useState
Reactで最もよく使うHooksの1つで、状態（state）を管理するために使用します。
ユーザーの入力やクリックなどに応じて、画面上のデータや表示を動的に変えるために不可欠な機能です。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>増やす</button>
</div>
);
}
- 初期値を引数に渡す
-
countが状態の値、setCountが更新関数 - コンポーネントが再レンダリングされるたびにUIが更新される
useEffect
副作用を扱うためのHook。主に、API通信やDOM操作、タイマー処理、イベントリスナーの登録・解除など、レンダリングとは直接は関係しない処理に使用します。
※ここでの「副作用」とは、コンポーネントの描画（レンダリング）とは直接関係ない処理のことを指します。
- 第2引数を省略すると、毎回のレンダリング後に実行されます
- 第2引数に空配列
[]を渡すと、マウント時の1回のみ実行されます - 第2引数に依存する値を渡すと、その値が変化したときに再実行されます
-
useEffectの中で関数をreturnすると、アンマウント時のクリーンアップ処理として実行されます
以下は、外部API（JSONPlaceholder）を使用した例です。JSONPlaceholderはダミーのデータを提供するテスト用REST APIサービスで、フロントエンドの開発や学習に非常に便利です。（JSONPlaceholder）を使用した例です。JSONPlaceholderはダミーのデータを提供するテスト用REST APIサービスで、フロントエンドの開発や学習に非常に便利です。
import React, { useEffect, useState } from 'react';
function FetchData() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((res) => res.json())
.then((data) => setData(data));
}, []);
return (
<div>
{data ? (
<div>
<h3>{data.title}</h3>
<p>{data.body}</p>
</div>
) : (
'読み込み中...'
)}
</div>
);
}
useRef
useRef は、DOM要素に直接アクセスしたり、再レンダリングせずに値を保持したいときに使うHooksです。
例：input 要素にフォーカスを当てたい、スクロール位置を操作したい など
例：入力フィールドにフォーカスを当てる
import React, { useRef } from 'react';
function FocusInput() {
const inputRef = useRef<HTMLInputElement | null>(null); // 初期値は null
const handleClick = () => {
if (inputRef.current) {
inputRef.current.focus(); // DOMに直接アクセスしてフォーカス
}
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleClick}>フォーカス</button>
</div>
);
}
useRefとuseEffectを組み合わせると、初回マウント時に自動でフォーカスを当てることもできます：
import React, { useRef, useEffect } from 'react';
function AutoFocusInput() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current?.focus();
}, []);
return <input ref={inputRef} type="text" placeholder="自動フォーカス" />;
}
応用Hooks
useContext
React の useContext フックは、グローバルな状態管理に使用されます。
テーマの切り替えを行う際などに便利です。
1. Contextの作成
まず、React.createContext() を使って Context を作成します。
import React from 'react';
import ReactDOM from 'react-dom/client';
const ThemeContext = React.createContext('light');
function ThemedButton() {
const theme = React.useContext(ThemeContext);
return <button className={theme}>ボタン</button>;
}
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
- ContextとProviderでグローバル値を定義し、useContextで読み取る
useReducer
useReducerは複雑な状態管理に適したHooksです
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
<p>{state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>＋</button>
<button onClick={() => dispatch({ type: 'decrement' })}>−</button>
</>
);
}
このように useReducer を使うと、「どんな操作で」「どう状態が変わるか」を
ひとつの関数（reducer）にまとめて管理できます。
これは、状態が増えたり、変更のルールが複雑になってきたときに便利です。
useStateとの違いは？
-
useStateは「1つの状態を単純に変えるだけ」のときに使いやすいです。 - ですが状態がたくさんあったり、「このボタンを押したらこう変える」といったルールが複雑になると、
useReducerのほうが管理しやすくなることもあります。
🛠 カスタムHooks（自作Hooks）
Reactでは、useState や useEffect などのHooksを自分で組み合わせて再利用できるロジックを作ることができます。
これを カスタムHooks（Custom Hooks） と呼びます。
どうしてカスタムHooksを使うの？
複数のコンポーネントで同じような処理を書くのは非効率です。
カスタムHooksを使うことで、複雑なロジックを共通化・再利用することができます。
例：ウィンドウサイズを取得するカスタムHook
import { useState, useEffect } from 'react';
function useWindowSize() {
const [size, setSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
useEffect(() => {
const handleResize = () => {
setSize({
width: window.innerWidth,
height: window.innerHeight,
});
};
window.addEventListener('resize', handleResize);
// クリーンアップ処理（アンマウント時）
return () => window.removeEventListener('resize', handleResize);
}, []);
return size;
}
こちらのuseWindowSize は画面の幅・高さをリアルタイムで監視し、状態として返すカスタムHookです。
初回マウント時に window.innerWidth / innerHeight を取得してセットします。
ウィンドウがリサイズされるたびに setSize() を呼び、状態を更新します。
複数のコンポーネントで共通して使える再利用可能な機能です
- 自作Hookには
useという接頭辞が必要です - カスタムHooksは複数コンポーネントで再利用可能になります
例：
const { width, height } = useWindowSize();
📝 まとめ
本記事では主に使用頻度が高い以下のHooksを紹介しました：
-
useState,useEffect,useRef,useContext,useReducer - カスタムHooks
これらのHooksをうまく活用することで、Reactの開発が便利になるので、積極的に使っていきましょう！
Hooksは最初ちょっと難しく感じるかもしれませんが、使いこなせるようになるとReactがもっと楽しくなりますので、少しずつ触れてみてください！