Отрефакторите компонент, который рендерит случайное число (из Promise) и положение скролла. Найдите проблемы и исправьте их.

Основные проблемы с компонентом, который рендерит случайное число из Promise и положение скролла, обычно связаны с:

• Запуском асинхронных операций напрямую в теле компонента, что приводит к бесконечным перерендериваниям.
• Отсутствием очистки слушателей событий (например, скролла), что вызывает утечки памяти.
• Некорректным управлением состоянием.

Пример исправленного React-компонента с хуками:

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

function RandomNumberAndScroll() {
  const [randomNumber, setRandomNumber] = useState(null);
  const [scrollPosition, setScrollPosition] = useState(window.scrollY);

  useEffect(() => {
    // Получаем случайное число из Promise один раз при монтировании
    const fetchRandomNumber = async () => {
      const number = await new Promise(resolve => {
        setTimeout(() => resolve(Math.floor(Math.random() * 100)), 500);
      });
      setRandomNumber(number);
    };
    fetchRandomNumber();
  }, []); // пустой массив зависимостей — вызов один раз

  useEffect(() => {
    const handleScroll = () => {
      setScrollPosition(window.scrollY);
    };
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div>
      <p>Случайное число: {randomNumber !== null ? randomNumber : 'Загрузка...'}</p>
      <p>Положение скролла: {scrollPosition}px</p>
    </div>
  );
}

export default RandomNumberAndScroll;

Ключевые моменты:

• Асинхронный вызов обернут в useEffect с пустым массивом зависимостей, чтобы не вызывать его при каждом рендере.
• Обработчик скролла добавляется и удаляется корректно, чтобы избежать утечек.
• Состояния обновляются через useState.

Это обеспечивает стабильную и эффективную работу компонента.