React Frontend Developer

Question 1

Как debouncing помогает при работе с input и частыми обновлениями состояния?

Accepted Answer

Debounce откладывает выполнение функции до тех пор, пока события не прекратятся на заданное время. Это снижает количество обновлений state и ререндеров при вводе текста. Обычно debounce применяют для поиска, фильтрации и запросов к API. В результате интерфейс работает плавнее, а запросов становится меньше.

Question 2

Когда следует использовать computed, а когда обычные методы?

Accepted Answer

computed следует использовать для значений, которые зависят от реактивных данных и используются в шаблоне. Методы лучше подходят для действий или вычислений, которые выполняются по событию. Если нужен кэшируемый результат — выбирают computed. Если логика должна выполняться каждый раз — метод. Это помогает избежать лишних перерисовок.

Question 3

Чем PATCH отличается от PUT?

Accepted Answer

PUT полностью заменяет ресурс, отправляя все его поля, даже если меняется только одно. PATCH применяет частичное обновление, изменяя только переданные поля. PUT идемпотентен — повторный запрос даёт тот же результат. PATCH не обязательно идемпотентен, если изменения накапливаются.

Question 4

Можно ли полностью заменить ресурс через PATCH?

Accepted Answer

Да, технически можно, но это нарушает семантику REST. PATCH предназначен для частичного обновления ресурса, а PUT — для полной замены. Использование PATCH для полной замены может ввести в заблуждение других разработчиков и нарушить контракт API.

Question 5

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

Accepted Answer

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

Question 6

Будет ли рендериться дочерний компонент при наборе текста в input и по какой причине?

Accepted Answer

Да, дочерний компонент будет рендериться заново при каждом наборе текста в input. Это происходит потому, что изменение состояния (через useState) в родительском компоненте вызывает его повторный рендер, что по умолчанию приводит к повторному рендеру всех дочерних компонентов. React не оптимизирует это автоматически, если не использовать React.memo или другие методы.

Question 7

Как сделать дочерний компонент более оптимизированным, чтобы он не рендерился при наборе текста в input?

Accepted Answer

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

Вопросы React Frontend Developer