Handling Time Zones in JavaScript and React: The Right Way

The Golden Rules of Time Zones in JavaScript

1. Store in UTC, display in local — All dates in your database should be UTC.
2. Use IANA timezone names — "America/New_York", not "EST" (which is ambiguous with DST).
3. Never use moment.js — It's deprecated. Use date-fns-tz, luxon, or Intl.DateTimeFormat.

Quick Examples

// ✅ Convert UTC to a specific timezone
import { utcToZonedTime, format } from 'date-fns-tz';

const utcDate = new Date('2026-08-04T12:00:00Z');
const tokyoTime = utcToZonedTime(utcDate, 'Asia/Tokyo');
console.log(format(tokyoTime, 'yyyy-MM-dd HH:mm:ss', { timeZone: 'Asia/Tokyo' }));
// → "2026-08-04 21:00:00"

// ✅ Display in user's local timezone (browser)
const localTime = new Date().toLocaleString('en-US', {
  timeZone: 'America/New_York',
  hour: '2-digit',
  minute: '2-digit',
});

Common Mistakes to Avoid

• ❌ new Date('2026-08-04') — parsed as UTC, displayed as local. Confusing!
• ❌ Hardcoding offsets like +05:30 — doesn't account for DST changes.
• ❌ Comparing dates as strings — use timestamps (milliseconds) instead.
• ✅ Use date-fns-tz or luxon for all timezone operations.