React Frontend Developer

Question 1

Что такое Distributive Conditional Types в TypeScript?

Accepted Answer

Distributive Conditional Types — это условные типы, которые автоматически распределяются по элементам union-типа. Это мощный механизм для трансформации типов в более гибкие и детализированные конструкции.

Question 2

Где могут быть полезны Conditional Types?

Accepted Answer

Conditional Types (условные типы) в TypeScript позволяют определять типы, которые выбираются на основе условия, проверяющего другие типы. Они чрезвычайно полезны для создания общих (generic) утилит, которые динамически адаптируются к переданным им типам. Классические примеры — это типы Exclude, Extract, NonNullable, а также для определения типов возвращаемого значения функций или типов свойств в глубоко вложенных структурах.

Question 3

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

Accepted Answer

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

Question 4

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

Accepted Answer

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

Question 5

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

Accepted Answer

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

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