【React】useContext使ってみた

useContextの使い方

useContextは、Reactコンテキストを介してグローバルな状態を共有するためのものです。以下は、useContextの基本的な使い方です。
Counterアプリをcontextを使って実装します

1. 型定義

src/types/counter.tsx

import { Dispatch, SetStateAction } from "react";

export interface CounterContextProps {
  count: number;
  setCount: Dispatch<SetStateAction<number>>;
}

2. コンテキストを提供するコンポーネントの作成

components/CounterContext/CounterContext.tsx

import { createContext, ReactNode, useState } from "react";
import { CounterContextType } from "../../types/counter";

const CounterContext = createContext<CounterContextType | null>(null);

const CounterProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [count, setCount] = useState<number>(0);

  const contextValue: CounterContextType = {
    count,
    setCount,
  };

  return (
    <CounterContext.Provider value={contextValue}>
      {children}
    </CounterContext.Provider>
  );
};

export { CounterContext, CounterProvider };

3. useContextを使用するコンポーネント

components/CounterContext/CounterControls.tsx

import React, { useContext } from "react";
import { CounterContextType } from "../../types/counter";
import { CounterContext } from "./CounterContext";

const CounterControls: React.FC = () => {
  const { count, setCount } = useContext(CounterContext) as CounterContextType;

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

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default CounterControls;

4. 表示用コンポーネント

components/CounterContext/CounterDisplay.tsx

import React, { useContext } from "react";
import { CounterContext } from "./CounterContext";
import { CounterContextType } from "../../types/counter";

const CounterDisplay: React.FC = () => {
  const { count } = useContext(CounterContext) as CounterContextType;

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
};

export default CounterDisplay;

5. Appコンポーネントで提供されたコンテキストを使用

App.tsx

import React from "react";
import "./App.css";
import { CounterProvider } from "./components/CounterContext/CounterContext";
import CounterControls from "./components/CounterContext/CounterControls";
import CounterDisplay from "./components/CounterContext/CounterDisplay";

const App: React.FC = () => {
  return (
    <div className="App">
      <CounterProvider>
        <CounterDisplay />
        <CounterControls />
      </CounterProvider>
    </div>
  );
};

export default App;

まとめ

useContextはReactアプリケーションの開発において非常に強力なツールです。useContextを使用してコンポーネント間で状態を共有することで、アプリケーションの保守性と可読性を向上させることができます。様々なHooksを使いこなして、より効率的で使いやすいReactアプリケーションを構築しましょう

この記事では、初心者大学生がReact Nextを理解するためのアウトプット資料です。
間違いや意見などコメントお待ちしております！