Update date-fns formatDistanceToNow automatically

TimeAgo.tsx

import React, {memo, useCallback, useEffect, useRef, useState} from 'react';
import formatDistanceToNow from 'date-fns/formatDistanceToNow';

type TimeAgoProps = {
  timestamp: number,
}

const UPDATE_DELTA_MS = 10000; // 10s

const getTimeAgo = (timestamp: number): string => `${formatDistanceToNow(new Date(timestamp))} ago`;

const useTimeAgo = (timestamp: number): string => {
  const [time, setTime] = useState<string>(getTimeAgo(timestamp));
  const raf = useRef<number>(0);
  const last = useRef<number>(0);

  const updateTime = useCallback((ts: number = Date.now()): void => {
    if ((ts - last.current) >= UPDATE_DELTA_MS) {
      const next = getTimeAgo(timestamp);
      last.current = ts;

      if (next !== time) {
        setTime(next);
      }
    }

    raf.current = window.requestAnimationFrame(updateTime);
  }, [last.current, setTime, timestamp]);

  useEffect(() => {
    raf.current = window.requestAnimationFrame(updateTime);

    return () => {
      window.cancelAnimationFrame(raf.current);
    };
  }, []);

  return time;
};

const TimeAgo: React.FC<TimeAgoProps> = memo(({timestamp}) => {
  const time = useTimeAgo(timestamp);

  return (
    <div className="time-ago">{time}</div>
  );
});

export default TimeAgo;