React HooksのuseContextでグローバルステートを管理する方法

Reactにおいて、コンポーネント間でデータの受け渡しが必要になった場合、通常はpropsを利用して親から子コンポーネントに渡していきます。しかし、コンポーネントが多くなってくると、親から孫、ひ孫と渡していくことになり、管理が複雑になってしまいます。

こうした場合に役立つのが、React HooksのuseContextです。useContextを使えば、グローバルステートを簡単に管理することができます。

まず、グローバルステートを管理するためのContextを作成します。以下の例では、ThemeContextというContextを作成しています。

import React from 'react';

const ThemeContext = React.createContext();

export default ThemeContext;

次に、グローバルステートを利用したいコンポーネント内で、useContextを使ってグローバルステートを取得します。

import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function SomeComponent() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <div>
      <p>{theme}</p>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  );
}

export default SomeComponent;

このようにすることで、ThemeContext内で定義したグローバルステートであるthemeとsetThemeを、SomeComponent内で利用することができます。

また、グローバルステートを変更したい場合は、setThemeなどのsetter関数を呼び出して値を変更することができます。

以上が、React HooksのuseContextを使ったグローバルステートの管理方法です。コンポーネント間でデータを受け渡す際に、propsを使うだけではなく、useContextを使ってグローバルステートを管理する方法を覚えておくと便利です。