Назад к задачам
Junior — Senior
6

Обнаружить и исправить баги в React‑компоненте

Получайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Условие задачи

Найдите и устраните ошибки в представленном ниже React‑компоненте, который использует хуки useState и useEffect. Обратите внимание на корректность работы асинхронного эффекта и правильное управление событиями прокрутки окна.

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

// Имитация запроса к серверу
const fetchCall = () => Promise.resolve(Math.random());

const NumberAndScrollX = () => {
    const [number, setNumber] = useState(0);
    const [scroll, setScroll] = useState(0);

    useEffect(async () => {
        setNumber(await fetchCall());
    }, []); // Пустой массив зависимостей для выполнения эффекта только при монтировании

    useEffect(() => {
        const handleScroll = () => setScroll(window.scrollY);
        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []); // Очистка эффекта при размонтировании

    return (
        <div>
            <div>Number: {number}</div>
            <div>ScrollY: {scroll}</div>
        </div>
    );
};

export default NumberAndScrollX;