Converting UTC Dates from the Backend to Local Time in React (with Day.js)

00:02:20:00

Introduction

In modern web applications, the backend typically sends date/time information in UTC (Coordinated Universal Time) format. This ensures consistency for users across different time zones. However, on the frontend side, we need to display this data according to the user's local time.

In this article, we'll explore step by step how to convert UTC dates to local time in a React project using Day.js.

Why Use UTC?

There are several advantages to using UTC on the backend side:

Not affected by server time differences
Prevents time zone confusion
Makes logging and reporting more reliable

Example backend response:

json

{
  "createdAt": "2026-02-02T15:30:00Z"
}

The Z here indicates that the time is in UTC.

Day.js Setup

First, let's add Day.js to our project:

bash

npm install dayjs

Then let's also use the UTC and timezone plugins:

bash

npm install dayjs-plugin-utc dayjs-plugin-timezone

Note: Day.js works with a plugin system. These plugins are required for UTC conversion.

Day.js Plugin Configuration

Somewhere in your project (e.g., src/utils/dayjs.ts), set up the following configuration:

tsx

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

export default dayjs;

Now we can use this configured Day.js instance throughout the application.

The UTC Date from the Backend

Let's say the following data comes from the backend:

json

{
  "id": 1,
  "title": "Meeting",
  "createdAt": "2026-02-02T15:30:00Z"
}

This time is 15:30 in UTC.

For Turkey (UTC+3), it should be displayed as 18:30.

Usage in React

Let's walk through a simple React component.

tsx

import React from 'react';
import dayjs from '../utils/dayjs';

interface Props {
  createdAt: string;
}

const DateInfo: React.FC<Props> = ({ createdAt }) => {
  const localDate = dayjs.utc(createdAt).local().format('DD.MM.YYYY HH:mm');

  return <span>{localDate}</span>;
};

export default DateInfo;

What Did We Do Here?

The key part of the code:

tsx

dayjs.utc(createdAt).local();

Let's break it down step by step:

1. Parsed as UTC

tsx

dayjs.utc(createdAt);

This line tells Day.js: "This date is in UTC."

2. Converted to Local Time

tsx

.local()

This method converts the time based on the browser's locale/country.

For example:

Turkey → UTC+3
Germany → UTC+1
USA (Eastern) → UTC-5

It's adjusted automatically.

3. Formatted

tsx

.format('DD.MM.YYYY HH:mm')

We printed the date in our desired format.

Example output: 02.02.2026 18:30

Manually Setting the User's Timezone

In some projects, the user's timezone comes from the backend.

Example:

json

{
  "timezone": "Europe/Istanbul"
}

In that case:

tsx

dayjs.utc(createdAt).tz('Europe/Istanbul').format('DD.MM.YYYY HH:mm');

Conclusion

Using UTC on the backend is the correct approach. However, for user experience, displaying local time on the frontend is essential.

With Day.js, this operation can be solved in a way that is:

Lightweight — Day.js is only ~2KB
Performant — minimal overhead
Easy — simple, chainable API