【React】グローバルなstate管理について学ぶ Context

目次

グローバルなstate管理とは？

グローバルなstate管理とは、複数のコンポーネント間で共有される状態（state）を、一箇所で管理することを指します。Reactにおいて、状態は通常、コンポーネント内で管理されますが、複数のコンポーネントで共有する必要がある場合は、それをグローバルな状態として管理する必要があります。

グローバルなstateを管理する方法としては、Context APIやReduxといったライブラリがあります。これらのライブラリを使用することで、一箇所で状態を管理することができます。

グローバルなstate管理のメリット

グローバルなstateを管理することによって、以下のような利点があります。

  • 各コンポーネントで同じ状態を保つことができるため、コンポーネント間での連携が容易になります。
  • コードの重複を減らすことができるため、保守性が向上します。
  • グローバルな状態を一箇所で管理することで、アプリケーションの状態を一元的に把握することができ、デバッグがしやすくなります。

ただし、グローバルな状態を管理することで、コンポーネントの再利用性が低下する可能性があるため、適切に設計する必要があります。また、グローバルな状態を管理することが必要ない場合は、コンポーネント内で状態を管理することが推奨されます。

Contextを使ったグローバルなstate管理の例

グローバルなstateを管理する方法の1つとして、Context APIを使用する方法があります。Context APIは、Reactが提供するライブラリで、グローバルな状態を定義し、その状態にアクセスすることができる仕組みを提供します。

Context APIを使用する場合、以下の手順でグローバルな状態を定義します。

1:createContext()メソッドを使用して、新しいContextオブジェクトを作成します。
import React from 'react';

const MyContext = React.createContext();
2:Contextオブジェクトを使って、Providerコンポーネントを作成します。Providerコンポーネントは、コンポーネントツリー内のすべての子孫コンポーネントに対して、グローバルな状態を提供します。
import React from 'react';

const MyContext = React.createContext();

function MyProvider(props) {
  const [state, setState] = useState("initialState");

  return (
    <MyContext.Provider value={{ state, setState }}>
      {props.children}
    </MyContext.Provider>
  );
}
3:Providerコンポーネントで提供する状態を定義します。上記の例では、useStateフックを使用して状態を定義しています。
4:子コンポーネントでContextを使用する場合は、useContextフックを使用してContextオブジェクトにアクセスします。
import React, { useContext } from 'react';

const MyContext = React.createContext();

function MyComponent() {
  const { state, setState } = useContext(MyContext);

  const handleClick = () => {
    setState("newState");
  }

  return (
    <div>
      <p>State: {state}</p>
      <button onClick={handleClick}>Change State</button>
    </div>
  );
}
5:useContextフックを使用することで、Providerコンポーネントで提供された状態にアクセスできます。上記の例では、MyContextからstateとsetStateを取得しています。また、setStateを使用して状態を更新することができます。

これらの手順によって、グローバルな状態をContext APIを使用して管理することができます。

上記のコード例を使用したReactアプリケーション

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

const MyContext = createContext();

function MyProvider(props) {
  const [state, setState] = useState("initialState");

  return (
    <MyContext.Provider value={{ state, setState }}>
      {props.children}
    </MyContext.Provider>
  );
}

function MyComponent() {
  const { state, setState } = useContext(MyContext);

  const handleClick = () => {
    setState("newState");
  }

  return (
    <div>
      <p>State: {state}</p>
      <button onClick={handleClick}>Change State</button>
    </div>
  );
}

function App() {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
}

export default App;

このアプリケーションでは、MyProviderコンポーネントがグローバルな状態を定義し、MyComponentコンポーネントでその状態にアクセスしています。また、AppコンポーネントでMyProviderコンポーネントをラップして、アプリケーション内のすべてのコンポーネントに対してグローバルな状態を提供しています。

useContextを使うときの注意点

useContextを使用する際には、以下の注意点に留意する必要があります。

  1. createContextで作成したContextオブジェクトを使用するために、必ずProviderでラップする必要があります。
  2. 複数のContextを使用する場合、Providerコンポーネントでラップする順序が大切です。外側のProviderが内側のProviderに渡す値を決定します。
  3. useContextを使用する場合、対応するProviderが存在しない場合にはデフォルト値を提供する必要があります。
  4. useContextを使用する場合、常にコンテキスト値が変更された場合に再レンダリングされることを理解しておく必要があります。必要がない場合は、useMemoやReact.memoを使用してパフォーマンスを向上させることができます。

タイトルとURLをコピーしました