React 副作用フック useEffect の使い方（実演コード付き）

こんにちは。

Reactの副作用フックは、React 16.8 で追加された新機能です。

この useEffect の理解に少し困ったのでその辺りの経験談を交えて紹介したいと思います。

state などの React の機能を、クラスを書かずに使えるようになりました。

useEffectとは

useEffect に渡された関数は、レンダーの結果が画面に反映された後に動作します。

つまり、レンダー後に発火させたいイベントを記述する場所と考えることができます。

また、チュートリアルによるとこれまでクラスコンポーネントで使っていたライフサイクルの下記の３つ

• componentDidMount
• componentDidUpdate
• componentWillUnmount

これらをまとめたものが useEffect となります。

useEffect は、状態変数の代入やDOMの書き換え、API通信などの副作用の処理を関数コンポーネントで実装できるようにしたものです。

useEffectのサンプルコード

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

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

  useEffect(() => {
    document.title = `${count}回クリックしました`;
  });

  return (
    <div>
      <p>{count}回クリックしました</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

上の例は「React ステートフック useState の使い方」で紹介したコードに useEffect を追加したコードになっています。

onClick={() => setCount(count + 1)} でクリックイベント後、状態変数 count が変化し、{count}回クリックしました の {count} が再度レンダーされています。

このレンダーされたタイミングで useEffect が発火するというロジックになっています。

この例ではクリックの度に document.title が更新されるということになります。

CDNからReactをインポートしている場合

useEffect のインポート方法が次のようになります。

const { useState, useEffect } = React

WordPressで利用する場合

wp.element からインポートします。

const { useState, useEffect } = wp.element

クラスコンポーネントのサンプルコード

次の例はクラスコンポーネントで実装した例です。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    document.title = `${this.state.count}回クリックしました`;
  }
  componentDidUpdate() {
    document.title = `${this.state.count}回クリックしました`;
  }

  render() {
    return (
      <div>
        <p>{this.state.count}回クリックしました</p>
        <button onClick={() => this.setState({count: this.state.count + 1})}>
          Click me
        </button>
      </div>
    )
  }
}
ReactDOM.render(<App/>, document.getElementById('root'));

クラスコンポーネントの場合

副作用はReactがDOMを更新したあとに発火するようにするため、componentDidMount と componentDidUpdate を実装します。

DOMに変更がかかったタイミングで document.title を更新しています。

検証