React Hooks（フック）

React 16.8から新機能hook(フック)が導入されました。
まだ、実務では使えてないですが、予習としてまとめを書いていきます。

ステートフック(useState)

今までstateを使う場合は、クラスコンポーネントにする必要がありました。
しかし、useStateフックを使うことで関数コンポーネントのままでもstateが使えるようにできます。

useStateフックの使い方

関数コンポーネント内で以下のように記述すれば、stateを宣言できます。

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

• useStateの引数にはstateの初期値を指定
• useStateの返り値は、「現在のstate」と「stateを更新する関数」

サンプルコード

複数のstateが必要な場合は、以下のようにuseStateを複数回呼ぶことになります。
また、オブジェクトや配列でも保持することが可能です。

import React, { useState } from 'react';

export default function UseStateSample() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({ name: 'Joy', email: '[e-mail]' });

  const handleUserChange = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setUser({ ...user, [name]: value });
  }

  return (
    <div>
      <p>クリック数: {count}回</p>
      <button type="button" onClick={() => setCount(count + 1)}>
        click!!
      </button>

      <p>ユーザー</p>
      <ul>
        <li>名前: {user.name}</li>
        <li>メール: {user.email}</li>
      </ul>
      <div>
        名前:
        <input type="text" value={user.name} name="name" onChange={handleUserChange} />
      </div>
      <div>
        メール:
        <input type="email" value={user.email} name="email" onChange={handleUserChange} />
      </div>
    </div>
  );
}

副作用フック（useEffect）

今まで、クラスコンポーネントを使って以下のような処理を実装していたと思います。

• componentDidMount でAPI実行、イベントを購読、
• componentWillUnmountでイベント購読解除などの後処理

useEffectフックはこういったライフサイクルメソッドを関数コンポーネントで使えるようにするもので、componentDidMount, componentDidUpdate, componentWillUnmountがまとまったものです。
(render後に毎回呼ばれると考えた方がわかりやすいかも。)

useEffectフックの使い方

以下のようにrender後に実行したい処理を定義するだけです。

  useEffect(() => {
    // API実行やイベント購読・解除などの副作用処理を記述
    console.log('--- useEffect実行 ---');
  });

サンプルコード

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

export default function UseEffectSample(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // API実行やイベント購読などの副作用処理を記述
    console.log('--- useEffect実行 その1 ---');
    console.log(count);
  });

  useEffect(() => {
    // API実行やイベント購読・解除などの副作用処理を記述
    console.log('--- useEffect実行 その２ ---');
    console.log(count);
  });

  return (
    <div>
      <button type="button" onClick={() => setCount(count + 1)}>
        更新
      </button>
      {count}
    </div>
  );
}

componentWillUnmountでやっていた後処理はどうすればよいか？

下のサンプルコードのように、useEffect内で、後処理する関数を返せばよい！。
こうすることで、イベント購読・解除のロジックを並べて書くことができます。

export default function UseEffectSample(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // API実行やイベント購読などの副作用処理を記述
    console.log('--- useEffect ---');
    return () => {
      // イベント解除など、後処理
      console.log('--- useEffect cleanup ---');
    };
  });

  return (
    <div>
      <button type="button" onClick={() => setCount(count + 1)}>
        更新
      </button>
      {count}
    </div>
  );
}

useEffectはレンダーされるたびに実行されます。このため、一つ前のレンダー時の処理を次のレンダー時にクリーンアップすることになります。

以上、フックについてのまとめでした。

参考サイト

サンプルコード