React Frontend Developer

Question 1

Как определить порядок вывода console.log в асинхронном коде?

Accepted Answer

Чтобы определить порядок вывода console.log, нужно понимать работу event loop. Сначала всегда выполняется синхронный код из call stack. Затем выполняются все микрозадачи (например, then, catch, finally). Только после этого обрабатываются макрозадачи (setTimeout, setInterval, события). Зная, к какой очереди относится операция, можно точно предсказать порядок логов.

Question 2

Что выведется в console.log при разных вариантах вызова функций с контекстом?

Accepted Answer

Значение this зависит от способа вызова функции. При обычном вызове функции this ссылается на глобальный объект (в нестрогом режиме) или undefined (в строгом). При вызове как метода объекта this указывает на этот объект. Методы call, apply и bind позволяют явно задать контекст. Стрелочные функции не имеют своего this и используют контекст окружающей лексической области.

Question 3

Как избежать лишних вызовов console.log в дочернем компоненте?

Accepted Answer

Лишние вызовы console.log в дочернем компоненте возникают из-за повторного рендеринга. Чтобы их избежать, используйте React.memo для предотвращения ненужных рендеров, если пропсы не изменились. Также можно обернуть функции в useCallback и значения в useMemo, чтобы стабилизировать ссылки. Это особенно полезно при передаче колбэков или объектов в дочерние компоненты.

Question 4

Является ли console.log чистой функцией?

Accepted Answer

Нет, console.log не является чистой функцией. Чистая функция должна возвращать одинаковый результат для одинаковых аргументов и не вызывать побочных эффектов. console.log выводит данные в консоль, что является побочным эффектом, и возвращает undefined, а не результат вычислений.

Question 5

Как правильно расставлять console.log для отладки асинхронного кода? На что обращать внимание в порядке вывода?

Accepted Answer

При отладке асинхронного кода важно помнить, что console.log выполняется синхронно, но может показывать значения, которые изменятся позже. Порядок вывода зависит от очереди событий и микрозадач. Используйте console.log внутри колбэков и промисов, чтобы отследить реальный порядок выполнения.

Question 6

В компоненте расставлены console.log в родительском и дочернем компонентах, а также в useEffect. В каком порядке они выведутся и почему?

Accepted Answer

Сначала выполняется console.log в теле родительского компонента, затем в теле дочернего. После монтирования DOM вызываются useEffect: сначала родительский, потом дочерний. Это связано с тем, что рендеринг компонентов происходит сверху вниз, а эффекты — снизу вверх после завершения рендеринга.

Вопросы React Frontend Developer