Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code

Reactのみを使ったSPAアプリを起動した際にconsoleに↓の警告が表示されていた。

Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code.

調べてみるとmetaタグの動的書き換えに使用していたreact-helmetが原因だった。

上記のエラーが解消されたreact-helmet-asyncに切り替えることにした。

Headコンポーネント内で react-helmet を呼び出していた箇所を react-helmet-async に変更。

// Head.tsx
import { Helmet } from 'react-helmet-async'

また、起点となるindex.tsxに HelmetProvider を設置。

// index.tsx
import React from 'react'
import { hydrate, render } from 'react-dom
import { HelmetProvider } from 'react-helmet-async'

import App from './App'

const AppBase = (
  <React.StrictMode>
    <HelmetProvider>
      <App />
    </HelmetProvider>
  </React.StrictMode>
)
const rootElement = document.getElementById('root')

if (rootElement?.hasChildNodes()) {
  hydrate(AppBase, rootElement)
} else {
  render(AppBase, rootElement)
}

これで警告が解消された。

参考

• react-helmetの代わりにreact-helmet-asyncを使う | DevelopersIO