React Hooksとは？メリットや使い方についてまとめてみた

React Hooksの登場によって、これまでのコンポーネント作成方法が大きく変わりました。

Reactアプリケーションでのステート管理やサイドエフェクトの処理が大幅に簡略化され、コードのメンテナンスも楽になり、React自体の学習コストも下がったと言われています。

今回の投稿では、2019年2月に追加されたReact Hooksの知っておきたい内容やさまざまなフック、基本的な使い方についてまとめてみたいと思います。

1 React Hooksとは
- 1.1 React Hooksのメリット
- 1.2 React Hooksを使うときのルール
2 基本的なReact Hooks
3 その他のReact公式フック

React Hooksとは

React HooksはReactのバージョン16.8から追加された機能です。

React HookのuseStateやuseEffect、useContextを中心に、これまでクラスを使わないといけなかったステート管理やライフサイクルメソッドなどが関数コンポーネントでも実装できるようになりました。

React Hooksのメリット

React Hooksができたことで、次のようなメリットがあると言われています。

複雑になりやすいクラスコンポーネントを減らせる（コードを簡潔に保ちやすい）
ラッパー地獄に落ちにくくなる（propsのバケツリレーへの対策）
コンポーネント間でステートを共有しやすくなる
学習コストが下がる（ライフサイクルメソッドを使わなくても同じようなことができる）

React Hooksによってクラスコンポーネントを作る機会が減ったため、全体のコード量が少なくなったり、コードが簡潔に保ちやすくなりました。

React Hooksを使うときのルール

React Hooksを利用するためには、次の２つのルールがあります。

関数コンポーネントで使う（クラスコンポーネントでは使えない）
if文やループ、入れ子になった関数の中で定義できない

基本的なReact Hooks

React Hooksの中でも以下の3つがもっとも代表的。

useState
useEffect
useContext

useState

useStateを使うと、クラスコンポーネントのthis.state.○○やthis.setState({ ○○ })を使わずにステートを扱えるようになります。

useStateの使い方

useStateでは次の2つをセットで使用します。

ステートの値（下のコードではcount）
その値を更新するセッター関数（下のコードではsetCount）

セッター関数はステートの初期値を引数として渡すことが必要。

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

ここではuseStateに初期値として0を渡していますが、ステートの値がテキストの場合にはuseState(”)としたり、別の場合にはuseState(null)とすることもあります。

initialStateという変数を間に挟んで次のように書くこともできます。

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

※ countやsetCountは別の名前でもOK。

useStateでカウンターを作ってみる

useStateでカウンターを作ると下のようなコードになります。

import react, { useState } from "react";

export default () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>ボタンを{count}回クリックしました</p>
      <button onClick={() => setCount(count + 1)}>クリック！</button>
    </div>
  );
};

useEffect

useEffectでは、Reactのライフサイクルメソッドを使わずに、関数コンポーネントのまま、ライフサイクルメソッドと同じようなことができます。

useEffectは次の3つのライフサイクルメソッドがまとまったようなもの。

componentDidMount
componentDidUpdate
componentWillUnmount

また、useLayoutEffectというReact公式フックも同じように機能します。ただ、useLayoutEffectではアプリケーションが遅くなる可能性があり、公式サイトでも、基本的にはuseEffectを使うように推奨しています。

useEffectの使いどころ

Reactアプリケーションが読み込まれたときやコンポーネントのステートの値が変化したときなど、Reactがレンダリングをした後に何か処理を加えたいときに便利。

たとえば初期化のタイミングやタイマー、チェックボックスのOn/Off、コンポーネント内のDOMの操作、HTTPリクエストなど。

useEffectの基本的な使い方

useEffectの基本的な使い方は次のようになります。

// import { useEffect } from 'react'
useEffect(() => {
  // HTTPリクエストなどのサイドエフェクト
  return () => {
    // clean up 関数
    // （componentWillUnmount に書くような処理）
  };
}, []);

useEffectを使ってボタンをクリックしたタイミングでtitleタグの値を更新する場合、コードは次のようになります。

import { useState, useEffect } from "react";

export default () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

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

いつエフェクトを呼び出すか指定するには

useEffectの2番目の引数（上のコードではcount）にステートや関数を配列で渡せば、それらが変更されたタイミングでエフェクトを呼び出すことができます。

ちなみにuseEffectの第２引数は配列なので複数の要素を渡せます。また、配列の中を空にすることもできます。

もし第２引数に何も渡さないと、更新のタイミングで毎回エフェクトが呼び出されてしまうので注意が必要です。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

最初の読み込み時のみエフェクトを呼び出すには

最初の読み込みのみエフェクトを呼び出したいときは、依存配列の中身を空にしておけば大丈夫です。

こうすれば他のレンダリング時に呼び出されないので、初期化するときに便利。

useEffect(() => {
  console.log('読み込み完了')
}, []);

マウントを解除したときの処理を追加するには

useEffectでは、ライフサイクルメソッドのcomponentWillUnmountと同じような処理を追加できます。

これも方法は簡単で、useEffectの中で次のようにreturnを使えば大丈夫です。

