React Frontend Developer

Question 1

Как работают fallback-механизмы в HTML5 для старых браузеров и какие техники следует применять для кроссбраузерной совместимости?

Accepted Answer

HTML5 предлагает новые теги и функции, которые не всегда поддерживаются старыми браузерами. Чтобы страницы корректно работали в таких браузерах, используются fallback-механизмы — альтернативный контент или теги, которые подхватываются, если основной функционал недоступен. Например, для видео можно использовать элемент

Question 2

Есть ли у стрелочной функции методы call, apply и bind?

Accepted Answer

Стрелочные функции могут использовать методы call, apply и bind, но эти методы не изменяют контекст this внутри стрелочной функции. В отличие от обычных функций, стрелочные функции наследуют значение this из своей внешней области видимости (лексический контекст), и методы call, apply и bind не могут его изменить.

Question 3

Методы call, apply, bind — для чего они нужны?

Accepted Answer

Методы call и apply позволяют вызвать функцию с заданным значением this, но call передаёт аргументы через запятую, а apply — в виде массива. Метод bind возвращает новую функцию с фиксированным значением this, которая может быть вызвана позже. Эти методы полезны для контроля контекста выполнения функции, особенно при работе с методами объектов.

Question 4

Для чего нужны callback и что такое Callback Hell?

Accepted Answer

Колбэк (callback) — это функция, которая передается другой функции в качестве аргумента и вызывается позже, когда произойдет какое-то событие или завершится операция. Проблема "Callback Hell" возникает, когда функции начинают вкладываться друг в друга слишком глубоко, что делает код трудночитаемым и сложным для поддержки.

Question 5

Отличие useMemo от useCallback.

Accepted Answer

useMemo и useCallback оба предназначены для оптимизации производительности в React, но служат разным целям. useMemo запоминает вычисленные значения, а useCallback запоминает функции. Это позволяет избежать лишних вычислений и создания функций при каждом рендере компонента.

Question 6

Объясните разницу между последовательным и параллельным выполнением асинхронных функций. Как работают Promise.all() и Promise.allSettled()?

Accepted Answer

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

Метод Promise.all() запускает несколько промисов параллельно и возвращает результат, когда все они успешно завершатся, а Promise.allSettled() возвращает результат независимо от того, завершился ли каждый промис успехом или ошибкой.

Question 7

Что такое маршруты-заглушки (fallback routes), и как их реализовать?

Accepted Answer

Маршруты-заглушки обрабатывают ситуации, когда запрашиваемый маршрут не существует. Они реализуются с помощью маршрута * и позволяют показывать страницу ошибки или редиректить на основной маршрут.

Question 8

Для чего нужны useMemo и useCallback? Как работает мемоизация?

Accepted Answer

useMemo: Кэширует результат вычислений, пересчитывая только при изменении зависимостей.useCallback: Кэширует функцию, предотвращая её пересоздание.Оба помогают избежать лишних ререндеров.

Question 9

Где хранить кэшированные данные? (LocalStorage, IndexedDB). Что делать, если IndexedDB не поддерживается?

Accepted Answer

Для кэширования данных используйте LocalStorage для небольших текстовых данных (до 5MB), IndexedDB для больших объемов и сложных структур. Если IndexedDB не поддерживается, можно использовать LocalStorage как fallback, либо реализовать полифилл для IndexedDB. Для совсем старых браузеров можно использовать cookies или серверное хранение.

Question 10

Есть два параллельных запроса: один возвращает A, другой B. Как получить их результаты и объединить A и B, если нельзя использовать Promise.all?

Accepted Answer

Для объединения результатов двух параллельных запросов без Promise.all можно использовать: счетчик завершения, async/await с отдельными await, Promise.race для контроля времени, или ручное создание промисов с отслеживанием состояния. Также подходят библиотеки как RxJS или кастомная реализация механизма ожидания.

Вопросы React Frontend Developer