Корректировать работу компонента: отображение скролла и асинхронного числа

Условие

Требуется реализовать React‑компонент, который делает два действия: 1️⃣ Показывает текущее значение вертикального скролла окна (window.scrollY). 2️⃣ После монтирования компонента получает случайное число асинхронно и выводит его. Нужно проанализировать существующую реализацию, выявить и объяснить как можно больше ошибок, а затем исправить их.

import React, { useState, useEffect } from 'react';

// Имитация запроса к серверу – возвращаем число асинхронно
const fetchRandomNumber = () => Promise.resolve(Math.random());

const NumberAndScroll = () => {
    const [randNum, setRandNum] = useState();
    const [yPos, setYPos] = useState();

    useEffect(() => {
        // получаем число и сохраняем в стейт
        fetchRandomNumber().then(setRandNum);
        // обработчик скролла
        const onScroll = () => setYPos(window.scrollY);
        window.addEventListener('scroll', onScroll);
        // очистка при размонтировании
        return () => window.removeEventListener('scroll', onScroll);
    }, []);

    return (
        <div>
            <div>Number: {randNum}</div>
            <div>Scroll: {yPos}</div>
        </div>
    );
};

В описании следует указать, какие проблемы были найдены (неправильный async‑useEffect, отсутствие массива зависимостей, утечка обработчика, опечатка в имени события, отсутствие начальных значений стейтов и т.д.) и как они исправлены.

Ответ

Перечисленные в описании ошибки уже отсутствуют: эффект не async, зависимости [] есть, scroll написан верно и слушатель удаляется. Исправить стоит начальный scroll и поздний ответ запроса.

Не приписывайте коду несуществующие дефекты. Для начального положения вызовите onScroll сразу; добавьте error-состояние и защиту после cleanup:

useEffect(() => {
  let active = true;
  const onScroll = () => setYPos(window.scrollY);
  onScroll();
  window.addEventListener('scroll', onScroll, { passive: true });
  fetchRandomNumber().then(
    value => { if (active) setRandNum(value); },
    () => { if (active) setError('Не удалось получить число'); }
  );
  return () => {
    active = false;
    window.removeEventListener('scroll', onScroll);
  };
}, []);

Объявите const [error, setError] = useState('') и выведите его; для randNum можно использовать null и показывать загрузку. Не проверяйте число через truthy: 0 тоже допустим.