React Hooksを理解する

Hooksとは

React はコンポーネント(再利用可能なUI)ベースで構築されるUIライブラリです。コンポーネントには、クラスコンポーネントと関数コンポーネントの2種類があります。
従来、状態管理やライフサイクルメソッド等のReactの機能はクラスコンポーネントでなければ使用できなかった為、クラスコンポーネントで書くことが一般的でした。

ですが、React 16.8（2019 年 2 月リリース）で導入されたReact Hooksにより、関数コンポーネント内でも状態管理等の機能を使用することができるようになりました。

React公式ドキュメントではクラスコンポーネントに比べてコードを簡略化させ、可読性を向上させることができるフックを用いた関数コンポーネントの使用が推奨されています。

フックには種類がありますが、ここでは主に使用されることが多いフックを解説します。（私自身Reactが学習途中である為、ある程度自分の中で理解ができたものから都度追記していきます。）

useState

useStateは、コンポーネントの現在の状態を管理するために使用されるフックです。クラスコンポーネントのthis.stateとthis.setStateと同じ機能を持ちます。

useStateは、配列の分割代入を使用して、状態変数とそれを更新するための関数の2つの要素を持つ配列を返します。状態を更新するたための関数を呼び出すと、指定された新しい状態値に基づいてコンポーネントが再レンダリングされて、新しい状態値が反映されます。

使用例

import React, { useState } from 'react';

const Component = () => {
  const [age, setAge] = useState(30);

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <div>
      <p>Your age is {age} years old</p>
      <input value={age} onChange={handleChange} />
    </div>
  );
}

フックを使用する際は該当のフックをimportする必要があります。
使用例では、ageという状態変数とsetAgeという更新関数で状態を管理しています。ユーザーが入力フィールドに年齢を入力すると、handleChange関数が呼び出され、新しい年齢がsetAge更新関数によってage状態変数にセットされます。

※更新関数は非同期に動作する為、更新関数が呼び出された後、即座に状態が更新されるという訳ではなく、再レンダリングが行われてから新しい状態値がコンポーネント内に反映されます。

useEffect

関数コンポーネント内で副作用を実行することができるHookです。
useEffectは、コンポーネントがレンダリングされた後に実行されます。
また、第二引数に何を指定するかによって実行されるタイミングが異なります。

• 何も指定しない場合
  →レンダリング毎に実行
• 空の配列を指定した場合
  →初回レンダリング時のみ
• 1つ以上の値が指定されている場合
  →渡された値がレンダリング前後で変更がなければ処理をスキップし、再レンダリング後に変更していれば実行