React Frontend Developer

Question 1

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

Accepted Answer

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

Question 2

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

Accepted Answer

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

Question 3

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

Accepted Answer

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

Question 4

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

Accepted Answer

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

Question 5

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

Accepted Answer

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

Question 6

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

Accepted Answer

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

Question 7

Как выглядит контролируемый input в React?

Accepted Answer

Контролируемый input в React — это элемент, значение которого хранится в состоянии компонента и обновляется через обработчик onChange. Значение input берется из state, а не из DOM. Это позволяет React полностью контролировать ввод данных. Пример:  setValue(e.target.value)} />.

Question 8

Как получить доступ к значению неконтролируемого input в React?

Accepted Answer

Для доступа к значению неконтролируемого input в React используется хук useRef. Создайте ref с помощью useRef и передайте его в атрибут ref элемента input. Затем значение можно получить через inputRef.current.value, например, при отправке формы или по клику на кнопку.

Question 9

Какой элемент управления лучше использовать для выбора числового значения из большого диапазона: select с множеством пунктов или range+input? Почему?

Accepted Answer

Для выбора числового значения из большого диапазона лучше использовать input type="range" (ползунок) с дополнительным числовым полем. Select с множеством пунктов неудобен при большом количестве опций, так как требует прокрутки и усложняет поиск. Range обеспечивает быстрый визуальный выбор, а числовое поле — точное значение.

Question 10

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

Accepted Answer

В React для реализации такой формы используется управляемый компонент: значение select хранится в состоянии, и на его основе условно рендерятся дополнительные поля. При изменении select обновляется состояние, что вызывает перерисовку с нужными полями. Это позволяет гибко менять структуру формы без прямого манипулирования DOM.

Вопросы React Frontend Developer