- Published on
Reactでメタ情報の書き換えはreact-helmetでなくreact-helmet-asyncを採用しよう
- Authors
- Name
- nisyuu (にしゅう)
- @nishilyuu
React実装でtitleやmeta、linkなどのメタ情報を書き換える時は、react-helmetがよく使用されていました。 しかし、現在では4年以上更新されていないことと、もしインストールして使おうとするとWarning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code.という警告が出てしまいます。
react-helmetは長らく更新が止まっていますが、react-helmet-asyncという後継となるようなライブラリが出ています。 更新も直近まで行われているため、HTMLのメタ情報を書き換えるライブラリを採用したい場合は、react-helmet-asyncをおすすめします。
使い方
使い方はREADMEを参照してください。
https://github.com/staylor/react-helmet-async?tab=readme-ov-file#readme
警告について
発生している警告は、StrictモードでUNSAFE_componentWillMountを使用することは、バグの発生原因となる可能性があるため非推奨としているということを意味しています。 react-helmetの依存ライブラリであるreact-side-effectが、UNSAFE_componentWillMountを使用しているため警告が発生しています。
React 19からライブラリが不要になるかもしれない？
React 19から、ライブラリを使わずにHTMLのメタ情報を書き換え可能な機能が搭載されるそうです。
参考
https://chaika.hatenablog.com/entry/2021/07/27/160000
https://dev.classmethod.jp/articles/react-helmet-async-instead-of-react-helmet/