Date-fns vs MomentJS: Choosing the Right Date Utility Library

Comparing popular JavaScript date libraries.

Chameera Dulanga
Bits and Pieces

--

MomentJS is one of the most used JavaScript date libraries among software engineers. However, over the past few years, other alternatives challenged its existence.

Out of these, Date-fns is one of the leading competitors to take over from MomentJS.

So, in this article, I will discuss the features of Date-fns, where it shines, and its limitations to give you a better understanding.

Understand Date-fns and Its Usage

https://date-fns.org/

Handling dates in JavaScript is not an easy task. Even with the MomentJS, we have to create a Moment object and use methods on that object.

Date-fns simplifies the JavaScript data manipulations by providing a variety of functions.

It provides more than 200 different time-related functions, and unlike MomentJS, it allows you to import a selected set of functions as needed.

For example, if you need to print the day of the week, you only need to import the format function and pass the date with the required JavaScript date format parameters.

// Install date-fns librarynpm i date-fns// Usageimport { format } from 'date-fns';
format(new Date(), "'Today is a' iiii");

Do you know that Date-fns has over 10,750K weekly NPM downloads and 26.5K GitHub stars?

The below graph shows the npm trends comparison between these MomentJS and Date-fns. We can clearly see an upward trend in Date-fns while MomentJS seems to lose its traction.

https://www.npmtrends.com/date-fns-vs-moment

But, that’s not all; Date-fns has some amazing features to attract developers.

So, let’s discuss a bit more about these features to see how it differs from MomentJS.

1. Function per file

Date-fns library consists of a variety of functions, and it allows you to import these functions individually as needed.

For example, if you need to get the distance between 2 days, you only need to import formatDistance and subDays functions.

import { formatDistance, subDays } from ‘date-fns’ formatDistance(subDays(new Date(), 3), new Date())

However, if you use MomentJS, you will have to import all at once since MomentJS has its all functions as a member function.

This behavior of Date-fns not only makes your imports easy but also reduces the applications package size drastically.

2. Date-fns are Immutable

Being mutable is another difficulty we face when we work with MomentJS. For example, sometimes date values can change unexpectedly since MomentJS date objects change their own states.

Date-fns resolves this issue by providing a new JavaScript date object instance from each function we run, and this could definitely help you avoid unwanted modifications.

3. Supports more than 50 locales

Date-fns is the perfect solution to handle date and time-related operations if you target an international audience.

It supports more than 50 locales, and you can easily import the languages you need and use them as follows:

import { formatDistance } from ‘date-fns’
import { es }from 'date-fns/locale'
const result = formatDistance(
new Date(2020, 8, 1),
new Date(2021, 8, 1),
{locale: es}
)

In addition to that, they invite developers to expand localization support. If you are interested, you can follow the guide provided by the Date-fns team to add new language support for the library.

4. It is Fast and Compact

If we consider performance, MomentJS has significant performance issues due to its complex API and packages size.

MomentJS package size is around 232 kB, while Date-fns package size is 300 Bytes.

Date-fns vs MomentJS Performance

However, I needed to see the performance difference myself, and I found this amazing benchmark comparison project by José Mussa on GitHub. So, I made few modifications and ran 3 tests to see the results.

JavaScript add days to date vs JavaScript datetime year vs JavaScript date format parsing

As you can see, Date-fns are well ahead in all 3 operations in terms of operations performed per second and size and the simple API is the main reason behind this.

5. Other Features

As you can see, Date-fns are well ahead in all 3 operations in terms of operations performed per second and size, and the simple API is the main reason behind this.

  • Supports TypeScript and Flow.
  • Always returns dates in the same time zone.
  • Functional programming submodule makes the code clean and safe.
  • Respects Timezones & DST.
  • Stick to ECMAScript behavior in edge cases.
  • Provides good documentation.

Build with independent components, for speed and scale

Instead of building monolithic apps, build independent components first and compose them into features and applications. It makes development faster and helps teams build more consistent and scalable applications.

OSS Tools like Bit offer a great developer experience for building independent components and composing applications. Many teams start by building their Design Systems or Micro Frontends, through independent components.
Give it a try →

An independently source-controlled and shared “card” component (on the right, its dependency graph, auto-generated by Bit)

Conclusion

In this article, I discussed why Date-fns had become the go-to solution in JavaScript instead of MomentJS.

MomentJS has indeed been there for a long period, and it has great features. But, it hasn’t been able to keep up with the modern-day requirements.

After trying out both MomentJS and Date-fns, I suggest using Date-fns over MomentJS for future projects since it provides all the features of MomentJS while maintaining the speed, size, and features.

So, I invite you to try out Date-fns in your next project and share your thought with others in the comment section.

Thank you for Reading !!!

--

--