Improve the application by reducing third-party libraries in ReactNative

Javascript

You’re building a sleek, high-performance application, and you’re mindful of every byte you add to your bundle. After all, every millisecond counts when it comes to your application's loading time.

Now, consider the sweet alternative: harnessing the power of JavaScript’s native Date object without relying on additional libraries like lodash.

In this approach, you’ll gracefully format your dates, meeting user expectations for a polished presentation.

So, let’s dive into the enchanting world of date formatting using the inherent capabilities of JavaScript, where performance and elegance go hand in hand.

In many applications, the need arises to present a formatted date to users, such as “16 August 1990” or “08/16/1990,” often accompanied by the time.

While the widely-used moment.js library provides convenient date formatting capabilities, it comes with a substantial payload, approximately 4.21MB in unpacked size. Even if you utilize it for a singular formatting task, its inclusion can significantly augment your application bundle size, impacting the overall loading time.

Given these considerations, developers may seek alternative methods to format dates efficiently using native JavaScript, eliminating the dependency on external libraries.

In this article, we will delve into how to achieve date formatting without relying on any external libraries, ensuring optimal bundle size and loading performance for your application.

Let’s explore this approach in detail.

Using Date.prototype.toLocaleDateString

It has the following syntax:

toLocaleDateString(locales, options)

The toLocaleDateString method accepts a set of options and returns a date portion of the given Date instance according to language-specific conventions.

• locales can take en-US, en-GB etc which is a language specific code.
• options is an object where we specify which part of date we want like date, year, month etc.

Get Only Date

const date = new Date().toLocaleDateString('en-US');
console.log(date); // 6/18/1990

Get Formatted Date

const date = new Date().toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
console.log(date); // August 16, 1990

Get Date and Time

const date = new Date().toLocaleDateString('en-US', {
            hour: 'numeric',
            minute: 'numeric'
          });
console.log(date); // 6/18/1990, 10:30 AM

Get a Formatted Date and Time

const date = new Date().toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric'
  });
console.log(date); // AUgust 16, 1990, 10:30 AM

Get Formatted Date and Time Including Seconds

const date = new Date().toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric'
  });
console.log(date); // August 16, 1990, 10:30:54 AM

Get Formatted Date and Time Including Weekday

const date = new Date().toLocaleDateString('en-US', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric'
  });
console.log(date); // Friday, August 16, 1990 , 10:30:52 AM

Thank you for reading this article! Don’t forget to clap.

If you have any queries related to ReactNative, I’m always happy to help you. You can reach me on LinkedIn and Gmail.