DEV Community: Garbage Value

DayJS: The best lightweight alternative to momentjs

Garbage Value — Sun, 20 Sep 2020 09:18:45 +0000

If you're reading this article, it means you've come out of a phase where you've started to look at the size of the package instead of installing it just because it is popular and do your job. In this article, I will compare momentjs vs dayjs in many aspects. And tell you how and when dayjs is better and when momentjs.

A few days back I was optimizing the size of one of my old react projects, I saw moment import which I don't use nowadays, so I decided to write an article on this showing why you should consider dayjs shouldn't use momentjs just because you want to show date as 9 March, 20 instead of 09/03/2020.

Why momentjs first of all? - Master of Time

MomentJS is one of the most popular and oldest date-related libraries. It has around 43k GitHub stars and is being used by around 1.3m GitHub repositories. It is most popular because of its rich and simple APIs for date and time formatting and manipulation and multi-platform compatibility and if anyone needs date/time formatting or manipulation, momentjs come first in mind. Maybe that is one of the reasons why everyone prefers momentjs in the first place, even in my company, they prefer momentjs as there's no alternative with such sweet APIs exist, and even exist it may not be popular as much as momentjs. So no one dares to think anything beyond momentjs. But there are reasons when one has to consider and look beyond. In the next section, let's see why momentjs became the point of debate and how the need for some alternative felt.

Why one shouldn't use momentJS then?

Photo by
Sonja
Punz
onUnsplash

It's a trade-off, with such great features comes great cost.

I'm using VSCode Import Cost extension to check the import cost of each library, and it is showing 136 KBs, which is the most expensive library I'm using right now, much more than MaterialUI that costs me 80 kBs. While the material-UI is the most used package. In every jsx/tsx file, you'll see at least one import from marterial-UI.
So the question is, is it worth it? Is it doing that much work that I pay more than 130 kBs? Like some applications only needs to format the date while some application shows the time with respect to the current time, like showing the timing of some events, is it being tomorrow, today or is past, some bar is closed or when closing, etc. And some cases may also involve the timezone, which is a headache on its own. The answer depends on application to application, and mostly we format the date, and a bit less frequently we do date manipulation.

So for only these work, > 130 kBs is not a good deal, especially when your application is SEO demanding, everyone (me too) want to load the application faster, I have applied many tactics to do, and while optimizing the package size of my application, 130+ kBs caught my eyes. This has to be fixed.

If not momentJS then what alternative?

Image Credit:DayJS GitHub

I came to know about a library that mainly focused to tackle exactly the same issue that I mentioned above, named DayJS. The first two lines on their official documentation are

DayJS
2kB JavaScript date utility library

They say,

Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js.

DayJS becoming popular with 25.6k GitHub stars surpassing date-fns with 21.2k stars. I haven't used date-fns, so here I can't compare both. But of course some time. It is not only the size that makes it my choice, but also the APIs, that resembles momentjs. So it will be a very little pain for me to move from momentjs to dayjs. But just before moving, I made some comparisons for sizes and performance, as everyone says it is the best lib package in their documentation, but the reality comes when you start looking in the things yourself.

momentJS vs DayJS?

Photo by Jason
Briscoe on Unsplash

So, for comparing momentJS with dayJS, I create three react projects using the command npx create-react-app with names dayjs-example and momentjs-example and minimal. dayjs-example is to test dayjs, and so on. minimal is just the empty boilerplate for reference to the other two projects.

import cost

I added import statements in the App.js created by React CLI boilerplate and just called format function for both in their corresponding projects and minimal is just the boilerplate, to compare how much each library causing the increase in size.

Import costs for dayJS showed 7.2K (gzipped: 3K) and for momentJS, it showed 130.6K (gzipped: 48K). Here they show a huge difference, but these are just import costs, it may differ at the time of building depends on how each library has implemented imports and working of webpack according to the functions used in our code.
Bundle Size

Now next I just built all of the three projects to check how much they differ in the bundle size. And here is the result I got.

DayJS

42.3 KB 2.1807f41e.chunk.js
778 B runtime-main.950151df.js
633 B main.1cb3d8cc.chunk.js
556 B main.d1b05096.chunk.css

MomentJS

56.24 KB 2.891328c7.chunk.js
783 B runtime-main.5092e59c.js
635 B main.c2cbbad2.chunk.js
556 B main.d1b05096.chunk.css

Minimal Project (without any external library aside from boilerplate)

39.84 KB 2.917d530d.chunk.js
768 B runtime-main.bd245a24.js
608 B main.a5ca775c.chunk.js
556 B main.d1b05096.chunk.css

So here, moment caused an increase of approx 16.4K and dayjs caused 2.46K which is a huge difference again. Momentjs caused around 8 times more size than the dayjs. It may vary on how much functions you use in your code from both the libraries.
Performance

Now, I'll show my results of testing the format functions for both momentjs and dayjs. I installed both momentjs and dayjs in my minimal project (size comparison is done). I wrote the following chunk of code in App.js function
```
useEffect(() => {
console.time('1');
moment().format('DD-MM-YYYY');
console.timeEnd('1');

console.time('2');
dayjs().format('DD-MM-YYYY');
console.timeEnd('2');

}, []);
```
and the output of the following results as follows
```
1: 2.2763671875ms
2: 1.260986328125ms
```
so it is clearly seen that dayjs took around half of the time of momentjs for the same function.

Conclusion