useEffect(() => {
  console.log('読み込み完了')
  return () => {
    console.log('マウント解除')
  }
}, []);

マウントを解除したときの処理には、たとえばsetIntervalをReactで使ったときにセットで使うclearIntervalなどを書いたりします。

これまではclearIntervalをcomponentWillUnmountで書くことが多かったと思うが、useEffectでcomponentWillUnmountを使わなくてもよくなりました。

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

export default () => {
  const [timer, setTimer] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTimer((timer) => timer + 1);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, [timer]);

  return <p>Timer: {timer}</p>;
};

useContext

Reactアプリケーションでステートを共有しようとすると、propsをバケツリレーするためにラッパー地獄に落ちてしまうことがありましたが、useContextを使えば地獄に落ちずにステートやデータを共有しやすくなります。

useContextの使いどころ

ひとつの場所でステートの管理をしたいけど、Reduxを使うほど規模の大きいプロジェクトではないときにも使われています。

アプリケーション全体で使いまわしたいテーマなどのスタイル関係や、認証機能の実装などに便利です。

ダークモードとライトモードを切り替える機能を実装してみる

ここではuseContextの使い方として、コンテクストを使ってダークモードとライトモードを切り替える機能を実装してみましょう。

まずはcreateContext()

useContextフックでコンテクストにアクセスするには、createContextを使います。

crateContextはコンテクストオブジェクト（ここではthemes）を受け取り、その時点のコンテクスト（ThemeContext）を返してくれます。

import React from "react";
import { useState, useContext } from "react";

const themes = {
  light: {
    color: "#222",
    backgroundColor: "#eee",
  },
  dark: {
    color: "#ddd",
    backgroundColor: "#333",
  },
};

export const ThemeContext = React.createContext(themes.dark);

AppコンポーネントをProviderで囲む

アプリケーション全体でthemesコンテクストを利用するために、ThemeContext.ProviderでAppコンポーネントを囲みます。

Material UI のThemingで利用する<MuiThemeProvider theme={theme}>と同じような感じ。

import { ThemeContext } from './ThemeContext';

const App = () => {
  return (
    <ThemeContext.Provider value={themes.dark}>
      // ...
    </ThemeContext.Provider>
  );
};

コンテクストを利用する

コンポーネントでコンテクストを使うにはuseContextやThemeContext.Consumerを利用します。

ThemeContext.Consumerだとreturnブロックの中でしか使えないのと、個人的にはuseContextの方が使いやすいと思うので、ここではuseContextでデモ用のコンポーネント（LoremIpsum）を作成してみます。

import { useContext } from "react";
import { ThemeContext } from './ThemeContext';

const LoremIpsum = () => {
  const theme = useContext(ThemeContext);
  return (
    <div style={{ backgroundColor: theme.backgroundColor }}>
      <p style={{ color: theme.color }}>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo,
        quis!
      </p>
    </div>
  );
};

ちなみに先ほどのコードでvalue={themes.dark}と指定したので、themeオブジェクトにはダークモード用の配色がオブジェクト形式で入っている状態です。

ここまでのコードをまとめると

ここまでのコードをまとめると、下のようになります。

これでダークモードとライトモードを切り替える機能の完成。

import React, { useState, useContext } from "react";

const themes = {
  light: {
    color: "#222",
    backgroundColor: "#eee",
  },
  dark: {
    color: "#ddd",
    backgroundColor: "#333",
  },
};

export const ThemeContext = React.createContext(themes.dark);

const LoremIpsum = () => {
  const theme = useContext(ThemeContext);
  return (
    <p style={{ color: theme.color, backgroundColor: theme.backgroundColor }}>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo, quis!
    </p>
  );
};

const App = () => {
  const [isDark, setDark] = useState(true);
  const currentTheme = isDark ? "dark" : "light";

  return (
    <ThemeContext.Provider value={themes[currentTheme]}>
      <LoremIpsum />
      <button onClick={() => setDark(!isDark)}>テーマカラーを変更</button>
    </ThemeContext.Provider>
  );
};
export default App;

その他のReact公式フック

ここまで3つの代表的なReactを紹介してきましたが、それ以外にも次のようなフックがReactから提供されています。

useRef
useReducer
useMemo
useCallback
useLayoutEffect
useDebugValue

useRef

useRefを使用すると、React要素やrenderメソッドで生成されたDOMノードにアクセスできます。

よくあるのが要素のフォーカスなど、実際のDOMへのアクセスが必要なときに役に立ちます。

const textInput = useRef(initialValue);

useRefの使用例

下のコードでは、ボタンをクリックしたときに入力フォームにフォーカスします。

import React, { useRef } from "react";

export default () => {
  const textInput = useRef(null);
  const focusInput = () => textInput.current.focus()

  return (
    <div className="App">
      <input type="text" ref={textInput} />
      <button onClick={focusInput}>Inputの内容を編集する</button>
    </div>
  );
};

createRefを使って書き直すと

上のコードはuseRefを使って書きましたが、createRefを使うと次のように書くことができます。

import React, { createRef } from "react";

