Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What are the problem?

posted at

updated at

Organization

useEffectをマウント時に1回だけ実行する方法

はじめに

Reactで副作用を扱うフックにuseEffectがありますが、従来のcomponentDidMountのようにマウント時に1度だけ実行したい場合があります。
公式ドキュメントを読んでも方法が分からなかったので、備忘録をかねて投稿します。

useEffectとは

Reactのフックという機能がありますが、その中でも副作用を扱うためのフックです。

副作用とは、

  • 引数以外の要因で返り値が変化する関数
  • 自身の関数の外に影響を与える関数

のような関数のことで、具体的には以下のような処理を伴う関数を指します。

  • API通信などの外部への通信
  • DOMの変更
  • 状態の変更

公式ドキュメントでは、以下のような例が記載されています。
useEffectに渡されたコールバック関数内で、DOM(document.title)を変更しています。

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

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffectをマウント時に1回だけ実行する方法

上記のuseEffetctに渡されるコールバック関数を、コンポーネントのマウント時に1回だけ実行するには、第2引数に空の配列を渡します。

useEffect(() => { ... }, []);

useEffectの第2引数に配列を渡すと、マウント時とその要素に変更があった場合にコールバック関数を実行するように動作します。
例えば何らかのidに変更があった場合に、API通信してデータを取得する、などの使い方ができます。

const [id, setId] = useState(0);
useEffect(() => { ... }, [id]); // idに変更があった場合に、コールバック関数を実行する。

まとめ

以上、useEffectをマウント時に1回だけ実行する方法でした。
実際の業務ではuseEffectでAPI通信をすることが多いと思いますが、初回マウント時にAPIから取得したデータを表示する、という要件は多いかと思いますので、ご参考になればと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?