React Hooksの基本を初心者向けに解説！メリット・注意点

React Hooks は、Reactのバージョン16.8から導入され、関数コンポーネントの利便性を大幅に向上させました。
これまでクラスコンポーネントでしか行えなかった状態管理やライフサイクルメソッドを、関数コンポーネントでも使えるようになったのです。
これは単なる便利さだけでなく、Reactにおけるコンポーネント設計の新たな方法論を提供しています。

React Hooksの登場により、シンプルで再利用可能なコンポーネントの作成が容易になりました。
状態を持つロジックをコンポーネント間で簡単に共有できるため、コードの整理と理解がしやすくなります。
これにより、コードの保守性や拡張性を向上させることができます。

今回は、React Hooksの基本的な使い方を紹介します。

Reactの基本的なHooks: コンポーネントの基礎

Reactは、基本的なHooksを提供しています。
これらのHooksは、Reactコンポーネントを構築するための基本的な要素となります。
これらを理解し使いこなすことで、あなたのReactアプリケーションは、強力で柔軟性があり、保守が容易なものとなります。

Reactの基本的なHooksには、状態の管理に使われるuseState、副作用を扱うためのuseEffect、計算結果をキャッシュするためのuseMemoなどがあります。
それぞれのHookは、異なる役割を果たし、特定の問題を解決するのに役立ちます。

useEffect

useEffectは、コンポーネントのライフサイクルに関連した副作用を扱ううためのHookです。

では、具体的な例を見てみましょう。

useEffect(() => {
  fetch('https://api.example.com')
    .then(response => response.json())
    .then(data => setData(data));
}, []);

上記の例では、useEffectを使用してAPIからデータを取得する副作用を作成しています。
第2引数の空配列により、この副作用はコンポーネントがマウントされた時に一度だけ実行されます。

このように、useEffectを使うことで、コンポーネントのライフサイクルに関連した副作用を扱うことができるようになります。

useState

useStateは、関数コンポーネント内で状態を持つことができるようにするHookです。

例えば、ボタンをクリックするたびにカウントアップするようなコンポーネントを考えてみましょう。

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

// countの値を増やす関数
const increment = () => setCount(count + 1);

// setCountを使ってcountの値を更新する
<button onClick={increment}>+</button>

上記の例では、useStateを使用して、初期値0のcountという状態を作成し、それを更新するためのsetCountという関数を取得しています。

このように、useStateを使うことで、関数コンポーネント内で状態を持つことができるようになります。

useContext

useContextは、ReactのContext APIを扱うためのHookです。
これを使うと、コンポーネントツリーを通じてデータを共有することができます。

具体的な例を見てみましょう。

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

const UserContext = React.createContext();

function App() {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <div>
        <Header />
        <Main />
      </div>
    </UserContext.Provider>
  );
}

function Header() {
  const { user } = useContext(UserContext);

  return (
    <header>
      <h1>{user.name}</h1>
    </header>
  );
}

上記の例では、UserContextというContextを作成し、Appコンポーネントのuserという状態を共有しています。
これにより、Headerコンポーネントでuserを参照することができるようになります。

そして、Headerコンポーネントでは、useContextを使用してUserContextを参照しています。

このように、useContextを使うことで、コンポーネントツリーを通じてデータを共有することができます。
Props が多重構造になると複雑になってしまいますが、useContextを使うことで、コンポーネント間でデータを簡単に共有することができます。

useState は関数コンポーネント内で状態を持つことができるようにするHookですが、useContextは、コンポーネントツリーを通じてデータを共有することができるようにするHookです。

useMemo

useMemoは、計算結果をキャッシュするためのHookです。
これを使うと、コンポーネントの再レンダリング時に、計算コストの高い関数を実行する必要がなくなります。

const memoizedValue = useMemo(() => {
  // 計算コストの高い関数
  return computeExpensiveValue(a, b);
}, [a, b]);

上記の例では、computeExpensiveValueという計算コストの高い関数を実行し、その結果をmemoizedValueという変数に格納しています。
第2引数の配列には、computeExpensiveValueの計算に使用する値を指定します。

このように、useMemoを使うことで、毎回計算コストの高い関数を実行する必要がなくなり、パフォーマンスを向上させることができます。
初心者のうちは、useMemoを使う機会は少ないかもしれませんが、パフォーマンスを向上させるためには重要なHookです。

useCallback

useCallbackは、関数をメモ化するためのHookです。
これを使うと、コンポーネントの再レンダリング時に、関数を再定義する必要がなくなります。

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

上記の例では、doSomethingという関数をメモ化し、memoizedCallbackという変数に格納しています。
第2引数の配列には、doSomethingの実行に使用する値を指定します。
このように、useCallbackを使うことで、毎回関数を再定義する必要がなくなり、パフォーマンスを向上させることができます。

useMemo と useCallback は、どちらも計算コストの高い関数を実行する際に使用しますが、useMemoは計算結果をキャッシュするためのHookで、useCallbackは関数をメモ化するためのHookです。
混同しやすいHookですが、それぞれの特徴を理解しておきましょう。

カスタムHooks

React Hooksの強力な機能の1つは、自分自身でHooksを作成し、再利用可能なロジックをカプセル化することができる点です。
これらのカスタムHooksは、useというプレフィクスで始まる関数として定義します。

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

  const increment = () => setCount(count + 1);

  return { count, increment };
}

上記の例では、カウンターロジックをカプセル化したuseCounterというカスタムHookを作成しています。

そして、このカスタムHookを使って、以下のようにコンポーネントを作成することができます。

function Counter() {
  const { count, increment } = useCounter();

  return (
    <div>
      <p>count: {count}</p>
      <button onClick={increment}>increment</button>
    </div>
  );
}

このように、カスタムHookを使うことで、ロジックを再利用することができます。

また、カスタムHookは、他のカスタムHookを使って作成することもできます。

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

  const increment = () => setCount(count + 1);

  return { count, increment };
}

function useCounterWithAlert(initialCount = 0) {
  const { count, increment } = useCounter(initialCount);

  const incrementWithAlert = () => {
    increment();
    alert(`count: ${count}`);
  };

  return { count, incrementWithAlert };
}

上記の例では、useCounterというカスタムHookを使って、useCounterWithAlertというカスタムHookを作成しています。

カスタムHookは初心者のうちはあまり使う機会はないかもしれませんが、コンポーネントのロジックを再利用するためには重要な機能です。
カスタムHookを使って、コンポーネントのロジックを再利用することを意識していきましょう。

まとめ

React Hooksは、Reactの機能を拡張するための機能です。

Hooksを使うことで、クラスコンポーネントを使わずに、関数コンポーネントで状態を持つことができるようになります。
また、Hooksを使うことで、関数コンポーネントでライフサイクルメソッドを使うことができるようになります。

Hooksは、useState、useEffect、useContext、useMemo、useCallbackなど、様々な種類があります。
初心者のうちは、useStateとuseEffectを使う機会が多いかもしれませんが、それ以外のHooksも理解しておきましょう。