【React】プロバイダーでくくった範囲に再マウントを強制させるコンテキスト

React – ユーザインターフェース構築のための JavaScript ライブラリ
　この記事はそれぞれ以下のバージョンに対応する記事です。

• react: 17.0.2

　前回の次の記事では react-router 中の仕組みを使ってルーティング先の key を書き換えることによって、強制再マウントを実現しました。
　【React】react-router-dom の NavLink や Link でリンク先が同じページでも強制再マウントさせる方法 – 株式会社シーポイントラボ ｜ 浜松のシステム・RTK-GNSS開発
　一応↑の方法でも動くには動くのですが React のコンテクストという仕組みを用いることで、↑の様な限定的な方法を取らずともより汎用的に使えるて強制再マウントができます。
　コンテクスト – React
　具体的には次です。

import React, { PropsWithChildren, useContext, useState } from 'react';
type ForceRemountContextType = { forceRemount: () => void };

export const ForceRemountContext = React.createContext<ForceRemountContextType>({
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  forceRemount: () => {},
});

export const useForceRemountContext = (): ForceRemountContextType => useContext(ForceRemountContext);
export const ForceRemountProvider = ForceRemountContextComponent;

/**
 * 強制再マウントを扱う
 */
function ForceRemountContextComponent(props: PropsWithChildren<{}>): JSX.Element {
  const [key, setKey] = useState<string>(`${Math.random()}`);
  const forceRemount = () => {
    setKey(`${Math.random()}`);
  };

  return (
    <ForceRemountContext.Provider value={{ forceRemount }} key={key}>
      {props.children}
    </ForceRemountContext.Provider>
  );
}

　これを定義して、次の様に使えばそれだけで任意のタイミングで Provider でくくった全体を再マウントできます。

/** ルーティング定義コンポーネント全体をくくると web ページの更新的に再マウントが働きます */
import { ForceRemountProvider } from './ForceRemountContext';

<ForceRemountProvider>
   <Switch>
      <Route exact path={'home'} component={HomePage} />
      <Route exact path={'index'} component={IndexPage} />
   </Switch>
</ForceRemountProvider>

/** 使用は各コンポーネントの中で任意にフックから実行*/
import React from 'react';
import { ForceRemountProvider, useForceRemountContext } from './ForceRemountContext';
import Button from "@material-ui/core/Button";

const IndexPage: React.FC = () => {
  React.useEffect(() => {
    console.log('マウントされました。')
  }, []);

  return <div><Button onClick={forceRemount}>クリックで強制再マウント</Button></div>
}