Какие вопросы задают на собеседовании в Сбер (frontend, middle_plus)?

Question

Маяк · Accepted Answer

1. Задача на трансформацию данных: по массиву заказов вернуть массив customer ID со статусом completed, просуммировав суммы (amount) всех заказов по каждому customer ID, отсортировав по убыванию суммы и обрезав до нужного количества элементов.
2. Задача на обход дерева: обойти вложенную древовидную структуру (объект) и собрать значения-примитивы в результирующий массив (рекурсивно, через Object.values).
3. Сталкивался ли ты с такой штукой, как debounce/throttle?
4. Написать свой хук useDebounce (хотя бы концептуально / псевдокодом): хук принимает строку поиска и delay, выполняет отложенный запрос через searchFunction и возвращает data, статус загрузки и статус ошибки.
5. Как ты организовываешь взаимодействие между сторами: как понимаешь, что положить в глобальный стор, а что хранить в локальном стейте компонента?
6. При создании нового функционала (например, нового виджета) чем ты руководствуешься при разбивке на компоненты? Есть ли принципы декомпозиции?
7. Что такое инверсия зависимостей? Расскажи, что это за принцип.
8. Кейс: нужно изменить компонент (кнопку), который используется во многих местах проекта — аналитик просит поменять шрифт только в одном конкретном виджете. Как будешь это делать?
9. Расскажи про цикл рендера компонента в React: как это происходит, какие стадии есть?
10. Как React понимает, что нужно что-то перерисовать? Что триггерит ререндер?
11. В приложение пришёл список из 10 000 элементов. Как мы можем его оптимизировать?
12. Расскажи про React.memo: что это такое, для чего используется и всегда ли нужно его использовать?
13. Расскажи, как работает event loop в браузере (синхронный код, очереди микрозадач и макрозадач, порядок выполнения).
14. Задачка на event loop: определить порядок вывода console.log в коде с синхронным кодом, микрозадачами (промисами) и макрозадачами (таймерами).
15. Что такое Virtual DOM и какова его роль в React?
16. Зачем нужны ключи (keys) при рендере списков в React и как с ними можно «выстрелить себе в ногу»?
17. К какому типу списка всё-таки можно применять индексы в качестве ключей?
18. Что произойдёт, если в useEffect сделать setState?
19. А если массив зависимостей useEffect не пустой и в нём лежит стейт, который изменяется внутри эффекта — что произойдёт?
20. Кейс: что будешь делать, если не знаешь, как решить задачу?
21. Кейс: твоя задача находится в модуле, который никто не рефакторил и в котором нет тестов. Как поступишь — будешь рефакторить или нет?
22. Кейс на архитектуру: заказчику нужно ~60 форм, бэкенд хранит N XML-файлов (одна форма = один файл) и готов согласовать формат передачи на фронт. Как с точки зрения фронтенд-архитектуры спроектировать модуль для создания и отображения таких форм?