So let’s cover the alternatives to the most popular React libraries that are in a lot of ways a better choice.
moment VS date-fns
MomentJS is a monster with a lot of features included. The downside is that this makes the size of the library pretty big.
The bundle size of MomentJS is 288kB – that’s a lot for some date manipulation. Especially considering that you can’t import individual methods, which means you can’t do any tree-shaking with it.
Another reason you should reconsider using MomentJS is that the development of the library has been stale. Even the creators of MomentJS announced that they stopped shipping new features.
date-fns is another popular date manipulation library. The library has most of the same features yet a much smaller bundle size:
On top of that, the date-fns library is immutable. That means that it returns a new instance of the date rather than mutating the one you give it.
Overall, date-fns is a solid substitution to MomentJS.
Formik VS React Hook Form
Formik is one of the most popular React libraries for handling forms. At the time of writing, it has almost 27K stars on Github. Formik is a very mature library with tons of functionality for handling the main pain points of building a form.
With that said, Formik has one main disadvantage – excessive re-renders. Formik will keep re-rendering the whole form as the user types. If you have heavy UI in your form, Formik will bring your app to its knees by re-rendering the form on each keystroke.
React Hook Form is a newer library for handling forms. As the name suggests, it’s built with hooks. Overall, React Hook Form takes a leaner approach to building forms, and you will end up writing fewer lines of code with it.
But the main advantage of React Hook Form over Formik is that it uses an uncontrolled input approach which saves your app from those redundant re-renders.
Connecting the form is easy and unintrusive: all you need to do is register your form’s inputs using the
register method and wrap the submit event handler with
React-router vs HookRouter
React-router is the go-to React library for managing routing in your app. The problem I had with react-router in the past is how bloated it was. But, with the introduction of the hooks, the authors of react-router added hooks to the API. Hooks significantly reduced the amount of boilerplate code you write. Still, there are some interesting alternatives out there.
hookrouter is a newer library entirely based on hooks that takes a lighter approach to app routing. hookrouter has most of the basic features react-router has like programmatic navigation, redirects, and passing route props.
Rather than declaratively defining your routes using
Switch, you use the
useRoutes hook that consumes your
routes object, evaluates each route one by one, and checks if they match the current URL path.
With hookrouter, the nesting of the routes is simpler. If you use the
useRoutes hook inside a child component, it will not match against the full URL path but only against the part of the URL left after removing the parent’s path. That makes it easier to reason about nesting.
So which one is better? In this case, there is no clear winner, and the answer is it depends.
react-router still has more functionality and might be a better choice for larger projects.
You might like hookrouter better if you’re a fan of the hook-based approach. It’s also a better tool for smaller apps where using react-router is overkill.
That is not to say that Lodash is entirely obsolete. It still has a lot of very useful APIs that aren’t worth reinventing. Just be aware that there’s a pretty good chance you could omit Lodash from your project and have fewer dependencies as a result.
Object.fromEntries is a new utility method from the ES2019 proposal that does the same thing as
fromPairs. All of the modern browsers support it, except for IE and Opera. If you have to support older browsers, you can easily recreate the functionality using array’s
And that’s it for this post. I hope you found this list of React libraries useful. Keep in mind that this was not a strictly 1:1 comparison. These alternatives are not necessarily better in every situation, so you should still use good judgment and use what suits your project better.