React Hooksを使ったuseContextの実践的な使い方

React Hooksは、React 16.8で導入された機能で、状態管理やライフサイクルメソッドなどをクラスコンポーネントなしで実現することができます。その中でも、useContextは複数のコンポーネント間で状態を共有するために便利なHooksの一つです。

しかし、useContextの使い方については、実践的な例が少なく、初めて使う場合は戸惑うこともあるかもしれません。そこで本記事では、React Hooksを使ったuseContextの実践的な使い方について紹介します。

useContextとは

useContextは、React Hooksの一つで、コンポーネント間で共有するための状態を管理するために使われます。Contextを使うことで、状態をPropsで渡す必要がなくなり、簡潔なコードでコンポーネント間の状態共有が可能になります。

useContextを使った実践的な例

useContextを使った実践的な例として、カウンターアプリケーションを考えてみましょう。以下のような構成で、複数のコンポーネントでカウンターの値を共有します。

- App
  - Counter
  - Display

まず、Counterコンポーネントでカウンターの状態を管理するために、useStateを使います。

import React, { useState } from "react";

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={handleClick}>カウントアップ</button>
      <p>現在のカウント: {count}</p>
    </div>
  );
};

export default Counter;

次に、Displayコンポーネントでカウンターの値を表示するために、useContextを使います。

import React, { useContext } from "react";
import { CountContext } from "./App";

const Display = () => {
  const count = useContext(CountContext);

  return <p>現在のカウント: {count}</p>;
};

export default Display;

ここで、CountContextは、Appコンポーネントで定義します。

import React, { createContext, useState } from "react";
import Counter from "./Counter";
import Display from "./Display";

export const CountContext = createContext();

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

  return (
    <div>
      <CountContext.Provider value={count}>
        <Counter />
        <Display />
      </CountContext.Provider>
    </div>
  );
};

export default App;

ここで、CountContext.Providerで囲まれた部分が、Contextの範囲を定義しています。CountContext.Providerにvalue={count}を指定することで、CountContext内のすべてのコンポーネントで、countの値を使用することができます。

これで、Counterコンポーネントでカウンターの値を増やし、Displayコンポーネントで現在の値を表示することができるようになりました。

まとめ

本記事では、React Hooksの一つであるuseContextを使った実践的な例について紹介しました。useContextを使うことで、複数のコンポーネント間で状態を共有することができます。具体的には、カウンターアプリケーションを例に挙げ、useStateとuseContextを組み合わせて、コンポーネント間の状態共有を実現しました。

今後も、React Hooksを使った実践的な例について、継続的に取り上げていきたいと思います。