MENU
  1. ホーム
  2. React
  3. ReactのuseContextフックを使った値の簡単取得方法を徹底解説

ReactのuseContextフックを使った値の簡単取得方法を徹底解説

React

Reactでの状態管理において、useContextフックはデータ共有を簡単にするための非常に便利なツールです。従来の状態管理ツールやプロパティのバケツリレー（プロップスドリリング）を回避し、必要なデータを効率的に取得できます。本記事では、useContextフックの基本的な仕組みから応用的な使い方まで、実際のコード例を交えてわかりやすく解説します。初心者の方でも理解できるように丁寧に説明するので、React開発のスキルをさらに向上させましょう。

目次

useContextフックの概要と基本的な使い方


ReactのuseContextフックは、Context APIと組み合わせて使用することで、コンポーネントツリー内のデータを効率的に取得するための仕組みを提供します。通常、データを親から子へ渡すプロップスの手法では、深いツリー構造を持つアプリケーションでは管理が煩雑になります。この問題を解決するのがContext APIと、それを簡単に操作できるuseContextフックです。

useContextフックの仕組み


useContextフックは、Contextオブジェクトを引数に取って、そのContextに保存されている値を直接取得します。この仕組みにより、ツリー全体をまたぐデータの受け渡しが不要になり、コードの可読性と保守性が向上します。

基本的な使い方


以下は、useContextフックを使うための基本的な例です。

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

// Contextの作成
const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = useContext(ThemeContext); // Contextの値を取得
  return <button style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Theme</button>;
}

コードの流れ

  1. createContextで新しいContextオブジェクトを作成します。
  2. ThemeContext.Providerで値（この例では"dark"）をツリー内の子コンポーネントに供給します。
  3. 子コンポーネントThemedButton内でuseContext(ThemeContext)を使用し、Contextの値を直接取得します。

このように、useContextフックはコードを簡潔にし、ツリー構造が深くても効率的にデータを管理できる強力なツールです。

useContextを使うためのContextの作成方法

useContextフックを使用するには、まずContextオブジェクトを作成する必要があります。Contextオブジェクトは、ReactのcreateContext関数を使って生成され、アプリケーション内でデータを共有するための仕組みを提供します。

Contextオブジェクトの作成


以下のように、createContext関数を使用してContextオブジェクトを作成します。

import React, { createContext } from 'react';

// Contextの作成
const UserContext = createContext(null);

export default UserContext;

ここでは、UserContextという名前のContextを作成しました。このContextは、アプリケーション内で任意の値を共有するために使用されます。

Contextの値を供給する


作成したContextを使用するには、Providerコンポーネントを使います。このコンポーネントは、Contextの値をコンポーネントツリー内の子コンポーネントに供給します。

import React from 'react';
import UserContext from './UserContext';

function App() {
  const user = { name: 'Alice', age: 25 };

  return (
    <UserContext.Provider value={user}>
      <Dashboard />
    </UserContext.Provider>
  );
}

Providerコンポーネントのvalue属性に共有したい値を設定します。この例では、ユーザー情報のオブジェクト{ name: 'Alice', age: 25 }を供給しています。

Contextを消費する準備


子コンポーネントでuseContextフックを使うことで、Providerから供給された値を簡単に取得できます。

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

function Dashboard() {
  const user = useContext(UserContext);

  return (
    <div>
      <h1>Welcome, {user.name}!</h1>
      <p>Age: {user.age}</p>
    </div>
  );
}

ポイント

  1. createContextでContextオブジェクトを作成します。
  2. Providerを使用して値を供給します。
  3. 子コンポーネントでuseContextを使用して値を取得します。

これにより、データを簡単に共有でき、プロップスを介したバケツリレーのような煩雑なコードを避けられます。

useContextフックの活用例

useContextフックは、Reactアプリケーションで状態やデータを簡単に共有できる便利なツールです。ここでは、実際のアプリケーションでよく使われるシナリオに基づいて、useContextの活用例を解説します。

活用例 1: ユーザー認証の管理


ユーザーのログイン情報をアプリ全体で共有するためにuseContextを利用します。

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

