fix: replace Moment.js with Day.js to improve performance (#5091)

sammy200-ui · anshgoyalevil · web-flow · commit a0c065a016c3 · 2026-02-06T13:46:26.000+01:00
Co-authored-by: DuskWarden &lt;pawar96sameer@gmail.com&gt;
Co-authored-by: Ansh Goyal &lt;anshgoyal1704@gmail.com&gt;
diff --git a/components/Calendar.tsx b/components/Calendar.tsx
@@ -1,4 +1,5 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -11,6 +12,8 @@ import { getEvents } from '../utils/staticHelpers';
 import GoogleCalendarButton from './buttons/GoogleCalendarButton';
 import Heading from './typography/Heading';
 
+dayjs.extend(localizedFormat);
+
 interface ICalendarProps {
   className?: string;
   size: number;
@@ -29,7 +32,7 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
   const CALENDAR_URL =
     'https://calendar.google.com/calendar/embed?src=c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com&ctz=UTC';
   const currentDate = new Date();
-  const eventsExist = eventsData?.filter((event: IEvent) => moment(event.date).isAfter(currentDate)).length > 0;
+  const eventsExist = eventsData?.filter((event: IEvent) => dayjs(event.date).isAfter(currentDate)).length > 0;
 
   return (
     <div
@@ -46,13 +49,13 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
           <li key={index} data-testid='Calendar-list-item'>
             <a href={event.url} className='mb-1 mt-2 flex grow flex-col items-start sm:flex-row sm:items-center'>
               <div className='inline-flex h-12 min-w-12 flex-row rounded-full bg-pink-500 font-bold text-white'>
-                <span className='flex-1 self-center text-center'>{moment(event.date).format('D')}</span>
+                <span className='flex-1 self-center text-center'>{dayjs(event.date).format('D')}</span>
               </div>
               <div className='grow text-left sm:mt-0 sm:pl-6'>
                 <h2 className='title-font font-medium text-gray-900 hover:text-gray-500'>{event.title}</h2>
                 <p className='text-gray-600'>
-                  {moment(event.date).local().format('LLLL')} UTC
-                  {moment(event.date).local().format('Z')}
+                  {dayjs(event.date).format('LLLL')} UTC
+                  {dayjs(event.date).format('Z')}
                 </p>
               </div>
             </a>
diff --git a/components/campaigns/AnnouncementRemainingDays.tsx b/components/campaigns/AnnouncementRemainingDays.tsx
@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 import React from 'react';
 
 interface AnnouncementRemainingDaysProps {
@@ -12,8 +12,8 @@ interface AnnouncementRemainingDaysProps {
  * @param {string} props.eventName - The name of the event
  */
 export default function AnnouncementRemainingDays({ dateTime, eventName }: AnnouncementRemainingDaysProps) {
-  const date = moment(dateTime);
-  const now = moment();
+  const date = dayjs(dateTime);
+  const now = dayjs();
   const days = date.diff(now, 'days');
   const hours = date.diff(now, 'hours');
   const minutes = date.diff(now, 'minutes');
diff --git a/components/layout/BlogLayout.tsx b/components/layout/BlogLayout.tsx
@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 import ErrorPage from 'next/error';
 import HtmlHead from 'next/head';
 import { useRouter } from 'next/router';
@@ -71,7 +71,7 @@ export default function BlogLayout({ post, children }: IBlogLayoutProps) {
                   </span>
                 </p>
                 <div className='flex text-sm leading-5 text-gray-500'>
-                  <time dateTime={post.date}>{moment(post.date).format('MMMM D, YYYY')}</time>
+                  <time dateTime={post.date}>{dayjs(post.date).format('MMMM D, YYYY')}</time>
                   <span className='mx-1'>&middot;</span>
                   <span>{post.readingTime} min read</span>
                 </div>
diff --git a/components/navigation/BlogPostItem.tsx b/components/navigation/BlogPostItem.tsx
@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 import Link from 'next/link';
 import type { Ref } from 'react';
 import React, { forwardRef } from 'react';
@@ -129,7 +129,7 @@ const BlogPostItem = ({ post, className = '', id = '' }: BlogPostItemProps, ref:
                     </span>
                   </Heading>
                   <Paragraph typeStyle={ParagraphTypeStyle.sm} className='flex'>
-                    <time dateTime={post.date}>{moment(post.date).format('MMMM D, YYYY')}</time>
+                    <time dateTime={post.date}>{dayjs(post.date).format('MMMM D, YYYY')}</time>
                     <span className='mx-1'>&middot;</span>
                     <span>{post.readingTime} min read</span>
                   </Paragraph>
diff --git a/components/navigation/EventFilter.tsx b/components/navigation/EventFilter.tsx
@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 import React, { useEffect, useState } from 'react';
 
 import type { IEvent } from '@/types/event';
@@ -23,7 +23,7 @@ interface EventFilterProps {
  * @param {React.Dispatch<React.SetStateAction<IEvent[]>>} props.setData - The function to update the filtered events.
  */
 export default function EventFilter({ data, setData }: EventFilterProps) {
-  const localTime = moment().format('YYYY-MM-DD');
+  const localTime = dayjs().format('YYYY-MM-DD');
   const currentDate = `${localTime}T00:00:00.000Z`;
   const filterList: string[] = ['All', 'Upcoming', 'Recorded'];
   const [active, setActive] = useState<string>('All');
@@ -36,14 +36,14 @@ export default function EventFilter({ data, setData }: EventFilterProps) {
       case ActiveState.Upcoming:
         setData(
           getEvents(data).filter((event: IEvent) => {
-            return moment(event.date).format() > currentDate;
+            return dayjs(event.date).format() > currentDate;
           })
         );
         break;
       case ActiveState.Recorded:
         setData(
           getEvents(data).filter((event: IEvent) => {
-            return moment(event.date).format() < currentDate;
+            return dayjs(event.date).format() < currentDate;
           })
         );
         break;
diff --git a/components/navigation/EventPostItem.tsx b/components/navigation/EventPostItem.tsx
@@ -1,5 +1,5 @@
 import { ArrowRightIcon } from '@heroicons/react/outline';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import React from 'react';
 
 import type { IEvent } from '@/types/event';
@@ -25,7 +25,7 @@ interface EventPostItemProps {
  *
  */
 function EventPostItem({ post, className = '', id }: EventPostItemProps): React.JSX.Element {
-  const localTime = moment().format('YYYY-MM-DD'); // store localTime
+  const localTime = dayjs().format('YYYY-MM-DD'); // store localTime
   const currentDate = `${localTime}T00:00:00.000Z`;
   const title = post.title || '';
   let color = '';
@@ -48,7 +48,7 @@ function EventPostItem({ post, className = '', id }: EventPostItemProps): React.
 
   const defaultCover = 'https://github.com/asyncapi/community/assets/40604284/01c2b8de-fa5c-44dd-81a5-70cb96df4813';
   let active = true;
-  const postDate = moment(post.date); // Convert post.date to a moment object if necessary
+  const postDate = dayjs(post.date); // Convert post.date to a dayjs object if necessary
 
   if (!postDate.isValid()) {
     // Handle invalid date if necessary
@@ -80,7 +80,7 @@ function EventPostItem({ post, className = '', id }: EventPostItemProps): React.
             <div className='flex items-center'>
               <IconCalendar />
               <span className='ml-4 text-sm font-semibold' data-testid='Event-span'>
-                {active ? moment(postDate).format('MMMM D, YYYY') : 'View Recording'}
+                {active ? postDate.format('MMMM D, YYYY') : 'View Recording'}
               </span>
               <ArrowRightIcon className='ml-3 w-4' />
             </div>
diff --git a/components/newsroom/FeaturedBlogPost.tsx b/components/newsroom/FeaturedBlogPost.tsx
@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 import Link from 'next/link';
 import React from 'react';
 import TextTruncate from 'react-text-truncate';
@@ -100,7 +100,7 @@ export default function FeaturedBlogPost({ post, className = '' }: FeaturedBlogP
                   </Heading>
                   <Paragraph typeStyle={ParagraphTypeStyle.sm} className='flex'>
                     <time dateTime={post.date} data-testid='FeaturedBlogPost-date'>
-                      {moment(post.date).format('MMMM D, YYYY')}
+                      {dayjs(post.date).format('MMMM D, YYYY')}
                     </time>
                     <span className='mx-1'>&middot;</span>
                     <span data-testid='FeaturedBlogPost-RT'>{post.readingTime} min read</span>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -72,6 +72,7 @@
     "axios": "^1.12.1",
     "clsx": "^2.1.0",
     "cssnano": "^6.0.3",
+    "dayjs": "^1.11.19",
     "dedent": "^1.5.1",
     "dotenv": "^16.4.4",
     "fs-extra": "^11.2.0",
@@ -89,7 +90,6 @@
     "markdown-toc": "^1.2.0",
     "md5": "^2.3.0",
     "mermaid": "9.3.0",
-    "moment": "^2.30.1",
     "next": "15.5.9",
     "next-i18next": "^15.3.0",
     "next-language-detector": "^1.1.1",
@@ -174,4 +174,4 @@
     "tsx": "^4.19.4",
     "typescript": "^5.3.3"
   }
-}
+}
diff --git a/pages/community/index.tsx b/pages/community/index.tsx
@@ -1,4 +1,6 @@
-import type moment from 'moment';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
 import React from 'react';
 
 import { CardType } from '@/types/components/community/CardPropsType';
@@ -14,9 +16,11 @@ import Heading from '../../components/typography/Heading';
 import eventsData from '../../config/meetings.json';
 import { getEvents } from '../../utils/staticHelpers';
 
+dayjs.extend(localizedFormat);
+
 interface Event {
   title: string;
-  date: moment.Moment;
+  date: Dayjs;
   url: string;
 }
 
@@ -132,8 +136,8 @@ export default function CommunityIndexPage() {
                     <div className='ml-4 text-left'>
                       <h1 className='text-md md:text-lg'>{event.title}</h1>
                       <span className='text-xs text-gray-500 md:text-sm'>
-                        {event.date.local().format('LLLL')} UTC
-                        {event.date.local().format('Z')}
+                        {event.date.format('LLLL')} UTC
+                        {event.date.format('Z')}
                       </span>
                     </div>
                   </a>
diff --git a/scripts/compose.ts b/scripts/compose.ts
@@ -5,7 +5,7 @@
 import dedent from 'dedent';
 import fs from 'fs';
 import inquirer from 'inquirer';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 import { logger } from './helpers/logger';
 
@@ -41,7 +41,7 @@ function genFrontMatter(answers: ComposePromptType): string {
 
   let frontMatter = dedent`---
   title: ${answers.title ? answers.title : 'Untitled'}
-  date: ${moment().format('YYYY-MM-DDTh:mm:ssZ')}
+  date: ${dayjs().format('YYYY-MM-DDTh:mm:ssZ')}
   type: ${answers.type}
   canonical: ${answers.canonical ? answers.canonical : ''}
   tags: [${answers.tags ? tags : ''}]
diff --git a/utils/staticHelpers.ts b/utils/staticHelpers.ts
@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 import type { IEvent } from '@/types/event';
 
@@ -11,21 +11,21 @@ import type { IEvent } from '@/types/event';
 export function getEvents(events: IEvent[], size?: number) {
   let meetingsWithDates: any = events.map((event) => ({
     ...event,
-    date: moment(event.date)
+    date: dayjs(event.date)
   }));
 
   meetingsWithDates.sort((a: any, b: any) => a.date - b.date);
 
   if (size) {
     return meetingsWithDates
-      .filter((meeting: any) => meeting.date > moment(new Date()))
+      .filter((meeting: any) => meeting.date.isAfter(dayjs()))
       .slice(0, size || meetingsWithDates.length);
   }
 
   const sortedMeetings: any = [];
 
   for (const meeting of meetingsWithDates) {
-    if (meeting.date > moment(new Date())) {
+    if (meeting.date.isAfter(dayjs())) {
       sortedMeetings.push(meeting);
     }
   }
@@ -35,7 +35,7 @@ export function getEvents(events: IEvent[], size?: number) {
   });
 
   for (const meeting of meetingsWithDates) {
-    if (meeting.date < moment(new Date())) {
+    if (meeting.date.isBefore(dayjs())) {
       sortedMeetings.push(meeting);
     }
   }
