Как исправить эффект загрузки даты и обработчик resize

Условие

React-компонент получает дату через fetchDate(): Promise<string>, показывает innerWidth и счётчик. Сейчас эффект объявлен async, не имеет dependencies и добавляет анонимный resize-listener без cleanup. Как исправить?

Ответ

Эффект должен синхронно возвращать cleanup, а async-работа запускается внутри. Добавьте зависимости, снимайте resize-listener и используйте функциональное увеличение счётчика.

Пример тела эффекта при объявленных setDate, setError, setWidth:

useEffect(() => {
  let active = true;
  const resize = () => setWidth(window.innerWidth);
  resize();
  window.addEventListener('resize', resize);
  fetchDate().then(value => {
    if (active) setDate(value);
  }).catch(() => { if (active) setError('Не удалось загрузить дату'); });
  return () => {
    active = false;
    window.removeEventListener('resize', resize);
  };
}, []);

Для кнопки: setCount(v => v + 1). Центрирование: min-height:100dvh; display:grid; place-items:center на контейнере.