// Contextの作成
const AuthContext = createContext();

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = (userData) => {
    setUser(userData);
  };

  const logout = () => {
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

function Navbar() {
  const { user, logout } = useContext(AuthContext);

  return (
    <nav>
      {user ? (
        <>
          <span>Welcome, {user.name}!</span>
          <button onClick={logout}>Logout</button>
        </>
      ) : (
        <span>Please log in</span>
      )}
    </nav>
  );
}

function App() {
  return (
    <AuthProvider>
      <Navbar />
    </AuthProvider>
  );
}

この例では、AuthContextを作成して認証情報を管理しています。useContextを使って、Navbarコンポーネントで現在のユーザー情報を取得し、ログアウト機能を実装しています。

活用例 2: テーマ切り替え機能


アプリ全体でダークモードやライトモードを切り替えるテーマ設定にuseContextを利用します。

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

// Contextの作成
const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button
      style={{
        backgroundColor: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff',
      }}
      onClick={toggleTheme}
    >
      Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
    </button>
  );
}

function App() {
  return (
    <ThemeProvider>
      <ThemedButton />
    </ThemeProvider>
  );
}

この例では、ThemeContextを作成し、テーマを管理しています。useContextを使用することで、テーマの値と切り替え機能をThemedButtonコンポーネントで簡単に利用しています。

活用のポイント

  • useContextは、設定や状態などのグローバルなデータを効率的に管理できます。
  • 必要に応じてカスタムフックを作成し、再利用可能なコードを作るとさらに便利です。
  • 状態のスコープを明確にすることで、アプリケーションの設計がより直感的になります。

これらの例を参考に、あなたのアプリケーションでuseContextを活用してみてください。

コンポーネント間でのデータ共有の効率化

Reactアプリケーションでは、コンポーネント間でデータを共有する場面が多くあります。従来は親子間でプロパティ（props）を渡す方法が一般的でしたが、ツリーが深くなるにつれてコードが煩雑になります。useContextフックを使うことで、データ共有を効率化し、コードの保守性を向上させることが可能です。

プロップスドリリングを回避する


プロップスドリリングとは、必要なデータをコンポーネントツリーの深い階層まで渡すために、中間のコンポーネントにプロップスをバケツリレーのように受け渡す方法です。この方法は、コードが冗長になり、意図しない副作用を引き起こす可能性があります。

以下は、useContextを使うことでプロップスドリリングを回避する例です。

従来のプロップスドリリングの例

function App() {
  const user = { name: 'Alice', age: 25 };

  return <Parent user={user} />;
}

function Parent({ user }) {
  return <Child user={user} />;
}

function Child({ user }) {
  return <GrandChild user={user} />;
}

function GrandChild({ user }) {
  return <div>Hello, {user.name}!</div>;
}

この例では、データを各コンポーネントで受け取り、次のコンポーネントに渡す必要があります。

useContextを使った効率的なデータ共有

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

const UserContext = createContext();

function App() {
  const user = { name: 'Alice', age: 25 };

  return (
    <UserContext.Provider value={user}>
      <GrandChild />
    </UserContext.Provider>
  );
}

function GrandChild() {
  const user = useContext(UserContext);
  return <div>Hello, {user.name}!</div>;
}

この例では、データを中間のコンポーネントで渡す必要がなく、GrandChildが直接UserContextからデータを取得しています。

useContextでの効率化の利点

  1. 簡潔なコード: 中間のコンポーネントを介さずにデータを取得できるため、コードがスッキリします。
  2. 可読性の向上: データの流れが明確になるため、他の開発者がコードを理解しやすくなります。
  3. 保守性の向上: コンポーネントツリーの構造が変わったとしても、データ共有部分を修正する必要がありません。

応用例: ユーザー情報の共有


複数のコンポーネントがユーザー情報を使用する場合、useContextを使うことで全てのコンポーネントが同じデータにアクセスできます。

function UserProfile() {
  const user = useContext(UserContext);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Age: {user.age}</p>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <UserProfile />
    </div>
  );
}

このように、アプリ全体で共有する必要があるデータを効率的に管理する方法として、useContextは非常に強力なツールです。

useContextの注意点とよくある問題

useContextフックはReactでデータ共有を効率化する便利なツールですが、いくつかの注意点や落とし穴があります。これらを理解しておくことで、よりスムーズにuseContextを活用できます。

注意点

1. Contextの過剰利用に注意


useContextは、適切な範囲で使用する必要があります。すべての状態をContextで管理しようとすると、コードが複雑になり、パフォーマンスに影響を及ぼす可能性があります。以下のケースでは、useContextよりも他の方法が適している場合があります：

  • コンポーネント間でのデータ共有が不要な場合。
  • 高頻度で更新されるデータをContextで管理する場合（例：アニメーションやリアルタイムデータ）。

2. Contextの値変更による再レンダリング


Contextの値が更新されると、Contextを利用しているすべてのコンポーネントが再レンダリングされます。これが意図しないパフォーマンス問題を引き起こすことがあります。

