---
description: Хук для работы с текущей датой с возможностью автоматического обновления при смене календарного дня.
---

<Overview type="hook">

# useTodayDate

Хук для работы с текущей датой с возможностью автоматического обновления при смене календарного дня.

</Overview>

## API

### Параметры

| Параметр                    | Тип       | По умолчанию | Описание |
| --------------------------- | --------- | ------------ | -------- |
| `listenDayChangesForUpdate` | `boolean` | `false`      | Включает подписку на смену календарного дня и пересчет даты. |

### Возвращаемое значение

`Date` с текущей датой в системной таймзоне. День, месяц и год всегда актуальны.

## Особенности работы

- При `listenDayChangesForUpdate=true` дата обновляется в момент смены календарного дня.
- Хук использует [Page Visibility API](https://developer.mozilla.org/ru/docs/Web/API/Page_Visibility_API), чтобы не пропускать обновление после неактивности вкладки.
- При возврате на вкладку значение автоматически синхронизируется с системным временем.

## Практический пример

{/* @example-description: Счетчик с авто-сбросом по дате. */}

<Playground direction="column" align="stretch">
  ```jsx
  const [listenDayChanges, setListenDayChanges] = React.useState(true);
  const [counter, setCounter] = React.useState(0);
  const today = useTodayDate(listenDayChanges);

  React.useEffect(() => {
    setCounter(0);
  }, [today]);

  const formattedToday = new Intl.DateTimeFormat("ru-RU", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
  }).format(today);

  return (
    <Flex direction="column" align="start" gap="m">
      <Checkbox
        checked={listenDayChanges}
        onChange={(event) => setListenDayChanges(event.target.checked)}
      >
        Обновлять дату при смене календарного дня
      </Checkbox>

      <Caption level="1">Сегодня: {formattedToday}</Caption>
      <Caption level="1">Действий за день: {counter}</Caption>

      <Button size="m" onClick={() => setCounter((value) => value + 1)}>
        Выполнить действие
      </Button>
    </Flex>
  );
  ```
</Playground>