Sobes.tech
Back to tasks
Junior — Senior
28

Разбор и исправление проблем в useEffect‑хукe

Companies where asked:

Сибинтэк
Get help with live coding in real time with Sobes Copilot
Task condition

В этом задании рассматривается, что произойдёт при выполнении приведённого фрагмента кода и какие ошибки в нём присутствуют. Нужно понять, почему он не работает корректно, и предложить исправления.

    useEffect(() => {
        setValue(value + 1);
    }, [value ]

Что происходит сейчас:

  • Отсутствует закрывающая скобка после массива зависимостей, поэтому код не компилируется и бросает синтаксическую ошибку.
  • Даже если добавить закрывающую скобку, внутри useEffect происходит изменение состояния, которое указано в массиве зависимостей (value). Это приведёт к бесконечному циклу рендеров, потому что каждый вызов setValue будет триггерить новый запуск useEffect.

Как поправить:

  1. Закрыть вызов useEffect правильной скобкой и добавить точку с запятой: ], []); или ], [value]); в зависимости от требуемой логики.
  2. Если необходимо увеличить счётчик только один раз после монтирования, массив зависимостей должен быть пустым: useEffect(() => { setValue(prev => prev + 1); }, []);.
  3. Чтобы избежать бесконечного цикла при зависимости от value, использовать функциональную форму setValue(prev => prev + 1) и переместить логику в другое место (например, в обработчик события) либо добавить условие, которое ограничит количество обновлений.

Пример корректного кода, увеличивающего значение один раз при монтировании компонента:

    useEffect(() => {
        setValue(prev => prev + 1);
    }, []);

Или, если требуется реагировать на изменение value только в определённых условиях:

    useEffect(() => {
        if (value < 10) {
            setValue(prev => prev + 1);
        }
    }, [value]);

Таким образом, основной причиной сбоя являются синтаксическая ошибка и логическая ошибка, связанная с зависимостями в useEffect.