対策として、Contextの値を分割し、必要な部分だけを変更するよう設計することが推奨されます。

const ThemeContext = createContext();
const UserContext = createContext();

これにより、テーマ変更とユーザー情報更新を分離できます。

3. 複数のContextのネスト


複数のContextをネストして使用すると、コードが読みづらくなることがあります。

function Component() {
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);

  return (
    <div style={{ color: theme.color }}>
      Hello, {user.name}!
    </div>
  );
}

必要に応じてカスタムフックを作成してContextの使用を簡潔にすることができます。

function useAppContext() {
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);
  return { theme, user };
}

function Component() {
  const { theme, user } = useAppContext();
  return (
    <div style={{ color: theme.color }}>
      Hello, {user.name}!
    </div>
  );
}

よくある問題

1. Providerを忘れる


useContextを使用する際に、Providerコンポーネントを忘れると以下のようなエラーが発生します：

Uncaught TypeError: Cannot read properties of null (reading 'value')

必ず、ProviderでContextの値を供給することを確認してください。

2. 初期値の誤解


createContextの初期値は、Providerが存在しない場合のデフォルト値としてのみ機能します。以下のようにProviderを設定しない場合にのみ適用されます。

const UserContext = createContext({ name: 'Guest' });

function Component() {
  const user = useContext(UserContext);
  console.log(user.name); // Guest
}

3. 不要な依存によるパフォーマンス低下


Contextの値に大きなデータや頻繁に変化するデータを直接設定すると、再レンダリングの負荷が高くなります。必要に応じてメモ化（useMemoやuseCallback）を利用し、値の更新を最小限に抑えます。

const value = useMemo(() => ({ theme, toggleTheme }), [theme]);
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;

ポイントまとめ

  • Contextの適切なスコープを意識し、過剰利用を避ける。
  • 必要に応じてContextを分割し、パフォーマンスを考慮する。
  • カスタムフックを作成してコードの読みやすさを向上させる。
  • Contextの値をメモ化し、不必要な再レンダリングを防ぐ。

これらのポイントを踏まえることで、useContextをより効果的に利用できます。

useContextとReduxやuseReducerの比較

Reactの状態管理にはさまざまな方法がありますが、useContext、useReducer、そして外部ライブラリのReduxは、それぞれ異なる強みを持っています。ここでは、それらの違いを比較し、どのような場面で使い分けるべきかを解説します。

useContextの特徴

useContextは、軽量で簡単に状態を共有できるツールです。小規模なアプリケーションや、特定のデータを効率的に共有したい場合に適しています。

利点

  • プロバイダーとコンシューマーのシンプルな設計。
  • 小規模な状態管理に適しており、セットアップが簡単。
  • React標準機能として提供されているため、外部ライブラリ不要。

欠点

  • Contextの値が更新されると、ツリー全体が再レンダリングされる可能性がある。
  • 状態が複雑になると、構造の管理が難しくなる。

useReducerの特徴

useReducerは、useStateよりも複雑な状態ロジックを管理する際に便利です。ローカルな状態管理での利用が主に想定されています。

利点

  • 状態の更新ロジックを一箇所にまとめられるため、管理が容易。
  • アクションタイプとリデューサーを用いた、より予測可能な状態遷移が可能。
  • コンポーネントローカルで使用できるため、スコープが明確。

欠点

  • グローバルな状態管理には不向き。
  • Reduxほどのエコシステムや開発者ツールが提供されていない。

Reduxの特徴

Reduxは、アプリケーション全体の状態を一元管理するための外部ライブラリです。中規模から大規模なアプリケーションでの利用に適しています。

利点

  • 状態の一元管理により、デバッグやトラブルシューティングが容易。
  • ミドルウェアや開発者ツールを活用した拡張性の高いアーキテクチャ。
  • イベントドリブンなアクションディスパッチの仕組み。

欠点

  • セットアップや初期学習コストが高い。
  • シンプルなアプリケーションでは過剰設計になり得る。
  • ボイラープレートコードが多くなる。

比較表

特徴useContextuseReducerRedux
利用範囲小規模〜中規模アプリケーションコンポーネントローカルの状態管理中規模〜大規模アプリケーション
セットアップ非常に簡単簡単複雑
状態の複雑さ簡単な状態に最適中程度の複雑なロジックに対応高度な状態管理が可能
再レンダリングContext値の変更でツリー全体が再描画必要な部分のみ再描画最適化が容易
デバッグツール標準のReactツールで対応可能標準のReactツールで対応可能専用のRedux開発者ツールあり

