React Frontend Developer

Question 1

Что такое setTimeout и setInterval?

Accepted Answer

setTimeout выполняет указанную функцию один раз через заданное время, а setInterval — периодически, с указанным интервалом. Оба метода работают асинхронно, что значит, что они не блокируют основной поток выполнения программы. Чтобы остановить выполнение setInterval, нужно вызвать clearInterval, а для остановки отложенного вызова setTimeout — clearTimeout.

Question 2

Как реализовать "ленивые" вычисления (lazy evaluation) в JavaScript?

Accepted Answer

Ленивые вычисления в JavaScript означают, что результат вычисления будет возвращен только по мере необходимости, а не сразу. Это может улучшить производительность, особенно если результаты не всегда нужны. Ленивые вычисления можно реализовать с помощью функций, возвращающих другие функции или используя генераторы, которые позволяют приостанавливать и возобновлять выполнение.

Question 3

Как написать React-компонент, чтобы при монтировании запускался setInterval, выводящий в консоль "Hello world" каждые 10 секунд? Что важно учесть при такой реализации с setInterval?

Accepted Answer

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log('Hello world');
  }, 10000);
  return () => clearInterval(intervalId); // Очистка при размонтировании
}, []);Важно:Очистка в return — иначе интервал будет работать после удаления компонента.Пустой массив зависимостей [] — чтобы эффект выполнился только при монтировании.

Question 4

Как setInterval и setTimeout влияют на this?

Accepted Answer

В обычных функциях this внутри setInterval/setTimeout теряется (становится window/undefined в strict mode). Стрелочные функции сохраняют this из внешнего контекста.

Question 5

Отличие анимации при использовании requestAnimationFrame и SetInterval

Accepted Answer

setInterval выполняет функцию с фиксированной задержкой, не учитывая частоту обновления экрана, что может приводить к пропуску кадров и лишним вычислениям. requestAnimationFrame синхронизирует выполнение кода анимации с частотой обновления экрана (обычно 60 кадров/с), что делает анимацию плавной и эффективной. Он также автоматически останавливается, когда пользователь переходит на другую вкладку, экономя ресурсы. Для плавных анимаций всегда следует предпочитать requestAnimationFrame.

Question 6

Почему setInterval нужно очищать при размонтировании компонента?

Accepted Answer

setInterval продолжает работать даже после того, как компонент исчез со страницы, потому что он живёт отдельно от React. Если интервал не очистить, он будет дальше выполнять код, тратить ресурсы и может пытаться обновлять state уже размонтированного компонента. Это приводит к лишним вычислениям, странным багам и предупреждениям в консоли. Поэтому таймеры нужно останавливать в cleanup-функции useEffect.

Question 7

Как корректно очищать setInterval в useEffect?

Accepted Answer

setInterval очищается через clearInterval, вызванный в функции, которую возвращает useEffect. Эта функция выполняется при размонтировании компонента и перед повторным запуском эффекта. Важно сохранить идентификатор интервала в переменную внутри эффекта. Такой подход гарантирует, что таймер не продолжит работать после ухода компонента со страницы.

Question 8

Чем setInterval хуже setTimeout для polling?

Accepted Answer

setInterval запускает обработчик по расписанию, даже если предыдущий запрос ещё не закончился, из-за чего появляются параллельные запросы и лишняя нагрузка. Интервалы также “плывут” (drift): если обработчик выполняется долго, фактические моменты запуска смещаются. setTimeout удобнее для polling, потому что позволяет запускать следующий запрос после завершения предыдущего и гибко менять задержку (например, при ошибках увеличить).

Question 9

В каком порядке вызываются valueOf и toString?

Accepted Answer

При приведении объекта к примитиву JavaScript сначала пытается вызвать valueOf, а если он не возвращает примитив, вызывает toString. Этот порядок применяется по умолчанию для числового контекста. Если результат всё ещё не примитив, выбрасывается ошибка. Поведение строго описано в спецификации.

Question 10

Как работают методы Object.keys и Object.values в JavaScript?

Accepted Answer

Методы Object.keys и Object.values позволяют извлекать ключи и значения объекта соответственно:Object.keys возвращает массив всех ключей объекта.Object.values возвращает массив всех значений объекта.

Вопросы React Frontend Developer