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

Question

Маяк · Accepted Answer

1. Расскажи про модульную архитектуру на твоём проекте — какова была структура проекта?
2. Какие ещё архитектуры фронтенд-проектов знаешь?
3. Какие виды событий в JavaScript знаешь? Какие чаще всего используешь в работе?
4. Как мы подписываемся на то или иное событие?
5. Где в React-компоненте производится подписка на события?
6. В чём суть и отличие preventDefault и stopPropagation?
7. Зачем на практике может понадобиться отменить всплытие события (stopPropagation)? Приведи реальный кейс.
8. Что такое fetch? Как он работает?
9. Какой параметр fetch является обязательным?
10. В чём разница между type и interface в TypeScript?
11. Что такое type guards в TypeScript? Приведи пример использования.
12. Зачем нужен тег script в HTML? Расскажи про его атрибуты async и defer и разницу между ними.
13. Если скрипт написан инлайн внутри тега script (без атрибута src), сработает ли атрибут async/defer?
14. Расскажи про инлайновые стили в CSS: использовал ли их, зачем они нужны и как их переопределить, если очень захочется?
15. Как выглядит / как задаётся инлайн-стиль (в JSX и через атрибут)?
16. Расскажи про специфичность селекторов в CSS — как она работает?
17. Вопрос со звёздочкой: если в инлайн-стиле указать color: red !important, а в CSS-файле color: blue !important — какого цвета будет текст?
18. В чём отличие git merge от git rebase? Какую команду предпочитаешь и приходилось ли использовать?
19. Если в ветке работаешь только ты один (никто больше не коммитит и не пушит) — что будешь использовать: merge или rebase?
20. Ситуация: мы взяли компонент из библиотеки, он написан полностью на div, и браузер не понимает, что это кнопка. Как дать понять браузеру, что это кнопка, если мы можем прокинуть любой атрибут/пропс?
21. Лайвкодинг: реализовать функцию calculator с тремя параметрами (два числа и операция). Поддержать четыре оператора, возвращать ошибку при невалидном операторе, обработать невалидные типы аргументов (не number / NaN) и деление на ноль.
22. Как можно оптимизировать функцию calculator и сделать её более расширяемой, если придётся поддерживать новые кейсы?
23. Лайвкодинг (TypeScript): протипизировать массив persons из двух сущностей — user (только у него есть ключ occupation) и admin (только у него есть ключ role) — и функцию logPerson, в т.ч. написать type guard.
24. Какая утилита TypeScript помогает взять из типа только поля name и age (вместо Omit)?
25. Каким ещё образом можно задать тип переменной persons, кроме явной аннотации? (через as)
26. Чем отличается satisfies Person[] от as Person[]?
27. Зачем существует as const? Что мы увидим в типах, если его применим?
28. Модифицируй функцию logPerson так, чтобы она принимала любой тип через дженерик, а если тип не задан — по умолчанию использовался Person.
29. Напиши собственную utility-тип утилиту, которая превращает переданный тип в Readonly (итерация по ключам через mapped types).
30. Напиши собственную utility-тип утилиту, которая извлекает тип из промиса (через infer).
31. Почему в утилите извлечения типа из промиса ты решил вернуть unknown, а не просто тот тип, который передали?
32. Лайвкодинг (React): пройтись по дереву данных, отрендерить всё дерево рекурсивно и реализовать функционал скрытия/раскрытия children узлов.
33. Для чего мы используем атрибут key при рендере списка компонентов?
34. Можем ли мы использовать key только в списках, или в любом JSX-элементе?
35. Почему в данной ситуации обработчик onToggle можно спокойно не оборачивать в useCallback?
36. Для чего нам нужен React.memo?
37. Можем ли мы контролировать сравнение пропсов в React.memo?
38. Почему в этой ситуации мы используем useState, а не useRef?
39. Напиши, как бы мы делали запрос, если бы данные дерева приходили с сервера (fetch в useEffect, состояние, try/catch).
40. Что нужно сделать, если мы переходим на другую страницу, а запрос уже полетел? Как его отменить?
41. Чем отличается useEffect от useLayoutEffect?
42. Почему ты вынес асинхронную логику в отдельную функцию внутри useEffect?
43. Что было бы с нашим компонентом, если бы данные приходили не в трёх вложенностях, а в миллионах? Как избежать лагов интерфейса?
44. Как облегчить браузеру работу, если на одном уровне дерева очень много элементов?
45. Если все данные приходят разом и проблема в большом количестве уровней вложенности — как решить раскрытие/скрытие более нативно, с минимумом JavaScript?
46. Расскажи про твой опыт работы с GraphQL: насколько плотно работал, какие фреймворки/клиенты использовал?
47. Какие ещё способы отправки запросов/обмена данными с сервером существуют, кроме GraphQL/HTTP?
48. Где лучше хранить токены на клиенте?
49. Как помочь нашему сайту лучше попадать в поисковую выдачу (SEO)?
50. Можем ли мы существовать без стейт-менеджеров? Чем их заменить и какие минусы?