使い分けのポイント

  • 小規模な状態管理: useContextを利用し、シンプルなデータ共有を実現します。
  • 複雑なロジックが必要な場合: useReducerを活用して、コンポーネント内での状態遷移を整理します。
  • グローバルな状態管理が必要な場合: Reduxを選択し、状態の一元化と拡張性を確保します。

例: 状況に応じた選択

  • テーマ切り替え（シンプルな状態管理）: useContextが最適。
  • フォームのバリデーション（複雑な状態遷移）: useReducerを使用。
  • 認証情報やAPIデータの管理（グローバル状態管理）: Reduxの使用を検討。

Reactアプリケーションに最適な状態管理方法を選び、効率的に開発を進めましょう。

useContextの応用的な利用シナリオ

useContextは、シンプルなデータ共有だけでなく、応用的な利用シナリオでも強力なツールです。ここでは、より高度な使い方として、複雑なアプリケーションにおける実践的な例を解説します。

シナリオ 1: 複数のContextを組み合わせる

アプリケーションで複数の状態（例: テーマ、認証情報）を管理する際に、それぞれのContextを分離して効率的に利用できます。

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

// 複数のContext作成
const ThemeContext = createContext();
const AuthContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');
  const [user, setUser] = useState(null);

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <AuthContext.Provider value={{ user, setUser }}>
        <Main />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

function Main() {
  const { theme, setTheme } = useContext(ThemeContext);
  const { user, setUser } = useContext(AuthContext);

  return (
    <div>
      <h1>Theme: {theme}</h1>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
      <h2>{user ? `Hello, ${user.name}` : 'Please Log In'}</h2>
      <button onClick={() => setUser({ name: 'Alice' })}>
        Log In as Alice
      </button>
    </div>
  );
}

この例では、テーマと認証情報を個別のContextで管理し、それぞれを必要なコンポーネントで利用しています。

シナリオ 2: カスタムフックでContextの使用を簡略化

複数のコンポーネントで同じContextを利用する場合、カスタムフックを作成するとコードが簡潔になります。

// カスタムフックを作成
function useTheme() {
  return useContext(ThemeContext);
}

function useAuth() {
  return useContext(AuthContext);
}

function Header() {
  const { theme } = useTheme();
  return <header style={{ background: theme === 'dark' ? '#333' : '#fff' }}>Header</header>;
}

function Footer() {
  const { user } = useAuth();
  return <footer>{user ? `Logged in as ${user.name}` : 'Guest'}</footer>;
}

カスタムフックを使用することで、useContextの記述を統一でき、再利用性が向上します。

シナリオ 3: Contextで非同期データを管理

非同期データ（例: APIレスポンス）をContextで管理すると、データの共有が効率的になります。

const DataContext = createContext();

function DataProvider({ children }) {
  const [data, setData] = useState(null);

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  };

  return (
    <DataContext.Provider value={{ data, fetchData }}>
      {children}
    </DataContext.Provider>
  );
}

