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)
}

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

参考


Related #js

Next.js 11

手軽にアップグレードできた

仕事ですぐに使えるTypeScript

奥が深い

prismのモックサーバはexamples定義からレスポンスを返してくれる

仕様書を作る際はexamplesも定義するようにしておきたい

明日のゴミ収集対象をSlackに通知する

これでもう翌日のゴミ収集内容に迷わない