React HooksのuseContextを動かしてみる

React HooksのuseContextは、useStateのようなコンポーネントに閉じた変数を、グローバル変数のように扱えるようにするHooksとのこと。

contextを定義してやり、TestContextProviderをルーティング定義の大元に付与してやる。そして、利用したいコンポーネントでuseContextを利用すれば良い。

以下のサンプルは、グローバルで利用可能な変数をインクリメントするだけのもの。

context.tsx

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

interface TestContextType {
  data: number;
  updateData: (data: number) => void;
}

// Contextの作成
export const TestContext = createContext<TestContextType>({
  data: 0,
  updateData: () => {},
});

// Contextの設定(カスタムフック)
export function useTestContext(): TestContextType {
  const [data, setData] = useState(0);
  const updateData = useCallback((newData: number): void => {
    setData(newData);
  }, []);

  return {
    data,
    updateData,
  };
}

// Context Providerコンポーネント
export const TestContextProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
  const contextValue = useTestContext();

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

index.tsx：ルーティングを設定したファイル

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Test from "./Test";
import TestContextPage from "./TestContextPage";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import reportWebVitals from './reportWebVitals';
import { TestContextProvider } from './context';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <TestContextProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="/test" element={<Test />} />
          <Route path="/testcontext" element={<TestContextPage />} />
        </Routes>
      </BrowserRouter>
    </TestContextProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

contextを利用するコンポーネント

TextContextPage.tsx

import React, { useContext } from 'react';
import { TestContext, TestContextProvider } from './context';

function Example() {
  const { data, updateData } = useContext(TestContext);

  return (
      <div>
        <p>{data}回押したよ</p>
        <button onClick={() => updateData(data + 1)}>
          ボタン
        </button>
      </div>
  );
}

export default Example;