React公式チュートリアルでホットリロードの結果がブラウザに反映されない時

状況

https://ja.reactjs.org/tutorial/tutorial.html#lifting-state-up
Reactの勉強を始めて上記の公式チュートリアルに従い進めていたらホットリロードの結果がブラウザに反映されない問題にあたりました。CLI上ではホットリロードが動いてる感じ。WSl2でやっていたのでそれが原因かと思いましたがMACでも同じような状況になりました。検索しても見当たらなかったのでここに解決法を書きます。

解決法

公式チュートリアルではindex.jsにコンポーネントを記述しそれを読み込むやり方をしていますがこれをやめます。/srcにGame.jsファイルを作成します。index.jsのコンポーネントのところをコピペしてコンポーネントをエクスポートします。

Game.js

import React from "react";
import "./index.css";

class Square extends React.Component {
  render() {
    return <button className="square">{/* TODO */}</button>;
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = "Next player: X111";

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

export default Game;

index.jsではGameコンポーネントをインポートして呼び出します。呼び出す際にReact.StrictModeの中で読み込まないといけないことに注意。具体的に下記にコードを載せます。

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import Game from "./Game";

ReactDOM.render(
  <React.StrictMode>
    <Game />
  </React.StrictMode>,
  document.getElementById("root")
);

終わりに

原因はわかりませんが私はこの方法で解決できました。もし同じような状況で困っている方の力になれたら幸いです。もし原因がわかる方がいたらコメントをお願いします。