Photo by Kelly
Sikkema on Unsplash

Now, the conclusion of the article is
dayjs is the lightweight alternative to
momentjs. BUT again, dayjs can't replace momentjs
completely, or we can say hasn't replaced yet. Momentjs offers a lot of other
things like timezone, which is not supported by dayjs yet. dayjs is a
good replacement of momentjs for basic date transformations,
display, formatting, and so on. So it's all upon your requirements.
Thank
you for reading. I hope you enjoyed it, if I missed anything or has any
mistake in the comparison of both libraries, please let me
know

The article DayJS: The best lightweight alternative to momentjs was originally published on Garbage Value

Use react hooks with react-redux in typescript

Garbage Value — Sun, 20 Sep 2020 00:03:33 +0000

It's been more than a year when React introduced hooks. Many popular libraries that used with ReactJS like React-Router, React-Redux, Material UI, etc. now support hooks and functional components. But today in this article, I will show you the new way of accessing store and dispatch in your functional component without using higher-order components, and compare how hooks reduced huge pile of boilerplate.

1. What are hooks in ReactJS?

Photo by chuttersnap on Unsplash

If you're aware of what are hooks in react, you can skip to the next section.

React hook is a new concept introduced in React 16.8, that enables programmers the power to separate the logic from the UI. We all know that states used only in react component, so what if there's a logic bind with that state, and you want to use it in multiple files? You forced to return a JSX, which makes it a functional component. Now, that was the motivation.

So now, you can write a functional component hook, you can do everything that you do in a functional component except you can return anything rather than just a JSX. Hooks name start with use like useEffect, useState etc. It is not a strict rule, but it considered a standard to identify hooks.

2. React redux hooks: Class vs Functional component comparison

(See the complete code on Code Sandbox

I'm writing a simple class component and a functional component that render the name of a user. First, we dispatch the name of the user, and next, we select the name from the store in the component to display it in the component.

import * as React from "react";
import { connect } from "react-redux";
import { TReduxStore, TDispatch } from "./types";
import { AxiosPromise } from "axios";
import { getUser } from "./action";

type IStateProps = Pick<TReduxStore, "user">;

interface IDispatchProps {
  getUser: (id: string) => AxiosPromise;
}

interface IProps extends IStateProps, IDispatchProps {}

class ShowUser extends React.Component<IProps> {
  componentDidMount() {
    this.props.getUser("1");
  }

  render() {
    const { user } = this.props;
    return !user ? "Loading..." : <div>User Name: {user.name}</div>;
  }
}

const mapStateToProps = (state: TReduxStore): IStateProps => ({
  user: state.user
});

const mapDispatchToProps = (dispatch: TDispatch): IDispatchProps => ({
  getUser: id => dispatch(getUser(id))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ShowUser);

Above is the traditional way of connecting your ReactJS component with the redux. You have to write that much code just to request and display the user name. Now let's see the same thing in the functional component.

import * as React from "react";
import { useSelector, useDispatch } from "react-redux";
import { TReduxStore, TDispatch } from "./types";
import { getUser } from "./action";

type IStateProps = Pick<TReduxStore, "user">;

const ShowUser: React.FC = props => {
  const dispatch = useDispatch<TDispatch>();

  const { user } = useSelector<TReduxStore, IStateProps>(state => ({
    user: state.user
  }));

  React.useEffect(() => {
    dispatch(getUser("1"));
  }, [dispatch]);

  return !user ? <div>"Loading..."</div> : <div>User Name: {user.name}</div>;
};

export default ShowUser;

As you can see, using hooks, reduced the number of lines to almost half. I'm considering you're using the class component, so I'm not explaining that snippet. So I'm just explaining the FunctionalComponent.tsx below.

3. How to use useDispatch and useSelector react-redux hooks in your functional component?

Let's see one by one how to use the useDispatch and the useSelector to dispatch and select the data from the redux store.

Photo by Chris Scott on Unsplash

useDispatch

useDispatch hook used to get the redux dispatch function in your functional component or hook. It takes a generic type of data dispatch, takes in its parameters. Usually, it is {type: string, payload?: any} but as I'm redux-thunk here, so its type is ThunkDispatch<TReduxStore, {}, TAction>; where TReduxStore is the type of the store and TAction is {type: string, payload?: any}.
useSelector

As its name suggests, it gives you the functionality of selecting the data from your redux store. It takes one parameter, which is a callback, where it passes the whole redux state, and you return the data you want to select from it. So the callback function looks like below.
```
function (state) {
    return ({
        user: state.user
    })
}
```
The same thing I have written is in the flat arrow function format in the functional component. It takes two types in its generic type. One is the type of your redux store, and the second is the type you want to select from the store. IN my codes, it is represented by TReduxStore and IStateProps respectively.

The post Use react hooks with react-redux in typescript was originally published on garbagevalue.com

DEV Community: Garbage Value

DayJS: The best lightweight alternative to momentjs

Why momentjs first of all? - Master of Time

Why one shouldn't use momentJS then?

If not momentJS then what alternative?

momentJS vs DayJS?

import cost

Bundle Size

DayJS

MomentJS

Minimal Project (without any external library aside from boilerplate)

Performance

Conclusion

Use react hooks with react-redux in typescript

1. What are hooks in ReactJS?

2. React redux hooks: Class vs Functional component comparison

3. How to use useDispatch and useSelector react-redux hooks in your functional component?

useDispatch

useSelector