[React] useEffectの使い方

React HooksのuseEffectを使うことになったので、記事にしてみた。

使い方

第二引数に値を渡す

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

export default function Study() {
  // テスト用に適当に作ったStateをセット
  const [status, setStatus] = useState('クリック前');

  /*
   * 第一引数にcallback関数を入れる
   * 第二引数に指定した値が変更されるたびにcallback関数が呼ばれる
   * ↓の場合は、テスト用Stateの値が変更されるとconsoleにstatusの値が出る
   */
  useEffect(() => {
    console.log('statusの値が' + status + 'に変更されました');
  }, [status]);

  // クリックするとstatusが変更されるボタンを返す
  return (
    <div>
      <button onClick={() => setStatus('クリック後')}>status変更ボタン</button>
    </div>
  );
}

今回、useStateは一度しか呼ばれないと思う。（statusが一度しか変更されないため）
何度も呼び出せるか確認したい場合は以下のサイトで一番上の例が参考になる
https://qiita.com/keiya01/items/fc5c725fed1ec53c24c5

第二引数を空にする

マウント・アンマウント時のみ、callback関数を実行することができる。

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

export default function Study() {
  /*
   * 第一引数にcallback関数を入れる
   * 第二引数に指定した値が変更されるたびにcallback関数が呼ばれる
   */
  useEffect(() => {
    console.log('マウント・アンマウント時だけ実行');
  }, []);

  return <div>テスト</div>;
}