React: вопросы на собеседовании

Вопросы и ответы по React: подготовка, примеры и типичные ошибки.

1. Что такое ключи (keys) в списках React и почему они важны?
   Junior· спрашивают почти всегда· полный разбор — Jobs/Boost
2. Каковы основные отличия React 18 от React 19?
   Senior· спрашивают почти всегда
3. В каких типах frontend-проектов React даёт реальный выигрыш, а где будет избыточен или неудачен?
   Middle· спрашивают почти всегда· полный разбор — Jobs/Boost
4. Объясните правила хуков. Почему хуки нельзя вызывать условно?
   Junior· спрашивают почти всегда
5. Что такое хук useEffect и как работает его массив зависимостей?
   Middle· спрашивают почти всегда· полный разбор — Jobs/Boost
6. Объясните хук useState. Какие типичные ошибки возникают при обновлении состояния?
   Junior· спрашивают почти всегда· полный разбор — Jobs/Boost
7. Как реализовать code splitting в React-приложении?
   Middle· полный разбор — Jobs/Boost
8. Объясните Context API. Каковы его последствия для производительности?
   Middle· полный разбор — Jobs/Boost
9. Что такое контролируемые (controlled) и неконтролируемые (uncontrolled) компоненты в формах?
   Middle· полный разбор — Jobs/Boost
10. Как работает обработка ошибок в React? Что такое Error Boundaries?
    Middle
11. Что такое React Actions и useTransition? Как они улучшают UX?
    Senior· полный разбор — Jobs/Boost
12. Как сравнить React с ближайшими альтернативами по DX, performance, SEO, accessibility, hiring и поддержке команды?
    Middle· полный разбор — Jobs/Boost
13. Как понять, что проблема в проекте связана с React, а не с API, сетью, дизайном состояния или плохой архитектурой?
    Senior
14. Представьте, приложение на React стало медленно открываться или часто перерисовываться. Как вы будете искать причину?
    Senior· полный разбор — Jobs/Boost
15. Какие архитектурные решения React навязывает вокруг rendering, state, routing, styling, data loading или deployment?
    Middle
16. Какие production-риски есть у React: hydration, bundle size, caching, accessibility, browser compatibility или observability?
    Senior· полный разбор — Jobs/Boost
17. Проект на React вырос из небольшого интерфейса в большой продукт. Какие архитектурные проблемы вы ожидаете увидеть?
    Senior· полный разбор — Jobs/Boost
18. Что такое React Server Components? Чем они отличаются от Client Components?
    Senior· полный разбор — Jobs/Boost
19. В чём разница между SSR (server-side rendering) и SSG (static site generation) в React?
    Middle· полный разбор — Jobs/Boost
20. Что такое Suspense в React? Как он работает с lazy loading и получением данных?
    Senior· полный разбор — Jobs/Boost
21. Как тестировать React-компоненты? В чём разница между unit, integration и e2e тестированием?
    Middle
22. Что такое хук use(), представленный в React 19?
    Senior· полный разбор — Jobs/Boost
23. Что такое useCallback и useMemo? Когда их использование действительно улучшает производительность?
    Middle· полный разбор — Jobs/Boost
24. Что такое useRef и когда его стоит использовать вместо useState?
    Junior
25. Что такое Virtual DOM и как React использует его для оптимизации рендеринга?
    Junior· полный разбор — Jobs/Boost
26. В чём разница между функциональными компонентами и классовыми компонентами?
    Junior· полный разбор — Jobs/Boost
27. Что такое «подъём состояния» (lifting state up) и когда он необходим?
    Junior
28. Что такое prop drilling и как его решить?
    Middle· полный разбор — Jobs/Boost
29. Как проектировать accessibility для модалок, меню и autocomplete в React?
    Middle· полный разбор — Jobs/Boost
30. Что такое React Compiler (стабилен в React 19) и как он меняет ручную мемоизацию?
    Senior
31. Расскажите о случае, когда вы улучшали performance, accessibility, testing или maintainability в проекте на React.
    Middle
32. Что такое React.memo? Когда он предотвращает повторный рендеринг?
    Middle· полный разбор — Jobs/Boost
33. Что такое React Portals и когда их стоит использовать?
    Middle
34. Как профилировать лишние ререндеры через React DevTools Profiler?
    Middle· полный разбор — Jobs/Boost
35. Что такое useOptimistic и когда optimistic UI ломает консистентность данных?
    Middle· полный разбор — Jobs/Boost
36. Как работает useSyncExternalStore и зачем он нужен библиотекам состояния?
    Middle
37. Что такое reconciliation в React? Как работает алгоритм сравнения (diffing algorithm)?
    Senior
38. В чём разница между useEffect и useLayoutEffect?
    Middle· полный разбор — Jobs/Boost
39. Что такое хук useReducer? Когда его предпочесть useState?
    Middle· полный разбор — Jobs/Boost
40. Что такое Higher-Order Component (HOC)? Чем он отличается от кастомного хука?
    Middle· полный разбор — Jobs/Boost
41. Что такое паттерн render props? Актуален ли он в современном React?
    Middle· полный разбор — Jobs/Boost
42. В чём разница между useImperativeHandle и обычным ref?
    Senior