I was recently working on head tag management in React apps, so I searched uncle Google for "react head manager."
The entire first and second pages of results mentioned two packages,
react-head. I had heard of React Helmet before, which has over 1 million weekly downloads and decent maintenance, while React Head was a lesser-known package with only 6.5 thousand weekly downloads and less maintenance.
It seemed like a no-brainer at first:
react-helmet was the way to go. But I asked myself, what motivated someone to use
react-head and what motivated 6,500 people to use it weekly?
I looked deeper: the
react-head documentation linked to an article which discussed some issues with
react-helmet, mostly that it isn't thread-safe which can lead to problems with SSR.
I investigated more and found out that
react-helmet-async was forked off
react-helmet by the fantastic React team at the New York Times, and this package has fixed the SSR / async issues from
react-helmet-async has 1.6 million weekly downloads and growing, better maintenance than the other choices, and less open issues and a smaller bundle size than
For my team,
react-helmet-async is the clear choice. But a Google search didn't mention it until the third page of results! Takeaways:
JS developers often suffer from "just use the first package we can find from NPM - get the job done!" Instead, take the time to research and compare packages.
Get in the habit of questioning: ask yourself why two packages are both maintained if they do roughly the same thing, for example. Ask yourself why two string methods exist, if they accomplish roughly the same thing (maybe one performs better for example). Ask questions.
Level up every day