React18に上げたら描画の更新がうまくいかなくなった件のメモ

概要

React18に上げたタイミングで、storeで値を書き換えても、それが画面に伝播しない状態になった。
結論からいうと、不適切な場所でReact.StrictModeを使用していたのが原因であった。

修正箇所

修正前

  <Router basename={'cartagraph-gamebook'}>
    <React.StrictMode>
      <Provider store={store}>
        <App />
      </Provider>
    </React.StrictMode>
  </Router>

修正後

<Router basename={'cartagraph-gamebook'}>
    <Provider store={store}>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </Provider>
  </Router>

参考

react - strict mode
React開発環境ではなぜかコンポーネントが2回描画されるのか判った！