React Frontend Developer

Question 1

Как работает асинхронная итерация в ES6+ с использованием for-await-of?

Accepted Answer

Асинхронная итерация с использованием for-await-of позволяет работать с асинхронными итераторами, такими как асинхронные генераторы или промисы, которые возвращают данные постепенно. Оператор for-await-of ждет разрешения каждого промиса перед переходом к следующей итерации. Это удобно для обработки потоков данных или последовательных асинхронных операций.

Question 2

Объясните защиту от Cross-Site Scripting (XSS) и Cross-Site Request Forgery (CSRF) в контексте JavaScript.

Accepted Answer

Cross-Site Scripting (XSS) — это атака, при которой злоумышленник вставляет вредоносный скрипт на веб-страницу, что позволяет ему получить доступ к данным пользователя.

Защита от XSS включает экранирование пользовательского ввода и применение Content Security Policy (CSP).

Cross-Site Request Forgery (CSRF) — это атака, при которой злоумышленник заставляет пользователя выполнить нежелательное действие на сайте, где он аутентифицирован.

Защита от CSRF включает использование уникальных токенов для подтверждения запросов и проверки заголовков.

Question 3

В чем различия forEach и map?

Accepted Answer

forEach просто перебирает массив и выполняет функцию для каждого элемента, не возвращая новый массив. map тоже перебирает массив, но создает и возвращает новый массив с результатами вызова функции для каждого элемента.

Question 4

Почему использовать ::before/::after для 10k элементов эффективнее, чем добавлять DOM-узлы?

Accepted Answer

Псевдоэлементы (::before, ::after) не создают реальных DOM-узлов, а рендерятся браузером на уровне CSS. Это снижает нагрузку на DOM-дерево и ускоряет рендеринг.

Question 5

Почему при центрировании через position: absolute и top/left: 50% часто используют transform: translate(-50%, -50%)?

Accepted Answer

transform: translate(-50%, -50%) смещает элемент обратно на половину его собственной ширины и высоты, что позволяет точно отцентрировать элемент относительно точки top/left: 50%.

Question 6

Как работал с формами в React? (React Hook Form, Formik)

Accepted Answer

React Hook Form предоставляет минимальный boilerplate и высокую производительность через uncontrolled components. Formik предлагает более декларативный подход с controlled components и встроенной валидацией

Question 7

Как бы вы спроектировали биржевой терминал или аналитическую платформу (напр., для Forex)? Опишите схему от фронтенда до развертывания и баз данных. На что нужно обратить внимание?

Accepted Answer

Для биржевого терминала нужна архитектура с низкой задержкой: фронтенд на React с WebSocket-соединениями, бэкенд на микросервисах с горизонтальным масштабированием, кэширование в Redis для быстрого доступа к данным, временные ряды в ClickHouse для аналитики и PostgreSQL для основных операций. Особое внимание - на географическое распределение серверов близко к биржам, репликацию данных и отказоустойчивость.

Question 8

Почему transform считается более производительным для анимаций?

Accepted Answer

transform не вызывает перерасчёт Layout.Он работает на этапе Composite.Браузер может обрабатывать такие анимации на GPU.Это делает анимации более плавными и менее затратными.

Question 9

Какие плюсы и минусы у многоэтапных анимаций (video → SVG → scale / transform)?

Accepted Answer

Многоэтапные анимации позволяют добиться вау-эффекта и гибкости, но усложняют реализацию и поддержку. Они увеличивают количество ассетов и логики синхронизации. Часто такие анимации тяжелее оптимизировать и тестировать. Их используют, когда один формат не даёт нужного результата. Важно понимать, оправдана ли такая сложность.

Question 10

Что такое force remount и когда его применяют

Accepted Answer

force remount — это принудительное пересоздание компонента с нуля, а не его обновление. Чаще всего это делается через изменение key. При remount компонент теряет всё внутреннее состояние и эффекты запускаются заново. Используется редко и осознанно.

Вопросы React Frontend Developer