export default () => {
  const textInput = createRef();
  const focusInput = () => textInput.current.focus();
  return (
    <div className="App">
      <input type="text" ref={textInput} />
      <button onClick={focusInput}>Inputの内容を編集する</button>
    </div>
  );
}

createRefとの違い

useRefもcreateRefと同じようなことができます。ただ、createRef（useRefより前のバージョン16.3から追加）はすべてのレンダリングで新しい参照を返すのに対して、useRefは毎回同じ参照を返します。

なので、useRefではコンポーネントが再びレンダリングされても.currentに同じ値を保持できます。

useMemo

useMemoは指定した関数をレンダリングごとに呼び出さないようにしてくれるフックです。

useMemoは最初のレンダリングで一度だけ計算を実行し、他のすべてのレンダリングではキャッシュされた値を返してくれます。そのため、通常は計算量が膨大になる関数の最適化のために使われます。

ただ、気軽に使って逆にパフォーマンスを落としてしまう可能性もあるので、必要に迫られたら使うくらいの感覚で良いかも。

雰囲気で使わない React hooks の useCallback/useMemo

useMemoの使い方

useMemoはuseEffectやuseCallbackと同じように、アロー関数の中で使いたい関数を呼び出します。

もしuseMemoに渡す関数が引数を受け取る場合には、配列（依存配列）の中に使いたい引数を含めれば大丈夫です。

// import { useMemo } from 'react';
const example = useMemo(() => expensiveCalculation(a), [a]);

依存配列（引数）は空にしてもいいし、複数入れてもOKです。

const example = useMemo(() => expensiveCalculation(a, b), [a, b]);

また、React.memoを使うと、ライフサイクルメソッドのshouldComponentUpdateを実現できます。

useCallback

useCallbackは、依存配列を渡すことで必要のないレンダリングを防いでくれる、React公式のフックです。

useMemoとuseCallbackの違い

useMemoは値を、useCallbackはコールバック関数を返す

useMemoとuseCallbackは目的や使い方など似ているところもありますが、useCallbackは値ではなくメモ化されたコールバック関数が返されます。

そのため、膨大な計算処理が必要なときには、useCallbackよりも値をキャッシュしてくれるuseMemoを使ったほうが効率的です。

useCallbackは依存配列の要素が変更されるとレンダリング

useCallbackもuseMemoも依存配列に要素を渡しますが、useCallbackはuseMemoと違って、依存配列の要素が変更されたタイミングで再レンダリングされてコールバック関数を返します。

useCallbackの使い方

useCallbackはuseEffectやuseMemoと同じように、インラインでコールバック関数を渡します。

// import { useCallback } from 'react'
const example = useCallback(() => expensiveCalculation(a, b), [a, b]);

引数がなくてもuseCallbackには依存配列は必要

useCallbackはuseEffect同じように、配列を渡さないと呼び出しのたびに新しい値が返ってきてしまいます。

なので、useCallbackでメモ化されたコールバックで引数を使わなかったとしても、空の配列を渡す必要があります。

const example = useCallback(() => expensiveCalculation(), []);

useLayoutEffect

useLayoutEffectはuseEffectと同じように機能します。
シグネチャーが同じなので、引数や返り値、例外、利用可能性の情報（publicやstaticなど）といった入力と出力が同じになります。

useEffectやuseLayoutEffectが対応するライフサイクルメソッドとしては、次のようになります。

componentDidMount
componentDidUpdate
componentWillUnmount

useLayoutEffectの使いどころ

useLayoutEffectの場合にはコールバック関数が完了するのを待ってからレンダリングされるので、useEffectを使ったほうが高速になります。

公式サイトでも、まずはuseEffectを利用するように推奨しています。

画面のちらつきが気になる場合にはuseLayoutEffectを

useLayoutEffectとuseEffectは処理のタイミングが違うので、もしuseEffectでちらつきが起きてしまう場合には、useLayoutEffectを試してみると収まるかもしれません。

useEffectとuseLayoutEffectの違い

useEffectとuseLayoutEffectは、次のように処理のタイミングが違います。

useLayoutEffectはすべてのDOMの変更後に、同期的にコールバック関数が実行されます。

useEffectの場合

useEffectの場合には、useEffectの実行を待たずに画面がレンダリングされます。

コンポーネントをレンダリング
画面を更新
useEffectを実行

useLayoutEffectの場合

useLayoutEffectの場合には、コールバック関数が完了するのを待ってからレンダリングされます。

コンポーネントをレンダリング
useLayoutEffectを実行
画面を更新（ReactはuseLayoutEffectが終了するのを待ってから画面を更新）

useLayoutEffectの基本的な使い方

useLayoutEffectの基本的な使い方は次のようになります。

// import { useLayoutEffect } from 'react'
useLayoutEffect(() => {
  // HTTPリクエストなどのサイドエフェクト
  return () => {
    // clean up 関数
    // （componentWillUnmount に書くような処理）
  };
}, []);

useDebugValue

useDebugValueはカスタムフックをReact Developer Tools（Chrome拡張機能）に表示させることができます。

useDebugValueの基本的な使い方

useDebugValueはカスタムフックの中で表示したい値をuseDebugValueに渡します。

// import { useDebugValue } from 'react';

useDebugValue(value);