【React】useEffectの使い方 | Webエンジニア「いっしー」のブログ

動画で解説を見る

1 開発環境
2 ReactのuseEffectとは
3 useEffectの基本構文
4 useEffectの使い方
5 おわりに

開発環境

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の基本構文は以下の通りです。

useEffect(() => {
  return () => {
    // 処理
  };
}, [dependencies]);

useEffect(() => {

return () => {

// 処理

};

}, [dependencies]);

副作用が依存する変数の配列内の値が変わるたびに副作用が再実行されます。

空配列[]を渡すと、コンポーネントのマウントとアンマウント時にのみ実行されます。

useEffectの使い方

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

import './App.css';
import React, { useState, useEffect } from 'react';

function App() {
  // useStateフックを使ってカウンターの値と名前の状態を管理
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState('');

  // countが変化するたびに実行されるuseEffect
  useEffect(() => {
    // カウンターの値が変わったことをコンソールにログとして表示
    console.log(`カウントの更新: ${count}`);
  }, [count]); // countが変わるたびに実行される

  // messageが変化するたびに実行されるuseEffect
  useEffect(() => {
    // メッセージが変わったことをコンソールにログとして表示
    console.log(`メッセージの更新: ${message}`);
  }, [message]); // messageが変わるたびに実行される

  // カウントを増やす関数
  const increment = () => {
    setCount(count + 1); // カウントを1増やす
    setMessage('カウントが1つ増えました'); // メッセージを更新
  };

  // カウントを減らす関数
  const decrement = () => {
    setCount(count - 1); // カウントを1減らす
    setMessage('カウントが1つ減りました'); // メッセージを更新
  };

  return (
    <div>
      <h1>React Hooks Tutorial</h1>
      <hr />
      <h2>Counter</h2>
      <p>Count: {count}</p> {/* 現在のカウントを表示 */}
      <button onClick={increment}>+</button> {/* カウントを増やすボタン */}
      <button onClick={decrement}>-</button> {/* カウントを減らすボタン */}
      <p>{message}</p> {/* 現在のメッセージを表示 */}
    </div>
  );
}

export default App;

import './App.css';

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

function App() {

// useStateフックを使ってカウンターの値と名前の状態を管理

const [count, setCount] = useState(0);

const [message, setMessage] = useState('');

// countが変化するたびに実行されるuseEffect

useEffect(() => {

// カウンターの値が変わったことをコンソールにログとして表示

console.log(`カウントの更新: ${count}`);

}, [count]); // countが変わるたびに実行される

// messageが変化するたびに実行されるuseEffect

useEffect(() => {

// メッセージが変わったことをコンソールにログとして表示

console.log(`メッセージの更新: ${message}`);

}, [message]); // messageが変わるたびに実行される

// カウントを増やす関数

const increment = () => {

setCount(count + 1); // カウントを1増やす

setMessage('カウントが1つ増えました'); // メッセージを更新

};

// カウントを減らす関数

const decrement = () => {

setCount(count - 1); // カウントを1減らす

setMessage('カウントが1つ減りました'); // メッセージを更新

};

return (

<div>

<h1>React Hooks Tutorial</h1>

<hr />

<h2>Counter</h2>

<p>Count: {count}</p> {/* 現在のカウントを表示 */}

<button onClick={increment}>+</button> {/* カウントを増やすボタン */}

<button onClick={decrement}>-</button> {/* カウントを減らすボタン */}

<p>{message}</p> {/* 現在のメッセージを表示 */}

</div>

);

}

export default App;

useStateフックを使ってカウンターの値とメッセージの状態を管理しています。

increment関数はカウントを1増やしてメッセージを更新し、decrement関数はカウントを1減らしてメッセージを更新します。

useEffectは、依存配列にある変数が変更されたときにのみ再実行され、コンソールにログを表示します。

おわりに

ReactのuseEffectの使い方について説明してきましたが、いかがだったでしょうか。

今までは実行される条件を管理するのは大変でしたが、useEffectの仕組みによって条件の管理がより簡単になり、不要なレンダリングを防ぐことができます。

是非、ReactフックのuseEffectを使いこなして、効率的なReactアプリケーションを作成しましょう。