【React】useEffectの使い方

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

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
react:18.2.0
react-dom:18.2.0

ReactのuseEffectとは

useEffectは、副作用（データ取得、購読、手動DOM操作など）を扱うためのReact Hookです。 useEffectを使うと、関数コンポーネントで副作用の処理（DOMの書き換え、変数代入、API通信などUI構築以外の処理）を簡単に行うことができます。副作用の処理は、コンポーネントがレンダリングされた後に実行されます。これは、レンダリングが完了した後に画面に反映されるため、UIの変更をスムーズに行うことができます。公式ドキュメント：https://ja.react.dev/reference/react/useEffect

useEffectの基本構文

useEffectの基本構文は以下の通りです。


1useEffect(() => {
2  return () => {
3    // 処理
4  };
5}, [dependencies]);

副作用が依存する変数の配列内の値が変わるたびに副作用が再実行されます。空配列[]を渡すと、コンポーネントのマウントとアンマウント時にのみ実行されます。

useEffectの使い方

useEffectの伝い的な使い方を説明していきます。


1// App.js
2import './App.css';
3import React, { useState, useEffect } from 'react';
4
5function App() {
6  // useStateフックを使ってカウンターの値と名前の状態を管理
7  const [count, setCount] = useState(0);
8  const [message, setMessage] = useState('');
9
10  // countが変化するたびに実行されるuseEffect
11  useEffect(() => {
12    // カウンターの値が変わったことをコンソールにログとして表示
13    console.log(`カウントの更新: ${count}`);
14  }, [count]); // countが変わるたびに実行される
15
16  // messageが変化するたびに実行されるuseEffect
17  useEffect(() => {
18    // メッセージが変わったことをコンソールにログとして表示
19    console.log(`メッセージの更新: ${message}`);
20  }, [message]); // messageが変わるたびに実行される
21
22  // カウントを増やす関数
23  const increment = () => {
24    setCount(count + 1); // カウントを1増やす
25    setMessage('カウントが1つ増えました'); // メッセージを更新
26  };
27
28  // カウントを減らす関数
29  const decrement = () => {
30    setCount(count - 1); // カウントを1減らす
31    setMessage('カウントが1つ減りました'); // メッセージを更新
32  };
33
34  return (
35    <div>
36      <h1>React Hooks Tutorial</h1>
37      <hr />
38      <h2>Counter</h2>
39      <p>Count: {count}</p> {/* 現在のカウントを表示 */}
40      <button onClick={increment}>+</button> {/* カウントを増やすボタン */}
41      <button onClick={decrement}>-</button> {/* カウントを減らすボタン */}
42      <p>{message}</p> {/* 現在のメッセージを表示 */}
43    </div>
44  );
45}
46
47export default App;

useStateフックを使ってカウンターの値とメッセージの状態を管理しています。 increment関数はカウントを1増やしてメッセージを更新し、decrement関数はカウントを1減らしてメッセージを更新します。 useEffectは、依存配列にある変数が変更されたときにのみ再実行され、コンソールにログを表示します。

おわりに

ReactのuseEffectの使い方について説明してきましたが、いかがだったでしょうか。今までは実行される条件を管理するのは大変でしたが、useEffectの仕組みによって条件の管理がより簡単になり、不要なレンダリングを防ぐことができます。是非、ReactフックのuseEffectを使いこなして、効率的なReactアプリケーションを作成しましょう。