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, чтобы их ссылки оставались стабильными.

Question 8

Как реализовать анимированный аккордеон без JavaScript, используя HTML-элемент , и CSS-переход?

Accepted Answer

Аккордеон без JavaScript реализуется с помощью скрытого чекбокса и метки. Чекбокс хранит состояние открытия/закрытия, а CSS-селектор :checked управляет отображением контента. Для анимации используется CSS-переход свойства max-height или transform. Это простой и доступный способ создания интерактивных элементов без скриптов.

Question 9

Чем отличается событие click от события input при обработке пользовательского ввода?

Accepted Answer

Событие click срабатывает при клике мышью на элементе, а событие input — при изменении значения элемента ввода (например, текстового поля). Click используется для действий, таких как отправка формы, а input — для отслеживания каждого изменения ввода в реальном времени.

Question 10

Что такое OutputEmitter (EventEmitter) в Angular и как он используется?

Accepted Answer

OutputEmitter в Angular — это декоратор, который позволяет дочернему компоненту отправлять события родительскому. Он использует класс EventEmitter для создания пользовательских событий. Родительский компонент подписывается на эти события через шаблон, используя привязку в круглых скобках. Это основной способ передачи данных от дочернего компонента к родительскому.

Вопросы React Frontend Developer