react-helmetを設定したらWarning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code.と怒られた #React

タイトルのまんま。

SEO.tsx

// 普通に使ってたら怒られる
<Helmet>
 タイトルとか色んなメタタグとか 
</Helmet>

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

このようにバグの可能性があると怒られてしまいます。
しばらくNextやGatsbyといったフレームワークを使っていてSEO周りであまり悩まなかったのでここら辺の情報はアップデートされていませんでした。

とりあえず解決策としてreact-helmet-asyncが見つかりました。（なぜか日本語情報はあまりない）

react-helmet-async で解消

npm - react-helmet-asynのページ

DeepL翻訳

本パッケージは、React Helmetのフォークです。の使用法は同義ですが、サーバーとクライアントがリクエストごとに状態をカプセル化するためにを必要とするようになりました。

react-helmetはreact-side-effectに依存しており、これはスレッドセーフでありません。サーバーで非同期なことをする場合は、リクエストごとにデータをカプセル化するHelmetが必要で、このパッケージはまさにそれを実現します。

依存ライブラリのreact-side-effectに問題ありということですね。

導入

公式.tsx

const app = (
  <HelmetProvider>
    <App>
      <Helmet>
        <title>Hello World</title>
        <link rel="canonical" href="https://www.tacobell.com/" />
      </Helmet>
      <h1>Hello World</h1>
    </App>
  </HelmetProvider>
);

公式だと二つのコンポーネントを挟むように書かれています。

HelmetProviderコンポーネントは Helmet を使用している全ての Route をラッピングしてあげるように設置。
Helmetコンポーネントは通常と同じようにしよう。

自分の場合は、rootとなるコンポーネント(index.tsx)へ HelmetProviderコンポーネントを設置して、SEO.tsxファイルの中へ Helmetコンポーネントを react-helmet と同様に設置しました。

無事にエラー解消

ヤッッッッッッタゼッッッッッッッッッ!!!!ｺﾞﾊﾝｵｲｼｲﾓｸﾞﾓｸﾞ