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-helmet
and 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
. 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 react-helmet
.
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.
Top comments (0)