Якщо ви готуєтесь до співбесіди на позицію React розробника, важливо не лише знати синтаксис JavaScript, але й розуміти принципи роботи компонентів, станів, життєвого циклу та сучасних фіч React. Цей список з 50 основних питань і коротких відповідей допоможе швидко освіжити знання та підготуватись до співбесіди.
1. Що таке React?
React — це бібліотека JavaScript для побудови користувацьких інтерфейсів, яка дозволяє створювати компоненти та керувати станом застосунку ефективно.
2. Що таке JSX?
JSX — синтаксичне розширення JavaScript, яке дозволяє писати розмітку, схожу на HTML, всередині JS-коду.
3. Що таке компонент у React?
Компонент — це окремий блок UI, який може бути функціональним або класовим, з власним станом та логікою.
4. Різниця між класовим і функціональним компонентом?
Класові компоненти використовують class і this.state, функціональні — це прості функції, стан у яких можна додавати через хук useState.
5. Що таке props?
Props — це властивості, які передаються від батьківського компонента до дочірнього для налаштування поведінки або відображення.
6. Що таке state?
State — внутрішній стан компонента, який можна змінювати та який впливає на рендеринг.
7. Як оновлюється state?
Через метод setState у класових компонентах або функцію setState з хуку useState у функціональних.
8. Що таке useEffect?
Хук для роботи з побічними ефектами, наприклад запити на сервер, підписки або оновлення DOM.
9. Різниця між useEffect і componentDidMount?
useEffect може замінювати кілька життєвих циклів класових компонентів: componentDidMount, componentDidUpdate та componentWillUnmount.
10. Що таке ключі (key) у списках?
Ключі допомагають React ефективно відслідковувати елементи списку та уникати непотрібного перерендеру.
11. Що таке контекст (Context)?
Context дозволяє передавати дані через компоненти без передачі через props на кожному рівні.
12. Як створити Context?
Через React.createContext() і використовувати Provider для надання значень та useContext для отримання їх у дочірніх компонентах.
13. Що таке React Router?
Бібліотека для організації маршрутизації в React SPA (односторінкових застосунках).
14. Як передати параметри у маршруті?
Через :paramName у шляху та отримати їх через хук useParams.
15. Що таке controlled component?
Компонент форми, значення якого контролюється state React.
16. Що таке uncontrolled component?
Компонент форми, значення якого контролюється DOM, наприклад через ref.
17. Що таке React Hooks?
Функції, що дозволяють використовувати стан та інші можливості React у функціональних компонентах.
18. Назви основні хуки React.useState, useEffect, useContext, useRef, useReducer, useMemo, useCallback.
19. Що таке useRef?
Хук для збереження mutable посилань на DOM елементи або змінних між рендерами.
20. Що таке useMemo?
Хук для мемоізації обчислень, щоб не виконувати важкі функції на кожному рендері.
21. Що таке useCallback?
Хук для мемоізації функцій, щоб не створювати їх заново на кожному рендері.
22. Що таке Higher-Order Component (HOC)?
Функція, яка приймає компонент і повертає новий компонент з додатковою логікою.
23. Що таке render props?
Паттерн, коли компонент передає функцію як prop для динамічного рендерингу.
24. Що таке Fragment?<React.Fragment> дозволяє групувати елементи без додаткового DOM-вузла.
25. Як працює virtual DOM?
React спершу рендерить зміни у віртуальний DOM і тільки потім оновлює реальний DOM, щоб мінімізувати операції.
26. Що таке reconciliation?
Процес порівняння старого та нового virtual DOM для оптимального оновлення реального DOM.
27. Що таке lazy loading компонентів?
Відкладене завантаження компонентів через React.lazy() для оптимізації продуктивності.
28. Що таке Suspense?
Компонент для обгортання lazy-компонентів з відображенням fallback UI під час завантаження.
29. Що таке error boundaries?
Компоненти, що ловлять помилки у дочірніх компонентах під час рендеру і дозволяють показати запасний UI.
30. Що таке PropTypes?
Бібліотека для типізації props, що допомагає відловлювати помилки під час розробки.
31. Що таке defaultProps?
Встановлює значення props за замовчуванням, якщо вони не передані компоненту.
32. Що таке strict mode?<React.StrictMode> активує додаткові перевірки для виявлення потенційних проблем у застосунку.
33. Як працює ключове слово key у списках?
Ключ допомагає React відслідковувати елементи під час додавання, видалення або сортування списків.
34. Що таке memo()?
Функція для мемоізації компонента, щоб уникати непотрібних рендерів при тих же props.
35. Що таке PureComponent?
Класовий компонент, який автоматично реалізує shouldComponentUpdate для оптимізації рендеру.
36. Що таке controlled input?
Форма, значення якої контролюється через state React.
37. Що таке uncontrolled input?
Форма, значення якої контролюється DOM через ref.
38. Що таке React Profiler?
Інструмент для вимірювання продуктивності компонентів та оптимізації рендерів.
39. Що таке shallow rendering?
Тестування компонента без рендерингу його дочірніх компонентів.
40. Що таке React.StrictMode?
Компонент, який допомагає знаходити потенційні проблеми у застосунку в режимі розробки.
41. Що таке Context API?
API для передачі даних через дерево компонентів без необхідності передавати props на кожному рівні.
42. Що таке useReducer?
Хук для складного управління станом, схожий на Redux reducer, але локально у компоненті.
43. Що таке forwardRef?
Хук для передачі ref від батьківського компонента до дочірнього.
44. Що таке lazy і Suspense?
Lazy дозволяє відкладено завантажувати компонент, Suspense — показувати fallback під час завантаження.
45. Що таке error boundary?
Компонент, який ловить помилки у дочірніх компонентах під час рендеру, щоб не зламати весь застосунок.
46. Що таке useLayoutEffect?
Хук, який виконується синхронно після зміни DOM, перед тим як браузер відобразить зміни.
47. Що таке forwardRef?
Дозволяє передати ref у дочірній компонент, щоб взаємодіяти з його DOM вузлом.
48. Що таке React.lazy()?
Дозволяє динамічно імпортувати компонент для оптимізації продуктивності.
49. Що таке useImperativeHandle?
Хук для контролю того, які методи будуть доступні через ref у дочірньому компоненті.
50. Що таке React DevTools?
Розширення для браузера, яке дозволяє переглядати компоненти, їхній state та props у застосунку.
Ці 50 питань покривають ключові теми, які зазвичай задають на співбесідах для React розробників: компоненти, хуки, стан, життєвий цикл та оптимізація продуктивності.
Навіть якщо ви не знаєте відповіді на кожне питання досконало, важливо розуміти концепції, принципи роботи React та сучасні патерни. Регулярна практика та робота з кодом допоможуть відчувати себе впевнено на співбесіді.
