React Frontend Developer

Question 1

Что такое Progressive Enhancement и Graceful Degradation? Как HTML может поддерживать оба подхода?

Accepted Answer

Progressive Enhancement и Graceful Degradation — это два подхода к веб-разработке, направленные на создание адаптивных и доступных веб-приложений.

Progressive Enhancement: Старт с базовой версии и добавление улучшений для современных браузеров.

Graceful Degradation: Старт с полной версии и адаптация для старых браузеров.

Question 2

Что такое race condition при запросах?

Accepted Answer

Race condition — это ситуация, когда несколько запросов выполняются параллельно, и результат более медленного запроса перезаписывает результат более быстрого. В итоге состояние приложения может оказаться некорректным. Это часто происходит при быстрых изменениях параметров запроса. Проблема связана не со скоростью сети, а с порядком завершения запросов.

Question 3

Как возникает race condition в React?

Accepted Answer

Race condition в React возникает, когда несколько асинхронных запросов выполняются параллельно и обновляют одно и то же состояние. React не знает, какой запрос является “последним” или актуальным. В результате более старый запрос может завершиться позже и перезаписать более свежие данные. Это приводит к отображению устаревшей информации в UI.

Question 4

Как cleanup-функция помогает решить race condition?

Accepted Answer

Cleanup-функция в useEffect позволяет отменить или игнорировать результат старого запроса, когда эффект больше не актуален. Она вызывается перед повторным запуском эффекта или при размонтировании компонента. Благодаря этому устаревшие запросы не могут обновить состояние. Это один из базовых способов защиты от race condition.

Question 5

Что делает Promise.race?

Accepted Answer

Promise.race — это статический метод, который принимает массив (или итерируемый объект) промисов и возвращает новый промис. Этот новый промис завершается (разрешается или отклоняется) с тем же результатом, что и первый завершившийся промис из переданного списка. Это полезно для реализации таймаутов или когда нужен результат от самого быстрого источника данных.

Question 6

Почему код с callback может работать некорректно в асинхронном контексте?

Accepted Answer

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

Question 7

Какие проблемы могут возникать при работе с асинхронным обновлением состояния?

Accepted Answer

При асинхронном обновлении состояния в React могут возникать проблемы с устаревшими данными, когда замыкание захватывает старое значение. Также возможны race conditions, если несколько асинхронных операций обновляют состояние одновременно. Для решения нужно использовать функциональную форму setState или useReducer.

Question 8

Как решить проблему race condition при отправке запросов из input?

Accepted Answer

Race condition возникает, когда несколько асинхронных запросов отправляются последовательно, но ответы приходят в другом порядке. Это приводит к отображению устаревших данных. Решение — использовать debounce для задержки отправки запроса до завершения ввода, а также отменять предыдущие запросы с помощью AbortController или проверять актуальность ответа по идентификатору запроса.

Вопросы React Frontend Developer