useTime Performance

[Finton140]

Problem
Using the useTime hook, there is significant performance slowdown with small intervals.
When selecting a time element, the state change is noticably slow (~500-1000ms).

Steps to Reproduce
Included below is the code for a simple time picker:

const TimePickerIsolated = () => {
  const [selectedDates, onDatesChange] = useState<Date[]>([new Date()]);

  const state = useDatePickerState({
    selectedDates,
    onDatesChange,
    focusDate: new Date(),
    time: {
      interval: 1
    }
  })

  const { time } = useTime(state)
  const { timeButton } = useTimePropGetter(state);

  // If hours/minutes are one digit (e.g. 6 for 6am), then pad with a zero (e.g. 06 for 6am)
  const selectedHours = selectedDates[0]?.getHours().toString().padStart(2, '0')
  const selectedMinutes = selectedDates[0]?.getMinutes().toString().padStart(2, '0')
  const selectedTime = `${selectedHours}:${selectedMinutes}`

  return (
    <ul>
      {time.map((t) => (
        <li key={t.$date.toString()}>
          <button className={`${selectedTime === t.time ? 'bg-green-300' : ''} disabled:text-gray-300`} {...timeButton(t)}>{t.time}</button>
        </li>
      ))}
    </ul>
  )
}

Try using this with an interval of 30 and observe the speed, then set the interval to 1 and observe the speed.

I am using tailwind to change the background colour to visually show this, but this can be replaced with vanialla css if needed.

[Finton140]

According to Chrome profiler, the majority of the work done is in the formatTime function:

[Pavlo Feshchenko]

@Finton140 , hey, thanks for reporting.
This is the native JS feature, I will look at how we can replace it to provide better performance

[Pavlo Feshchenko]

@Finton140, hey.
Please check v6.1.0 it doesn't use getLocaleTimeString automatically.

[Pavlo Feshchenko]

Please LMK if this doesn't help with time performance