function DataConsumer() {
  const { data, fetchData } = useContext(DataContext);

  return (
    <div>
      <button onClick={fetchData}>Load Data</button>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

function App() {
  return (
    <DataProvider>
      <DataConsumer />
    </DataProvider>
  );
}

この例では、非同期処理の結果をContextで管理し、必要なコンポーネントから利用できるようにしています。

シナリオ 4: Contextを用いた国際化対応

アプリケーションの国際化対応にuseContextを活用できます。

const LocaleContext = createContext();

function LocaleProvider({ children }) {
  const [locale, setLocale] = useState('en');
  const translations = {
    en: { greeting: 'Hello' },
    es: { greeting: 'Hola' },
  };

  const t = (key) => translations[locale][key];

  return (
    <LocaleContext.Provider value={{ locale, setLocale, t }}>
      {children}
    </LocaleContext.Provider>
  );
}

function Greeting() {
  const { t } = useContext(LocaleContext);
  return <h1>{t('greeting')}</h1>;
}

function App() {
  return (
    <LocaleProvider>
      <Greeting />
    </LocaleProvider>
  );
}

この例では、言語設定や翻訳関数をContextで管理し、どのコンポーネントからでも利用できるようにしています。

応用ポイント

  • 複数のContextを分けて設計し、適切なスコープを保つ。
  • カスタムフックを活用して、Contextの操作を簡潔にする。
  • 非同期処理や多言語対応など、高度な要件にも柔軟に対応。

これらの応用例を活用することで、より柔軟で効率的なReactアプリケーションを構築できます。

コード例で学ぶuseContextのベストプラクティス

useContextを使った状態管理を効率化するためには、ベストプラクティスを意識することが重要です。ここでは、具体的なコード例を通じて、現場で役立つuseContextの活用法を解説します。

1. Contextを分割して再レンダリングを最小化

Contextの値が更新されると、すべての消費側コンポーネントが再レンダリングされます。これを防ぐため、状態を複数のContextに分割して管理することが推奨されます。

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

// 状態を分割して管理
const ThemeContext = createContext();
const UserContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');
  const [user, setUser] = useState({ name: 'Alice' });

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <UserContext.Provider value={{ user, setUser }}>
        <Dashboard />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

function Dashboard() {
  const { theme } = useContext(ThemeContext);
  const { user } = useContext(UserContext);

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      Welcome, {user.name}!
    </div>
  );
}

ポイント: 状態を分割することで、themeの変更がuserを利用するコンポーネントに影響を与えません。

2. デフォルト値を慎重に設定する

createContextに渡すデフォルト値は、Providerがない場合にのみ使用されます。実際のアプリケーションでは、通常Providerを使用するため、デフォルト値は基本的にnullまたは適切な型を設定します。

const AuthContext = createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = (name) => setUser({ name });
  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

function Navbar() {
  const auth = useContext(AuthContext);
  if (!auth) throw new Error('AuthContext.Provider is missing');

  return (
    <nav>
      {auth.user ? `Logged in as ${auth.user.name}` : 'Guest'}
    </nav>
  );
}

ポイント: 必要な場合、useContextを呼び出したときにProviderが見つからない状況をエラーハンドリングで検出します。

3. Contextとカスタムフックを組み合わせる

Contextを直接利用せず、カスタムフックを介して利用することで、コードの再利用性と可読性が向上します。

function useAuth() {
  const context = useContext(AuthContext);
  if (!context) throw new Error('useAuth must be used within an AuthProvider');
  return context;
}

function Profile() {
  const { user, logout } = useAuth();

  return (
    <div>
      {user ? (
        <>
          <p>Welcome, {user.name}!</p>
          <button onClick={logout}>Logout</button>
        </>
      ) : (
        <p>Please log in</p>
      )}
    </div>
  );
}

ポイント: カスタムフックを使うことで、Contextの消費ロジックを統一できます。

4. useMemoを使ってContextの値をメモ化

頻繁に更新されるデータをContextで管理する場合、useMemoを使って値をメモ化することで不要な再レンダリングを防ぎます。

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const value = React.useMemo(() => ({ theme, setTheme }), [theme]);

  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

ポイント: useMemoを使うことで、コンポーネントツリーのパフォーマンスを最適化できます。

5. テスト可能性を高める設計

useContextを使用する際も、テストを考慮した設計が重要です。Contextプロバイダーをモックすることで、簡単にテスト可能なコードを書けます。

function MockProvider({ children, mockValue }) {
  return <AuthContext.Provider value={mockValue}>{children}</AuthContext.Provider>;
}

// テスト例
it('renders user name when logged in', () => {
  const mockValue = { user: { name: 'Alice' }, login: jest.fn(), logout: jest.fn() };
  render(
    <MockProvider mockValue={mockValue}>
      <Profile />
    </MockProvider>
  );
  expect(screen.getByText('Welcome, Alice!')).toBeInTheDocument();
});

ポイント: Contextのプロバイダーを柔軟に切り替えることで、テストが容易になります。

まとめ

  • Contextを分割して再レンダリングを最小化する。
  • デフォルト値を適切に設定し、エラーハンドリングを取り入れる。
  • カスタムフックを活用してContextの利用を簡素化する。
  • useMemoで最適化し、パフォーマンスを向上させる。
  • テスト可能性を意識した設計を取り入れる。

これらのベストプラクティスを適用することで、useContextをより効率的に活用できます。

まとめ

本記事では、ReactのuseContextフックを効率的に活用するための基礎から応用までを解説しました。基本的な使い方から、複数のContextの利用、カスタムフックの作成、再レンダリングを抑える工夫、さらにはテスト可能なコード設計まで、実践的な内容を取り上げました。

useContextは、シンプルかつ柔軟な状態管理を実現できる強力なツールです。ただし、過剰な利用や設計ミスがパフォーマンスや可読性に影響を与えることもあります。適切なスコープ設計や補助的なツールとの併用を検討しながら、効率的なReact開発を進めましょう。

React
React 状態管理 Hooks useContext

コメント

コメントする

目次