{"id":28249043,"url":"https://github.com/devloversteam/react-interview-questions","last_synced_at":"2025-10-24T18:12:19.068Z","repository":{"id":272068244,"uuid":"910792326","full_name":"DevLoversTeam/react-interview-questions","owner":"DevLoversTeam","description":"Найпопулярніші запитання та відповіді на співбесіді з React","archived":false,"fork":false,"pushed_at":"2025-04-26T17:05:04.000Z","size":834,"stargazers_count":127,"open_issues_count":0,"forks_count":12,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-19T13:08:14.899Z","etag":null,"topics":["interview-questions","react","react-interview-questions","react-interview-questions-and-answers"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DevLoversTeam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"ViktorSvertoka","buy_me_a_coffee":"viktor.svertoka"}},"created_at":"2025-01-01T12:50:06.000Z","updated_at":"2025-05-13T11:31:18.000Z","dependencies_parsed_at":"2025-01-11T21:30:43.801Z","dependency_job_id":"ed743800-64bd-470e-83b0-97476d0244d0","html_url":"https://github.com/DevLoversTeam/react-interview-questions","commit_stats":null,"previous_names":["frontendlovers/react-interview-questions"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DevLoversTeam/react-interview-questions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevLoversTeam%2Freact-interview-questions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevLoversTeam%2Freact-interview-questions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevLoversTeam%2Freact-interview-questions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevLoversTeam%2Freact-interview-questions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DevLoversTeam","download_url":"https://codeload.github.com/DevLoversTeam/react-interview-questions/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevLoversTeam%2Freact-interview-questions/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259637290,"owners_count":22888237,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["interview-questions","react","react-interview-questions","react-interview-questions-and-answers"],"created_at":"2025-05-19T13:08:09.850Z","updated_at":"2025-10-24T18:12:18.992Z","avatar_url":"https://github.com/DevLoversTeam.png","language":null,"funding_links":["https://github.com/sponsors/ViktorSvertoka","https://buymeacoffee.com/viktor.svertoka"],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003e\n  React \u003cimg src=\"./assets/react.svg\" width=\"40\" height=\"40\" /\u003e\n\u003c/h1\u003e\n\n\u003ch2\u003eНайпопулярніші запитання та відповіді на співбесіді з React\u003c/h2\u003e\n\n### Основи React\n\n\u003cdetails\u003e\n\u003csummary\u003e1. Що таке React?\u003c/summary\u003e\n\n#### React\n\n- React — це JavaScript-бібліотека для створення користувацьких інтерфейсів. Основні характеристики:\n\n1. **Компонентний підхід:** UI розбивається на окремі компоненти, які можна повторно використовувати.\n\n2. **Virtual DOM:** Забезпечує ефективне оновлення інтерфейсу, мінімізуючи маніпуляції з реальним DOM.\n\n3. **Декларативність:** Ви описуєте, як має виглядати UI в певному стані, а React забезпечує його відповідність.\n\n4. **Однонаправлений потік даних:** Дані передаються згори донизу через props, що спрощує контроль за станом.\n\n- React створений Facebook і широко використовується для розробки SPA (Single Page Applications).\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e2. Перерахуйте особливості React?\u003c/summary\u003e\n\n#### React\n\n1. **Компонентний підхід:** Код розділений на багаторазові, незалежні компоненти.\n\n2. **Віртуальний (Virtual) DOM:** Швидке оновлення інтерфейсу без прямого маніпулювання DOM.\n\n3. **Односпрямований потік даних:** Дані передаються з батьківських компонентів у дочірні через пропси.\n\n4. **JSX:** Розширення синтаксису JavaScript для написання UI у вигляді XML-подібного коду.\n\n5. **Стан і життєвий цикл:** Компоненти можуть зберігати і управляти своїм станом.\n\n6. **React Hooks:** Додають можливості роботи зі станом і побічними ефектами у функціональних компонентах.\n\n7. **Екосистема:** Підтримує бібліотеки на кшталт React Router, Redux для розширення функціоналу.\n\n8. **SEO-френдлі (з Next.js):** Серверний рендеринг для кращої індексації.\n\n9. **Мобільна розробка:** React Native дозволяє створювати мобільні додатки на основі React.\n\n10. **Відкритий код:** Активна підтримка спільноти.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e3. Які основні функції React?\u003c/summary\u003e\n\n#### React\n\n#### Основні функції React:\n\n1. **Декларативний підхід**\n\n- React дозволяє створювати інтерактивний інтерфейс, описуючи, як він повинен виглядати, а бібліотека сама оптимізує оновлення DOM.\n\n2. **Компонентна структура**\n\n- Додаток будується з незалежних, багаторазових компонентів, які спрощують розробку, тестування та підтримку.\n\n3. **Віртуальний DOM**\n\n- React використовує Virtual DOM для ефективного оновлення реального DOM, що значно покращує продуктивність.\n\n4. **Односпрямований потік даних**\n\n- Дані передаються від батьківських компонентів до дочірніх через props, що спрощує управління станом.\n\n5. **Хуки (Hooks)**\n\n- Дозволяють використовувати стан і методи життєвого циклу у функціональних компонентах.\n\n6. **JSX**\n\n- Розширення JavaScript для опису UI в синтаксисі, схожому на HTML.\n\n7. **React Native**\n\n- Можливість створювати нативні мобільні додатки з використанням тих самих принципів, що і для вебу.\n\n8. **Екосистема**\n\n- Великий набір бібліотек та інструментів, таких як React Router, Redux, Context API.\n\n9. **Підтримка серверного рендерингу (SSR)**\n\n- Дозволяє оптимізувати SEO та прискорювати початкове завантаження сторінок.\n\n10. **Управління станом**\n\n- За допомогою useState, Context API, Redux чи інших бібліотек.\n\nЦі функції роблять React потужною і гнучкою бібліотекою для створення сучасних додатків.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e4. Які ключові переваги використання React?\u003c/summary\u003e\n\n#### React\n\n#### Ключові переваги використання React\n\n1. **Швидкість**: Завдяки Virtual DOM React мінімізує взаємодії з реальним DOM, що підвищує продуктивність.\n\n2. **Компонентний підхід**: Код розбивається на багаторазово використовувані компоненти, що спрощує розробку та підтримку.\n\n3. **Одностороння передача даних**: Потік даних у React відбувається в одному напрямку (зверху вниз), що полегшує дебагінг.\n\n4. **Велика спільнота**: React має величезну екосистему бібліотек, інструментів і розширень.\n\n5. **Сумісність із мобільною розробкою**: Використовуючи React Native, можна створювати кросплатформені мобільні додатки.\n\n6. **JSX**: Синтаксис, який дозволяє писати JavaScript разом із HTML, що підвищує читабельність коду.\n\n7. **Підтримка хуків**: Спрощення роботи зі станом та життєвим циклом у функціональних компонентах.\n\n8. **SEO-дружність**: Серверний рендеринг за допомогою інструментів, таких як Next.js, покращує SEO-оптимізацію.\n\n9. **Гнучкість**: React можна інтегрувати в будь-який проєкт або фреймворк без значних змін у коді.\n\n10. **React DevTools**: Інструмент для налагодження, який дозволяє зручно аналізувати компоненти та стан додатка.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e5. Що таке JSX?\u003c/summary\u003e\n\n#### React\n\n- **JSX (JavaScript XML)** — це синтаксис, який дозволяє писати структури UI у вигляді XML-подібного коду всередині JavaScript. JSX є розширенням JavaScript і використовується в React для опису, як виглядає інтерфейс.\n\n#### Основні особливості JSX:\n\n1. **XML-подібний синтаксис:** Нагадує HTML, але використовується у JavaScript.\n\n```jsx\nconst element = \u003ch1\u003eHello, world!\u003c/h1\u003e;\n```\n\n2. **Вбудований JavaScript:** Ви можете писати JavaScript-код у фігурних дужках `{}`.\n\n```jsx\nconst name = \"Alice\";\nconst element = \u003ch1\u003eHello, {name}!\u003c/h1\u003e;\n```\n\n3. **Трансляція:** JSX компілюється в звичайний JavaScript, використовуючи такі бібліотеки, як Babel.\n\n```jsx\nconst element = \u003ch1\u003eHello\u003c/h1\u003e;\n// Перетворюється в:\nconst element = React.createElement(\"h1\", null, \"Hello\");\n```\n\n4. Атрибути: Використовуються як у HTML, але замість `class` пишеться `className`, а замість `for` — `htmlFor`.\n\n```jsx\nconst input = \u003cinput type=\"text\" className=\"input-field\" /\u003e;\n```\n\n5. JSX повертає дерево елементів: JSX-вираз може повертати лише один кореневий елемент. Використовуйте `\u003cReact.Fragment\u003e` або порожній тег `\u003c\u003e` для групування.\n\n```jsx\nreturn (\n  \u003c\u003e\n    \u003ch1\u003eTitle\u003c/h1\u003e\n    \u003cp\u003eDescription\u003c/p\u003e\n  \u003c/\u003e\n);\n```\n\n#### Переваги:\n\n- Зручне створення UI-компонентів.\n- Зрозумілий і читабельний синтаксис.\n- Тісна інтеграція з JavaScript-логікою.\n\nJSX не обов'язковий у React, але широко використовується через зручність і гнучкість.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e6. Різниця між станом (state) та пропсами (props)?\u003c/summary\u003e\n\n#### React\n\n#### Різниця між станом (state) та пропсами (props)\n\n| Критерій             | State                                                                 | Props                                                    |\n| -------------------- | --------------------------------------------------------------------- | -------------------------------------------------------- |\n| Призначення          | Зберігає внутрішній стан компонента.                                  | Передає дані від батьківського компонента до дочірнього. |\n| Змінюваність         | Може змінюватися всередині компонента.                                | Незмінні (read-only).                                    |\n| Доступність          | Доступний тільки в компоненті, де визначений.                         | Доступний у дочірньому компоненті через атрибути.        |\n| Ініціалізація        | Встановлюється в компоненті за допомогою `useState` або конструктора. | Визначається батьківським компонентом.                   |\n| Область використання | Для збереження динамічних даних, що можуть змінюватися.               | Для передачі фіксованих або динамічних даних.            |\n| Хто керує?           | Компонент, у якому state визначений.                                  | Батьківський компонент.                                  |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e7. Яка різниця між елементом і компонентом?\u003c/summary\u003e\n\n#### React\n\n#### Різниця між елементом і компонентом у React:\n\n| Критерій                    | Елемент                                              | Компонент                                                                                          |\n| --------------------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------- |\n| **Визначення**              | Об'єкт, що описує, як має виглядати інтерфейс.       | Функція або клас, який повертає React-елементи.                                                    |\n| **Тип**                     | Нероздільний (immutable).                            | Багаторазовий і може мати стан (state).                                                            |\n| **Синтаксис створення**     | `React.createElement` або JSX (`\u003cdiv /\u003e`).           | Функція або клас (`function MyComponent() {}` або `class MyComponent extends React.Component {}`). |\n| **Призначення**             | Представляє окремий вузол у DOM.                     | Інкапсулює логіку та структуру інтерфейсу.                                                         |\n| **Можливість використання** | Використовується для створення UI на базовому рівні. | Використовується для побудови складних структур із бізнес-логікою.                                 |\n| **Приклад**                 | `\u003ch1\u003eHello\u003c/h1\u003e`                                     | `function Hello() { return \u003ch1\u003eHello\u003c/h1\u003e; }`                                                      |\n\n- Елемент — це \"будівельний блок\", а компонент — \"конструктор\" для створення складних інтерфейсів.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e8. Як створити компоненти в React?\u003c/summary\u003e\n\n#### React\n\n#### У React компоненти можна створювати двома способами:\n\n1. **Функціональний компонент**\n\n- Це проста функція, яка повертає React-елементи.\n\n```jsx\nfunction Greeting(props) {\n  return \u003ch1\u003eHello, {props.name}!\u003c/h1\u003e;\n}\n\n// Використання:\n\u003cGreeting name=\"John\" /\u003e;\n```\n\n2. **Класовий компонент**\n\n- Це клас, який успадковується від React.Component і обов’язково має метод render.\n\n```jsx\nclass Greeting extends React.Component {\n  render() {\n    return \u003ch1\u003eHello, {this.props.name}!\u003c/h1\u003e;\n  }\n}\n\n// Використання:\n\u003cGreeting name=\"John\" /\u003e;\n```\n\n#### Відмінності:\n\n- Функціональні компоненти простіші та краще підходять для компонентів без стану.\n\n- Класові компоненти використовуються для складніших компонентів із власним станом або методами життєвого циклу.\n\n**Примітка:** Сучасний підхід передбачає використання функціональних компонентів із хуками замість класових.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e9. Що таке стан (state) у React?\u003c/summary\u003e\n\n#### React\n\n- **Стан (state)** у React — це об'єкт, який використовується для зберігання даних, що можуть змінюватися з часом, і впливають на рендеринг компонента. Стан дозволяє компонентам React бути динамічними і реагувати на події, введення користувача тощо.\n\n#### Особливості стану:\n\n1. **Локальний для компонента:** Стан доступний тільки в тому компоненті, де він визначений.\n\n2. **Змінюється асинхронно:** React об'єднує виклики setState для оптимізації рендерингу.\n\n3. **Ініціалізується в конструкторі** (для класових компонентів) або через useState (у функціональних компонентах).\n\n#### У класових компонентах:\n\n```jsx\nclass Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  increment = () =\u003e {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cp\u003eCount: {this.state.count}\u003c/p\u003e\n        \u003cbutton onClick={this.increment}\u003eIncrement\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n#### У функціональних компонентах (з хуком `useState`):\n\n```jsx\nimport React, { useState } from \"react\";\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eCount: {count}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003eIncrement\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n#### Основні відмінності між станом і пропсами:\n\n- **State** — локальний для компонента і може змінюватися.\n\n- **Props** — передаються зовні і є незмінними (immutable).\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e10. Що таке пропси (props) в React?\u003c/summary\u003e\n\n#### React\n\n- **Пропси (props)** в React — це об'єкт, який містить дані, що передаються від батьківського компонента до дочірнього. Вони використовуються для налаштування компонентів і є незмінними (immutable).\n\n#### Особливості пропсів:\n\n1. **Передаються зверху вниз** (унідіrectional data flow) — від батьківського компонента до дочірнього.\n\n2. **Незмінні** — компонент не може змінювати отримані пропси.\n\n3. **Динамічні** — значення пропсів можуть змінюватися, якщо змінюються дані в батьківському компоненті.\n\n#### Використання пропсів:\n\n1. **У функціональному компоненті:**\n\n```jsx\nfunction Welcome(props) {\n  return \u003ch1\u003eHello, {props.name}!\u003c/h1\u003e;\n}\n\n// Використання:\n\u003cWelcome name=\"John\" /\u003e;\n```\n\n2. **У класовому компоненті:**\n\n```jsx\nКопіювати;\nРедагувати;\nclass Welcome extends React.Component {\n  render() {\n    return \u003ch1\u003eHello, {this.props.name}!\u003c/h1\u003e;\n  }\n}\n\n// Використання:\n\u003cWelcome name=\"Jane\" /\u003e;\n```\n\n#### Передача пропсів:\n\n```jsx\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cWelcome name=\"Alice\" /\u003e\n      \u003cWelcome name=\"Bob\" /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n- Результат:\n\n```bash\nHello, Alice!\nHello, Bob!\n```\n\n#### Деструктуризація пропсів:\n\n```jsx\nfunction Welcome({ name }) {\n  return \u003ch1\u003eHello, {name}!\u003c/h1\u003e;\n}\n```\n\n#### Значення пропсів за замовчуванням:\n\n```jsx\nfunction Welcome({ name = \"Guest\" }) {\n  return \u003ch1\u003eHello, {name}!\u003c/h1\u003e;\n}\n\n// Використання:\n\u003cWelcome /\u003e; // Виведе: Hello, Guest!\n```\n\n- Пропси забезпечують компонентам React гнучкість і можливість повторного використання.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e11. Навіщо потрібен атрибут key при рендері списків?\u003c/summary\u003e\n\n#### React\n\n- Атрибут `key` використовується для ідентифікації елементів у списках під час рендеру.\n\n#### Призначення:\n\n1. **_Оптимізація оновлень:_** React використовує `key` для ефективного оновлення інтерфейсу, швидко визначаючи, які елементи змінити, додати або видалити.\n\n2. **_Запобігання зайвим рендерам:_** `key` допомагає уникнути перерендеру незмінених елементів.\n\n3. **_Збереження стану компонентів:_** Наприклад, якщо елемент списку містить форму, `key` дозволяє React зберігати її стан між оновленнями.\n\n#### Правильне використання:\n\n- Значення `key` має бути унікальним серед братніх елементів.\n\n- Найкраще підходять стабільні ідентифікатори (наприклад, `id` з бази даних).\n\n- Не рекомендується використовувати індекс масиву як `key`, оскільки це може призвести до помилок при зміні порядку елементів.\n\n```jsx\nconst items = [\"Apple\", \"Banana\", \"Cherry\"];\nreturn (\n  \u003cul\u003e\n    {items.map((item, index) =\u003e (\n      \u003cli key={item}\u003e{item}\u003c/li\u003e // Унікальний key для кожного елемента\n    ))}\n  \u003c/ul\u003e\n);\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e12. Як передаються дані між компонентами у React\u003c/summary\u003e\n\n#### React\n\n- У React дані передаються між компонентами за ієрархією наступним чином:\n\n#### Передача даних вниз (від батьківського компонента до дочірнього)\n\n- Для передачі даних вниз використовується props. Батьківський компонент передає значення або функції через атрибути дочірньому компоненту.\n\n- **Приклад:**\n\n```jsx\nfunction ParentComponent() {\n  const data = \"Hello from Parent\";\n\n  return \u003cChildComponent message={data} /\u003e;\n}\n\nfunction ChildComponent({ message }) {\n  return \u003cp\u003e{message}\u003c/p\u003e;\n}\n```\n\n- `message` передає значення `data` в дочірній компонент `ChildComponent`.\n\n- У дочірньому компоненті доступ до пропсів відбувається через параметр функції або `this.props` у класовому компоненті.\n\n#### Передача даних вгору (від дочірнього компонента до батьківського)\n\n- Дані передаються вгору за допомогою callback-функцій. Батьківський компонент передає функцію дочірньому, а той викликає її з потрібними даними.\n\n- **Приклад:**\n\n```jsx\nfunction ParentComponent() {\n  const handleData = (childData) =\u003e {\n    console.log(\"Data from child:\", childData);\n  };\n\n  return \u003cChildComponent sendData={handleData} /\u003e;\n}\n\nfunction ChildComponent({ sendData }) {\n  const data = \"Hello from Child\";\n\n  return \u003cbutton onClick={() =\u003e sendData(data)}\u003eSend Data\u003c/button\u003e;\n}\n```\n\n- Батьківський компонент передає функцію `handleData` в пропс `sendData`.\n\n- Дочірній компонент викликає `sendData`, передаючи значення `data`.\n\n#### Альтернативні підходи для складних додатків:\n\n1. **Контекст (Context API):**\n\n- Для передачі даних глибоко по ієрархії без пропсів.\n\n- Підходить для глобального стану, наприклад, теми чи мови інтерфейсу.\n\n```jsx\nconst MyContext = React.createContext();\n\nfunction ParentComponent() {\n  const data = \"Hello from Context\";\n\n  return (\n    \u003cMyContext.Provider value={data}\u003e\n      \u003cChildComponent /\u003e\n    \u003c/MyContext.Provider\u003e\n  );\n}\n\nfunction ChildComponent() {\n  const contextData = React.useContext(MyContext);\n\n  return \u003cp\u003e{contextData}\u003c/p\u003e;\n}\n```\n\n2. **Менеджери стану (Redux, Zustand, MobX):**\n\n- Для передачі даних у великих додатках через єдиний глобальний стан.\n\n3. **Custom Hooks:**\n\n- Використовується для спільного використання логіки між компонентами.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e13. Чому React використовує className замість атрибута класу?\u003c/summary\u003e\n\n#### React\n\n- У React використовується `className` замість `class`, тому що `class` є зарезервованим ключовим словом у JavaScript.\n\n#### Причини:\n\n1. **Уникнення конфліктів** – `class` використовується для визначення класів у JavaScript (`class MyComponent {}`), що могло б викликати синтаксичні помилки.\n\n2. **Сумісність з JSX** – JSX є синтаксичним розширенням JavaScript, тому використання `className` допомагає уникнути неоднозначностей.\n\n3. **Пряме відображення** у `document.createElement` – React перетворює JSX у виклики `React.createElement`, і для встановлення класів у DOM-елементах використовується `className`.\n\n#### Приклад:\n\n```jsx\n// Коректний варіант у React\n\n\u003cdiv className=\"my-class\"\u003eHello\u003c/div\u003e\n\n// Некоректний варіант (синтаксична помилка)\n\n\u003cdiv class=\"my-class\"\u003eHello\u003c/div\u003e\n```\n\n- Це стандарт React, який гарантує стабільність і узгодженість у коді.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e14. Які є винятки щодо іменування компонентів React?\u003c/summary\u003e\n\n#### React\n\n- В React є кілька важливих правил і винятків щодо іменування компонентів:\n\n1. **Великі літери для компонентів:** Імена компонентів повинні починатися з великої літери. Це обов'язково, щоб React міг відрізнити компоненти від стандартних HTML-елементів.\n\n- Наприклад:\n  - Правильно: `\u003cMyComponent /\u003e`\n  - Неправильно: `\u003cmyComponent /\u003e`\n\n2. **CamelCase:** Рекомендується використовувати стиль CamelCase для імен компонентів. Це означає, що кожне нове слово в імені компонента починається з великої літери:\n\n- `MyComponent`\n- `UserProfile`\n\n3. **Назви не повинні співпадати з HTML-елементами:** Не використовуйте імена компонентів, які співпадають з тегами стандартних HTML-елементів, такими як div, span, button, тощо. Це може викликати конфлікти та непередбачувану поведінку:\n\n- Правильно: `\u003cCustomButton /\u003e`\n- Неправильно: `\u003cbutton /\u003e` (хоча це і HTML-елемент, в React це буде трактуватися як стандартний HTML тег)\n\n4. **Уникати спеціальних символів:** Не використовуйте спеціальні символи в іменах компонентів (наприклад, пробіли, тире, підкреслення тощо), оскільки це може призвести до синтаксичних помилок:\n\n- Правильно: `MyComponent`\n- Неправильно: `my_component`, `my-component`\n\n5. **Функціональні компоненти vs. класи:** Якщо ви використовуєте класи для компонентів, вони також повинні мати імена з великої літери:\n\n- `class MyComponent extends React.Component {}`\n\nДотримання цих правил допоможе забезпечити правильну роботу та зрозумілість у коді.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e15. Як писати коментарі в React?\u003c/summary\u003e\n\n#### React\n\n- В React коментарі пишуться так само, як і в JavaScript, але є певні нюанси, коли мова йде про JSX.\n\n1. **Коментарі в JavaScript (за межами JSX)**\n\n```javascript\n// Однорядковий коментар\n\n/*\nБагаторядковий коментар\n*/\n```\n\n2. **Коментарі всередині JSX**\n\n- У JSX необхідно використовувати спеціальний синтаксис, оскільки JSX є частиною JavaScript.\n\n- Коментарі в JSX потрібно писати всередині фігурних дужок `{}`:\n\n```jsx\nfunction MyComponent() {\n  return (\n    \u003cdiv\u003e\n      {/_ Це коментар всередині JSX _/}\n      \u003ch1\u003eHello, world!\u003c/h1\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n- Коментарі в JSX повинні бути оточені `{/* коментар */}`, інакше вони викликають помилки.\n\n- Вони можуть бути використані тільки всередині виразів JSX.\n\n3. **Коментарі в функціях та методах**\n\n- Для коментарів всередині функцій або методів можна використовувати стандартні JavaScript коментарі:\n\n```jsx\nfunction MyComponent() {\n  // Ось тут ми рендеримо компонент\n  return \u003cdiv\u003eHello, world!\u003c/div\u003e;\n}\n```\n\n#### Висновок:\n\n- У JSX використовуйте `{/* коментар */}`.\n\n- У звичайному JavaScript — `//` для однорядкових і `/* ... */` для багаторядкових коментарів.\n\n\u003c/details\u003e\n\n### Рендеринг та оновлення стану\n\n\u003cdetails\u003e\n\u003csummary\u003e16. Що таке Virtual DOM в React?\u003c/summary\u003e\n\n#### React\n\n- **Virtual DOM** — це віртуальне представлення реального DOM, яке React використовує для ефективного оновлення інтерфейсу.\n\n#### Як працює в React:\n\n1. **Рендеринг у Virtual DOM:** При зміні стану або пропсів компонентів React оновлює Virtual DOM.\n\n2. **Diffing:** React порівнює новий Virtual DOM зі старою версією, визначаючи мінімальний набір змін.\n\n3. **Оновлення реального DOM:** Виявлені зміни застосовуються до реального DOM, зводячи до мінімуму кількість маніпуляцій.\n\n#### Основна перевага:\n\n- Оптимізація оновлень DOM, що значно покращує продуктивність додатків.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e17. Що таке (key) prop і яка перевага його використання в масивах елементів?\u003c/summary\u003e\n\n#### React\n\n- У React prop `key` використовується для ідентифікації кожного елементу в списках або масивах, щоб допомогти React ефективно керувати рендерами при зміні або оновленні елементів списку. Це важливо для оптимізації процесу рендерингу, особливо коли список змінюється (елементи додаються, видаляються або змінюються).\n\n#### Основні моменти щодо `key`:\n\n1. **Унікальність:** Кожен елемент у списку повинен мати унікальний `key`. Це дозволяє React відстежувати, які елементи змінюються, додаються або видаляються, а також зберігати їх стан між рендерами.\n\n2. **Оптимізація рендерингу:** Використання key дозволяє React мінімізувати кількість ререндерів, виконуючи тільки необхідні зміни в DOM. Без `key`, React має важчий час для відстеження змін, що призводить до повного повторного рендерингу списку, навіть якщо тільки один елемент змінився.\n\n3. **Природа key:** Prop `key` не передається в компонент, тому його не можна використовувати для відображення значень в UI. Це тільки інтерналізована властивість, що використовується React для відстеження елементів.\n\n#### Приклад використання `key` в списку:\n\n```jsx\nconst items = [\"apple\", \"banana\", \"cherry\"];\n\nfunction FruitList() {\n  return (\n    \u003cul\u003e\n      {items.map((item, index) =\u003e (\n        \u003cli key={index}\u003e{item}\u003c/li\u003e // Важливо: використовувати унікальний key\n      ))}\n    \u003c/ul\u003e\n  );\n}\n```\n\n#### Важливість унікальності `key`:\n\n- **Неправильне використання:** Якщо у якості key використовувати неунікальні значення (наприклад, однаковий index), React не зможе коректно відстежувати зміни, і це призведе до помилок в рендерингу.\n\n- **Ідеальний key:** Зазвичай, якщо є унікальний ідентифікатор елемента (наприклад, id), він повинен бути використаний як key замість індексу масиву.\n\n```jsx\nconst items = [\n  { id: 1, name: \"apple\" },\n  { id: 2, name: \"banana\" },\n  { id: 3, name: \"cherry\" },\n];\n\nfunction FruitList() {\n  return (\n    \u003cul\u003e\n      {items.map((item) =\u003e (\n        \u003cli key={item.id}\u003e{item.name}\u003c/li\u003e // Краще використовувати унікальні id\n      ))}\n    \u003c/ul\u003e\n  );\n}\n```\n\n#### Переваги використання `key`:\n\n- Покращує продуктивність рендерингу.\n\n- Дозволяє React оптимально оновлювати тільки змінені елементи, а не весь список.\n\n- Забезпечує коректну обробку стану елементів при їх переміщенні, видаленні або оновленні.\n\nТаким чином, використання `key` є важливим для ефективної роботи з масивами елементів у React.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e18. Що таке умовний рендеринг у React?\u003c/summary\u003e\n\n#### React\n\n- Умовний рендеринг у React — це процес, при якому компонент рендерить різний вміст залежно від певних умов. Це дозволяє динамічно змінювати відображення компонента на основі стану, пропсів або інших факторів.\n\n#### Основні підходи до умовного рендерингу:\n\n1. **Оператор `if`:** Можна використовувати стандартний оператор if для вирішення, що рендерити.\n\n```jsx\nfunction Greeting(props) {\n  if (props.isLoggedIn) {\n    return \u003ch1\u003eWelcome back!\u003c/h1\u003e;\n  }\n  return \u003ch1\u003ePlease sign up.\u003c/h1\u003e;\n}\n```\n\n2. **Тернарний оператор:** Часто використовують тернарний оператор для коротших умовних виразів.\n\n```jsx\nfunction Greeting(props) {\n  return \u003ch1\u003e{props.isLoggedIn ? \"Welcome back!\" : \"Please sign up.\"}\u003c/h1\u003e;\n}\n```\n\n3. **Логічне І (\u0026\u0026) для рендерингу:** Можна використати логічний оператор `\u0026\u0026`, щоб рендерити елемент лише за умови, що вираз зліва від нього є істинним.\n\n```jsx\nfunction Notifications(props) {\n  return (\n    \u003cdiv\u003e\n      {props.unreadMessages.length \u003e 0 \u0026\u0026 (\n        \u003ch2\u003eYou have {props.unreadMessages.length} unread messages.\u003c/h2\u003e\n      )}\n    \u003c/div\u003e\n  );\n}\n```\n\n- Це працює так: якщо props.unreadMessages.length більше за 0, то відобразиться повідомлення, інакше нічого не буде відображено.\n\n4. **Використання `return` з умовним оператором:** Ви можете використовувати return для умовного рендерингу на основі різних умов, як в прикладі з `if` або тернарним оператором.\n\n#### Переваги умовного рендерингу:\n\n- Дозволяє динамічно змінювати вміст залежно від стану або пропсів.\n\n- Покращує гнучкість і можливість відображення різного контенту для різних користувачів або ситуацій.\n\n#### Приклад:\n\n```jsx\nfunction UserStatus(props) {\n  return (\n    \u003cdiv\u003e\n      {props.isLoggedIn ? (\n        \u003cbutton onClick={props.logout}\u003eLog Out\u003c/button\u003e\n      ) : (\n        \u003cbutton onClick={props.login}\u003eLog In\u003c/button\u003e\n      )}\n    \u003c/div\u003e\n  );\n}\n```\n\n- Тут кнопка змінюється в залежності від того, чи користувач увійшов в систему.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e19. Що таке фрагменти (Fragments) у React?\u003c/summary\u003e\n\n#### React\n\n- Фрагменти в React — це спосіб групувати кілька елементів без додавання зайвих елементів в DOM. Вони дозволяють повернути декілька елементів з компонента без обгортки, такої як `div`, що може допомогти уникнути зайвих елементів, що можуть порушити стилі або структуру документа.\n\n#### Як використовуються фрагменти?\n\n1. **Без фрагментів (з обгорткою):**\n\n```jsx\nfunction MyComponent() {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eTitle\u003c/h1\u003e\n      \u003cp\u003eSome text\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n- У цьому прикладі повертається один `div`, який обгортає `h1` і `p`.\n\n2. **З фрагментами (без обгортки):**\n\n```jsx\nfunction MyComponent() {\n  return (\n    \u003c\u003e\n      \u003ch1\u003eTitle\u003c/h1\u003e\n      \u003cp\u003eSome text\u003c/p\u003e\n    \u003c/\u003e\n  );\n}\n```\n\nТепер `h1` і `p` рендеряться без додаткового контейнера, що дозволяє зберегти чистоту DOM.\n\n#### Переваги:\n\n- **_Чистий DOM:_** Можна обходитись без зайвих обгорток у DOM.\n\n- **_Зручність для рендерингу кількох елементів:_** Повернення кількох елементів з одного компонента без необхідності використовувати додаткові елементи.\n\n#### Синтаксис:\n\n- Можна використовувати порожні теги `\u003c\u003e` і `\u003c/\u003e`, які є скороченням для `\u003cReact.Fragment\u003e\u003c/React.Fragment\u003e`.\n\n- Також можна використовувати `React.Fragment`, якщо потрібно додавати ключі (наприклад, при рендерингу списків):\n\n```jsx\n\u003cReact.Fragment key={item.id}\u003e\n  \u003ch1\u003e{item.name}\u003c/h1\u003e\n  \u003cp\u003e{item.description}\u003c/p\u003e\n\u003c/React.Fragment\u003e\n```\n\n#### Коли використовувати:\n\n- Коли потрібно рендерити кілька елементів без додаткової обгортки в DOM.\n\n- Коли зберігаєте структуру компонента без порушення стилів чи верстки.\n\nФрагменти є дуже корисними для зменшення зайвих елементів у DOM та покращення продуктивності.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e20. Що таке узгодження (Reconciliation)?\u003c/summary\u003e\n\n#### React\n\n- **Reconciliation** (узгодження) — це процес, який React використовує для оновлення DOM найефективнішим способом. Коли стан або пропси компонента змінюються, React обчислює мінімальні зміни, які потрібно внести до реального DOM, щоб синхронізувати його зі станом віртуального DOM.\n\n#### Як працює reconciliation?\n\n1. **Порівняння старого та нового віртуального DOM:**\n\n- React зберігає копію попереднього віртуального DOM.\n- При зміні стану чи пропсів створюється новий віртуальний DOM.\n- React порівнює новий віртуальний DOM із попередньою копією (алгоритм diffing).\n\n2. **Виявлення відмінностей (diffing):**\n\n- React ідентифікує, які частини дерева змінилися (нові елементи, зміни в атрибутах чи видалення елементів).\n- Для цього використовується алгоритм, оптимізований для роботи з деревоподібними структурами.\n\n3. **Оновлення реального DOM:**\n\n- React застосовує зміни лише до тих частин DOM, які потрібно оновити, уникаючи повного перерендеру.\n\n#### Основні принципи reconciliation:\n\n- **Збереження вузлів одного рівня:** Якщо вузли мають однаковий тип (наприклад, `\u003cdiv\u003e` залишається `\u003cdiv\u003e`), React змінює лише атрибути та дочірні елементи.\n- **Повторне використання компонентів:** Якщо компонент залишається тим самим, React повторно використовує існуючий екземпляр компонента.\n- **Ключі для списків:** Якщо список елементів рендериться з масиву, React використовує ключі (`key` prop) для порівняння та збереження вузлів.\n\n#### Приклад роботи:\n\n```jsx\nfunction App({ isVisible }) {\n  return isVisible ? \u003ch1\u003eHello\u003c/h1\u003e : \u003cp\u003eGoodbye\u003c/p\u003e;\n}\n```\n\n- Якщо `isVisible` змінюється з `true` на `false`, React видалить `\u003ch1\u003e` і замінить його на `\u003cp\u003e`.\n\n#### Важливість ключів (`key` prop) для списків:\n\n- Ключі допомагають React коректно визначати зміни в списках. Наприклад:\n\n```jsx\n\u003cul\u003e\n  {items.map((item) =\u003e (\n    \u003cli key={item.id}\u003e{item.text}\u003c/li\u003e\n  ))}\n\u003c/ul\u003e\n```\n\n- Без унікальних ключів React не зможе точно визначити, які елементи списку змінилися.\n\n#### Переваги reconciliation:\n\n- Зменшення кількості операцій із DOM.\n- Підвищення продуктивності додатків.\n- Гладке оновлення інтерфейсу користувача.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e21. Як оновити стан компонента?\u003c/summary\u003e\n\n#### React\n\n- У React стан компонента оновлюється за допомогою методу `setState` у класових компонентах або `useState` у функціональних компонентах.\n\n#### Класові компоненти:\n\n- Стан оновлюється через `this.setState()`.\n\n- **_Приклад:_**\n\n```jsx\nclass Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  increment = () =\u003e {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cp\u003eCount: {this.state.count}\u003c/p\u003e\n        \u003cbutton onClick={this.increment}\u003eIncrement\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n#### Функціональні компоненти:\n\n- Стан оновлюється через функцію, отриману з `useState`.\n\n- **_Приклад:_**\n\n```jsx\nimport React, { useState } from \"react\";\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  const increment = () =\u003e {\n    setCount(count + 1);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eCount: {count}\u003c/p\u003e\n      \u003cbutton onClick={increment}\u003eIncrement\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n#### Примітки:\n\n1. **Асинхронність:** `setState` і `useState` працюють асинхронно. Для оновлення стану на основі попереднього значення використовуйте функціональний підхід:\n\n```jsx\nthis.setState((prevState) =\u003e ({ count: prevState.count + 1 }));\nsetCount((prevCount) =\u003e prevCount + 1);\n```\n\n2. **Не оновлюйте стан напряму:** Модифікація стану без використання `setState` або `useState` не викликає повторний рендеринг.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e22. Що таке вбудовані умовні вирази?\u003c/summary\u003e\n\n#### React\n\n- **Вбудовані умовні вирази** в JavaScript (зокрема у React) — це механізми, що дозволяють вбудовувати умови безпосередньо в JSX для умовного рендерингу елементів або компонентів. Це дозволяє зробити код компактнішим і зручнішим для розуміння.\n\n#### Основні методи:\n\n1. **Оператор умови (тернарний оператор):** Це один із найпоширеніших способів для умовного рендерингу елементів в JSX. Він має такий синтаксис:\n\n```jsx\nумова ? вираз_якщо_правда : вираз_якщо_неправда;\n```\n\n**Приклад:**\n\n```jsx\nconst isLoggedIn = true;\n\nfunction App() {\n  return \u003cdiv\u003e{isLoggedIn ? \u003cp\u003eWelcome, User!\u003c/p\u003e : \u003cp\u003ePlease log in\u003c/p\u003e}\u003c/div\u003e;\n}\n```\n\n2. **Логічний оператор AND (\u0026\u0026):** Цей метод дозволяє відображати компонент або елемент тільки тоді, коли умова є true. Якщо умова не виконується, нічого не буде рендеритись.\n\n**Приклад:**\n\n```jsx\nconst isUserAdmin = true;\n\nfunction App() {\n  return \u003cdiv\u003e{isUserAdmin \u0026\u0026 \u003cp\u003eYou have admin privileges\u003c/p\u003e}\u003c/div\u003e;\n}\n```\n\n- У цьому випадку `\u003cp\u003eYou have admin privileges\u003c/p\u003e` буде відображено лише, якщо `isUserAdmin` — це `true`.\n\n3. **IF перед поверненням JSX:** Можна також використовувати звичайні умовні оператори if перед поверненням JSX, коли умова має бути більш складною або коли потрібно виконати декілька умовних дій.\n\n**Приклад:**\n\n```jsx\nfunction App() {\n  let content;\n  if (isLoggedIn) {\n    content = \u003cp\u003eWelcome back!\u003c/p\u003e;\n  } else {\n    content = \u003cp\u003ePlease sign in.\u003c/p\u003e;\n  }\n\n  return \u003cdiv\u003e{content}\u003c/div\u003e;\n}\n```\n\n#### Переваги:\n\n- Вбудовані умовні вирази дозволяють писати більш чистий і компактний код.\n\n- Вони покращують читаємість і зменшують використання додаткових умовних конструкцій.\n\n#### Важливо:\n\n- В React не можна використовувати інструкції `if` безпосередньо в JSX. Однак можна застосувати їх перед поверненням JSX.\n\n\u003c/details\u003e\n\n### Події в React\n\n\u003cdetails\u003e\n\u003csummary\u003e23. Яка різниця між обробкою подій HTML і React?\u003c/summary\u003e\n\n#### React\n\n#### Різниця між обробкою подій у HTML та React:\n\n| Критерій                     | HTML                                                                    | React                                                                                 |\n| ---------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |\n| **Прив’язка події**          | Вказується як атрибут: `\u003cbutton onclick=\"handler()\"\u003e`.                  | Використовується camelCase: `\u003cbutton onClick={handler}\u003e`.                             |\n| **Тип функції**              | Посилання на глобальну функцію або рядок із JavaScript-кодом.           | Прив’язка до функції компонента (зазвичай вказується як метод або стрілочна функція). |\n| **Додавання слухачів подій** | Обробники додаються вручну через `addEventListener`.                    | React автоматично керує прив’язкою через віртуальний DOM.                             |\n| **Контекст `this`**          | Потрібно вручну встановлювати контекст, якщо використовується в класах. | React автоматично зберігає правильний контекст у функціональних компонентах.          |\n| **Стандартна поведінка**     | Необхідно явно викликати `return false` для припинення поведінки.       | Використовується `event.preventDefault()` для зупинки стандартної поведінки.          |\n| **Сумісність**               | Обробляє лише реальні DOM-події.                                        | Використовує \"SyntheticEvent\", що є обгорткою над нативними подіями.                  |\n| **Кросбраузерність**         | Потрібно вручну враховувати відмінності між браузерами.                 | React забезпечує кросбраузерну сумісність через SyntheticEvent.                       |\n| **Прив’язка контексту**      | Часто вимагає використання `bind`.                                      | У класових компонентах потрібен `bind`, у функціональних — ні.                        |\n\n#### Приклад у HTML:\n\n```html\n\u003cbutton onclick=\"alert('Clicked!')\"\u003eClick me\u003c/button\u003e\n```\n\n#### Приклад у React:\n\n```jsx\nfunction handleClick() {\n  alert(\"Clicked!\");\n}\n\nfunction App() {\n  return \u003cbutton onClick={handleClick}\u003eClick me\u003c/button\u003e;\n}\n```\n\n#### SyntheticEvent у React:\n\n- React використовує обгортку над нативними подіями, яка нормалізує поведінку між різними браузерами та підвищує продуктивність.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e24. Що таке синтетичні події в React?\u003c/summary\u003e\n\n#### React\n\n- **Синтетичні події (Synthetic Events)** у React — це обгортки для нативних DOM-подій, які надають однаковий інтерфейс для обробки подій на різних браузерах. React створює SyntheticEvent для кожної події, що дозволяє працювати з подіями в уніфікованому вигляді, забезпечуючи кросбраузерну сумісність і покращуючи продуктивність.\n\n#### Основні характеристики:\n\n1. **Кросбраузерність:** SyntheticEvent абстрагує особливості роботи з подіями в різних браузерах, забезпечуючи однакову поведінку.\n\n2. **Оптимізація:** SyntheticEvent використовує пул об'єктів, що дозволяє зменшити витрати на створення нових об'єктів подій.\n\n3. **Одноразове використання:** Після обробки події об'єкт SyntheticEvent \"повертається\" в пул, і його не можна використовувати після цього. Для асинхронних операцій потрібно зберігати подію в окремій змінній.\n\n4. **Інтерфейс:** SyntheticEvent має такі ж методи, як і стандартні нативні події (наприклад, `preventDefault()`, `stopPropagation()`).\n\n#### Приклад використання:\n\n```jsx\nfunction handleClick(event) {\n  // SyntheticEvent має доступ до методу preventDefault()\n  event.preventDefault();\n  console.log(\"Button clicked!\");\n}\n\nfunction App() {\n  return \u003cbutton onClick={handleClick}\u003eClick me\u003c/button\u003e;\n}\n```\n\n- У цьому прикладі event — це SyntheticEvent, який працює аналогічно до нативної події, але з покращеними можливостями.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e25. Як обробляти події в React?\u003c/summary\u003e\n\n#### React\n\n- В React обробка подій працює схоже на стандартний JavaScript, але з деякими відмінностями. Події в React є синтетичними, що означає, що вони мають абстракцію поверх реальних подій браузера, що забезпечує крос-браузерну сумісність.\n\n#### Основні принципи обробки подій в React:\n\n1. **Синтетичні події:** Всі події в React обгорнуті в об'єкт **SyntheticEvent**, який є крос-браузерною реалізацією стандартних подій DOM. Це дозволяє обробляти події однаково в усіх браузерах.\n\n2. **Використання camelCase для подій:** У React події записуються у форматі camelCase замість стандартного нижнього регістру (наприклад, `onClick` замість `onclick`).\n\n3. **Передача функцій як обробників подій:** Події в React обробляються за допомогою функцій, які передаються через атрибути компонентів.\n\n#### Приклад обробки події `click`:\n\n```jsx\nimport React, { Component } from \"react\";\n\nclass MyButton extends Component {\n  handleClick = () =\u003e {\n    alert(\"Button clicked!\");\n  };\n\n  render() {\n    return \u003cbutton onClick={this.handleClick}\u003eClick Me\u003c/button\u003e;\n  }\n}\n\nexport default MyButton;\n```\n\n#### Приклад з функціональним компонентом:\n\n```jsx\nimport React, { useState } from \"react\";\n\nfunction MyButton() {\n  const [count, setCount] = useState(0);\n\n  const handleClick = () =\u003e {\n    setCount(count + 1);\n  };\n\n  return \u003cbutton onClick={handleClick}\u003eClicked {count} times\u003c/button\u003e;\n}\n\nexport default MyButton;\n```\n\n#### Особливості обробки подій:\n\n1. **Не потрібно використовувати `addEventListener`:** В React немає необхідності вручну додавати або видаляти обробники подій. Це автоматично керується бібліотекою React.\n\n2. **Збереження контексту в методах класових компонентів:** Якщо методи класових компонентів використовуються як обробники подій, контекст (`this`) потрібно прив'язати або через стрілкові функції, або вручну в конструкторі.\n\n```jsx\nclass MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n    // Прив'язка методу\n    this.handleClick = this.handleClick.bind(this);\n  }\n\n  handleClick() {\n    this.setState({ count: this.state.count + 1 });\n  }\n\n  render() {\n    return (\n      \u003cbutton onClick={this.handleClick}\u003e\n        Clicked {this.state.count} times\n      \u003c/button\u003e\n    );\n  }\n}\n```\n\n3. **Передача параметрів у функцію обробника:** Якщо потрібно передати додаткові аргументи в обробник події, можна використовувати стрілкові функції або функції з параметрами.\n\n```jsx\nfunction MyButton({ label }) {\n  const handleClick = (event, label) =\u003e {\n    console.log(label);\n  };\n\n  return (\n    \u003cbutton onClick={(event) =\u003e handleClick(event, label)}\u003e{label}\u003c/button\u003e\n  );\n}\n```\n\n#### Обробка подій в DOM:\n\n- Всі події, що відбуваються в React, працюють за принципом делегування подій, де один обробник подій реєструється для всього дерева компонентів і пропускається через React SyntheticEvent.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e26. Що таке події вказівника (Pointer Events)?\u003c/summary\u003e\n\n#### React\n\n#### Події вказівника (Pointer Events) у React\n\n- **Pointer Events** — це API, що об'єднує події миші, сенсорного екрану та стилуса в єдину систему обробки подій.\n\n#### Основні події Pointer Events\n\n| **Подія**           | **Опис**                                                                 |\n| ------------------- | ------------------------------------------------------------------------ |\n| **onPointerDown**   | Спрацьовує при натисканні пальцем, мишею або стилусом.                   |\n| **onPointerUp**     | Спрацьовує при відпусканні кнопки миші, пальця або стилуса.              |\n| **onPointerMove**   | Викликається при русі вказівника над елементом.                          |\n| **onPointerEnter**  | Спрацьовує, коли вказівник входить у межі елемента.                      |\n| **onPointerLeave**  | Спрацьовує, коли вказівник виходить за межі елемента.                    |\n| **onPointerCancel** | Викликається, коли браузер скасовує подію (наприклад, при зміні фокусу). |\n\n#### Приклад використання у React\n\n```jsx\nconst PointerExample = () =\u003e {\n  const handlePointerDown = () =\u003e console.log(\"Вказівник натиснуто\");\n\n  return (\n    \u003cdiv\n      onPointerDown={handlePointerDown}\n      style={{ width: 200, height: 200, background: \"lightgray\" }}\n    \u003e\n      Клікни тут\n    \u003c/div\u003e\n  );\n};\n```\n\n- Цей код виведе `\"Вказівник натиснуто\"` у консоль при натисканні будь-яким пристроєм (миша, сенсор, стилус).\n\n\u003c/details\u003e\n\n### Компоненти та їх типи\n\n\u003cdetails\u003e\n\u003csummary\u003e27. Коли використовувати компонент класу замість функціонального компонента?\u003c/summary\u003e\n\n#### React\n\n- Класові компоненти використовувалися, коли потрібна була одна або кілька з цих функцій:\n\n1. **Робота зі станом (state):** Раніше функціональні компоненти не підтримували локальний стан, тому використовували класи для цього.\n   Сьогодні хуки (useState, useReducer) дозволяють функціональним компонентам працювати зі станом.\n\n2. **Методи життєвого циклу:** Класи забезпечували доступ до методів, таких як componentDidMount, componentDidUpdate, componentWillUnmount, для управління компонентом на різних етапах його існування.\n   Зараз це вирішується хуком useEffect.\n\n3. **Обробка складної логіки:** Якщо логіка потребувала кількох методів і доступу до властивостей через this, класи виглядали логічним вибором.\n   Сучасний підхід — хуки, які дозволяють інкапсулювати логіку.\n\n#### Коли класи більше не потрібні:\n\n- Починаючи з React 16.8, функціональні компоненти з хуками замінили потребу у класових компонентах. Тому в нових проєктах перевагу варто віддавати функціональним компонентам. Класи використовуються лише для підтримки застарілого коду.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e28. Що таке компоненти без стану (stateless components)?\u003c/summary\u003e\n\n#### React\n\n- Компоненти без стану (stateless components) — це компоненти, які не зберігають і не обробляють жодного внутрішнього стану. Вони лише отримують дані через props і відображають їх у вигляді UI. Зазвичай ці компоненти є функціональними.\n\n#### Особливості:\n\n1. **Відсутність стану:** Вони не використовують this.state і не змінюють свій внутрішній стан.\n\n2. **Тільки рендеринг:** Вони просто отримують пропси та відображають їх у вигляді елементів UI.\n\n3. **Простота та передбачуваність:** Легше тестувати і підтримувати, оскільки не потрібно слідкувати за змінами стану.\n\n#### Приклад:\n\n```jsx\n// Stateless component\nfunction Greeting(props) {\n  return \u003ch1\u003eHello, {props.name}!\u003c/h1\u003e;\n}\n\n// Використання:\n\u003cGreeting name=\"John\" /\u003e;\n```\n\n#### Переваги:\n\n- **Простота:** Легше розуміти та підтримувати.\n\n- **Оптимізація продуктивності:** Оскільки ці компоненти не мають стану, React може більш ефективно їх оновлювати.\n\n#### Коли використовувати:\n\n- Коли компонент просто відображає дані та не потребує змін.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e29. Що таке компоненти стану (stateful components)?\u003c/summary\u003e\n\n#### React\n\n- **Компоненти стану** (stateful components) — це компоненти, які зберігають і управляють своїм внутрішнім станом. Вони використовують state для збереження даних, які можуть змінюватися протягом часу, і ці зміни впливають на рендеринг компонента.\n\n#### Особливості:\n\n1. **Стан (state):** Вони використовують this.state для зберігання і управління даними, які можуть змінюватися.\n\n2. **Методи для оновлення стану:** Використовують метод this.setState() для оновлення стану.\n\n3. **Життєвий цикл:** Мають доступ до методів життєвого циклу компонента, таких як componentDidMount(), shouldComponentUpdate(), componentDidUpdate() тощо.\n\n#### Приклад:\n\n```jsx\n// Stateful component\nclass Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 0,\n    };\n  }\n\n  increment = () =\u003e {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003e{this.state.count}\u003c/h1\u003e\n        \u003cbutton onClick={this.increment}\u003eIncrement\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n#### Переваги:\n\n- **Динамічні компоненти:** Можуть змінювати свій вміст і вигляд на основі змін в стані.\n\n- **Інтерактивність:** Підходять для створення інтерактивних інтерфейсів, де є потреба в оновленні стану при взаємодії з користувачем.\n\n#### Коли використовувати:\n\n- Коли компонент потребує управління внутрішнім станом, наприклад, для збереження введених даних у формі, рахунку, вибору тощо.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e30. Що таке чисті компоненти (Pure Components)?\u003c/summary\u003e\n\n#### React\n\n- **Чисті компоненти (Pure Components)** — це спеціальні класові компоненти React, які автоматично оптимізують рендеринг. Вони реалізують поверхневе порівняння пропсів і стану, щоб запобігти зайвим оновленням, якщо значення пропсів або стану не змінилися.\n\n#### Як створити чистий компонент?\n\n- Чистий компонент створюється шляхом успадкування від React.PureComponent.\n\n```jsx\nimport React, { PureComponent } from \"react\";\n\nclass MyComponent extends PureComponent {\n  render() {\n    return \u003ch1\u003eHello, {this.props.name}!\u003c/h1\u003e;\n  }\n}\n\n// Використання:\n\u003cMyComponent name=\"John\" /\u003e;\n```\n\n#### Як працює `PureComponent`?\n\n- Виконує поверхневе порівняння (`shallow comparison`) пропсів і стану у методі `shouldComponentUpdate`.\n\n- Якщо пропси та стан не змінилися, компонент не рендериться повторно.\n\n#### Коли використовувати `PureComponent`?\n\n- Коли пропси та стан є простими структурами (примітивні значення або неглибокі об'єкти).\n\n- Для підвищення продуктивності в компонентах, які часто оновлюються.\n\n#### Обмеження:\n\n1. **Глибоке порівняння:** `PureComponent` не враховує зміни всередині вкладених об'єктів або масивів.\n\n- Наприклад, якщо ви оновлюєте об'єкт, але посилання на нього залишається незмінним, компонент не оновиться.\n\n```jsx\nthis.setState({ data: { ...this.state.data, key: \"new value\" } }); // Обхідна\n```\n\n2. **Не працює з функціональними компонентами.**\n\n- Альтернатива: використовувати `React.memo` для оптимізації функціональних компонентів.\n\n```jsx\nconst MyComponent = React.memo(function MyComponent(props) {\n  return \u003ch1\u003eHello, {props.name}!\u003c/h1\u003e;\n});\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e31. Що таке компоненти вищого порядку (Higher-Order components)?\u003c/summary\u003e\n\n#### React\n\n#### Компоненти вищого порядку (Higher-Order Components, HOC)\n\n- Компонент вищого порядку — це функція, яка приймає компонент як вхідний аргумент і повертає новий компонент, розширюючи його функціональність.\n\n#### Синтаксис HOC:\n\n```jsx\nconst EnhancedComponent = higherOrderComponent(WrappedComponent);\n```\n\n#### Особливості HOC:\n\n1. Приймає компонент як аргумент.\n\n2. Повертає новий компонент із додатковими властивостями чи поведінкою.\n\n3. Дозволяє перевикористовувати логіку у різних компонентах.\n\n#### Приклад використання:\n\n- HOC для додавання стану до компонента:\n\n```jsx\nimport React, { useState } from \"react\";\n\n// HOC: додає логіку роботи зі станом\nfunction withCounter(WrappedComponent) {\n  return function EnhancedComponent(props) {\n    const [count, setCount] = useState(0);\n\n    const increment = () =\u003e setCount(count + 1);\n\n    return \u003cWrappedComponent count={count} increment={increment} {...props} /\u003e;\n  };\n}\n\n// Компонент, який буде розширено\nfunction Button({ count, increment }) {\n  return \u003cbutton onClick={increment}\u003eClicked {count} times\u003c/button\u003e;\n}\n\n// Використання HOC\nconst EnhancedButton = withCounter(Button);\n\nexport default EnhancedButton;\n```\n\n#### Реальні сценарії використання HOC:\n\n1. **Авторизація (Authentication)** — обгортання компонентів для перевірки прав доступу.\n\n2. **Обробка даних** — підключення до API чи обробка стану.\n\n3. **Логування** — додавання журналювання дій компонентів.\n\n#### Обмеження HOC:\n\n- Може створювати глибокі вкладення (component tree), якщо використовувати забагато HOC.\n\n- Ускладнює читабельність через обгортання компонентів.\n\nHOC — потужний інструмент для повторного використання логіки, але в сучасних додатках їх часто замінюють React Hooks.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e32. Що таке children prop?\u003c/summary\u003e\n\n#### React\n\n#### Що таке `children` prop?\n\n- `children` — це спеціальний пропс у React, який використовується для передачі вкладених елементів або компонентів у компонент-обгортку.\n\n#### Як це працює?\n\n- Коли ви передаєте дочірній вміст між відкриваючим і закриваючим тегами компонента, цей вміст автоматично передається як значення `props.children`.\n\n#### Приклад:\n\n- **Компонент-обгортка:**\n\n```jsx\nfunction Wrapper({ children }) {\n  return \u003cdiv className=\"wrapper\"\u003e{children}\u003c/div\u003e;\n}\n```\n\n- **Використання:**\n\n```jsx\nfunction App() {\n  return (\n    \u003cWrapper\u003e\n      \u003ch1\u003eHello, World!\u003c/h1\u003e\n      \u003cp\u003eThis is a paragraph inside the wrapper.\u003c/p\u003e\n    \u003c/Wrapper\u003e\n  );\n}\n```\n\n- **Результат:**\n\n```html\n\u003cdiv class=\"wrapper\"\u003e\n  \u003ch1\u003eHello, World!\u003c/h1\u003e\n  \u003cp\u003eThis is a paragraph inside the wrapper.\u003c/p\u003e\n\u003c/div\u003e\n```\n\n#### Ключові особливості `children`:\n\n1. **Гнучкість:** Можна передавати будь-який тип даних: текст, JSX, компоненти, масиви елементів.\n\n2. **Повторне використання:** Компонент-обгортка може динамічно відображати різний вміст.\n\n3. **Структурованість:** Допомагає створювати компоненти з вкладеною структурою.\n\n#### Використання `children` з функціональними пропсами:\n\nІноді `children` використовується як функція для динамічної передачі даних:\n\n```jsx\nfunction List({ items, children }) {\n  return \u003cul\u003e{items.map((item) =\u003e children(item))}\u003c/ul\u003e;\n}\n\nfunction App() {\n  return (\n    \u003cList items={[\"Apple\", \"Banana\", \"Cherry\"]}\u003e\n      {(item) =\u003e \u003cli key={item}\u003e{item}\u003c/li\u003e}\n    \u003c/List\u003e\n  );\n}\n```\n\n- **Результат:**\n\n```html\n   \u003cli\u003eApple\u003c/li\u003e\n  \u003cli\u003eBanana\u003c/li\u003e\n  \u003cli\u003eCherry\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n- `children` — це потужний інструмент для створення універсальних і багаторазових компонентів у React.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e33. Що таке портал (Portal)?\u003c/summary\u003e\n\n#### React\n\n- **Портал (Portal)** у React — це спосіб рендерити дочірні елементи в DOM-вузол, який знаходиться за межами DOM-ієрархії батьківського компонента.\n\n#### Як працює:\n\n- React забезпечує портали через метод `ReactDOM.createPortal`, який приймає два аргументи:\n\n1. **React-елемент**, що потрібно рендерити.\n\n2. **Цільовий DOM-вузол**, у який слід вставити елемент.\n\n#### Синтаксис:\n\n```jsx\nReactDOM.createPortal(child, container);\n```\n\n- **child** — React-елемент, який потрібно рендерити.\n\n- **container** — DOM-вузол, де елемент буде вставлено.\n\n#### Приклад використання:\n\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nfunction Modal({ children }) {\n  return ReactDOM.createPortal(\n    \u003cdiv className=\"modal\"\u003e{children}\u003c/div\u003e,\n    document.getElementById(\"modal-root\") // Цільовий вузол\n  );\n}\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eОсновний контент\u003c/h1\u003e\n      \u003cModal\u003e\n        \u003cp\u003eЦе контент модального вікна\u003c/p\u003e\n      \u003c/Modal\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n#### Де використовують портали:\n\n- Модальні вікна.\n\n- Спливаючі підказки (tooltips).\n\n- Контекстні меню.\n\n#### Особливості:\n\n1. **Ієрархія подій:**\n\n- Хоча елемент рендериться поза ієрархією DOM, обробка подій відбувається відповідно до React-ієрархії компонентів. Наприклад, події onClick підніматимуться до батьківських компонентів React.\n\n2. Гнучкість: Портали дозволяють вставляти елементи в місця, які не вписуються в поточну структуру DOM.\n\n#### Переваги:\n\n- Легке управління \"плаваючими\" елементами.\n- Збереження контексту React навіть за межами основної DOM-ієрархії.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e34. Як працюють портали (Portals) в React, і які їх переваги та основні застосування в UI-розробці?\u003c/summary\u003e\n\n#### React\n\n- **Портали (Portals)** в React дозволяють рендерити дочірні елементи в іншу частину DOM, а не в стандартне місце рендерингу компонента. Це корисно для розміщення елементів, які повинні знаходитися поза звичною ієрархією DOM, наприклад, модальні вікна, тултіп або спливаючі елементи.\n\n#### Основні переваги порталів:\n\n- Вони дають можливість рендерити елементи в інше місце DOM, не порушуючи структуру React-компонентів.\n\n- Порти можуть бути корисні, коли потрібно рендерити елементи поверх іншого вмісту (наприклад, модальні вікна, спливаючі меню).\n\n#### Як працюють портали:\n\n- Портал дозволяє відправити вміст в будь-яке місце DOM, навіть поза межами кореневого контейнера React.\n\n#### Приклад використання порталу:\n\n```jsx\nimport ReactDOM from \"react-dom\";\n\nconst Modal = () =\u003e {\n  return ReactDOM.createPortal(\n    \u003cdiv className=\"modal\"\u003e\n      \u003ch1\u003eЦе модальне вікно\u003c/h1\u003e\n    \u003c/div\u003e,\n    document.getElementById(\"modal-root\") // Місце в DOM, куди рендеримо портал\n  );\n};\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eГоловна сторінка\u003c/h1\u003e\n      \u003cModal /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n#### Ключові моменти:\n\n- `ReactDOM.createPortal()`: використовується для створення порталу. Перший аргумент — це вміст, який рендериться, а другий аргумент — це DOM-елемент, в який цей вміст вставляється.\n\n- Портали можуть бути використані для модальних вікон, тултіпів, спливаючих меню та інших елементів, які мають бути відображені поза межами основного дерева компонентів.\n\n#### Особливості:\n\n- Хоча елементи, що рендеряться через портали, знаходяться поза межами основної ієрархії React-компонентів, вони все одно мають доступ до контексту, стану і пропсів своїх батьків.\n\n- Порти можуть бути корисні, якщо потрібно обробити випадки, коли елементи повинні бути розташовані \"поверх\" іншого контенту або на іншому рівні ієрархії DOM (наприклад, модальне вікно, яке не має бути обмежене батьківським контейнером).\n\nПорти дозволяють зберігати логіку компонента і структуру, не порушуючи правила DOM, що дозволяє створювати зручні й чисті UI-компоненти.\n\n\u003c/details\u003e\n\n### Життєвий цикл компонента\n\n\u003cdetails\u003e\n\u003csummary\u003e35. Методи життєвого циклу компонента у React?\u003c/summary\u003e\n\n#### React\n\n- Методи життєвого циклу компонента в React використовуються для управління різними етапами життя компонентів: створення, оновлення та видалення.\n\n#### Основні фази життєвого циклу:\n\n1. **Монтування (Mounting):** Коли компонент додається в DOM.\n\n- **_constructor():_** Ініціалізація стану та прив'язка методів.\n\n- **_static getDerivedStateFromProps(props, state):_** Оновлення стану перед рендером (рідко використовується).\n\n- **_render():_** Рендерить JSX у віртуальний DOM.\n\n- **_componentDidMount():_** Викликається одразу після додавання компонента в DOM. Використовується для запитів API, ініціалізації бібліотек.\n\n2. **Оновлення (Updating):** Коли змінюються пропси або стан.\n\n- **_static getDerivedStateFromProps(props, state):_** Викликається перед кожним рендером.\n\n- **_shouldComponentUpdate(nextProps, nextState):_** Контролює, чи потрібно повторно рендерити компонент. За замовчуванням повертає true.\n\n- **_render():_** Виконується для оновлення віртуального DOM.\n\n- **_getSnapshotBeforeUpdate(prevProps, prevState):_** Отримує знімок перед змінами (наприклад, положення скролу).\n\n- **_componentDidUpdate(prevProps, prevState, snapshot):_** Викликається після оновлення. Використовується для повторних запитів або роботи з DOM.\n\n3. **Розмонтування (Unmounting):** Коли компонент видаляється з DOM.\n\n- **_componentWillUnmount():_** Використовується для очищення ресурсів (наприклад, таймерів, підписок).\n\n4. **Обробка помилок (Error Handling):** Коли компонент викликає помилку.\n\n- **_static getDerivedStateFromError(error):_** Дозволяє оновити стан після помилки.\n\n- **_componentDidCatch(error, info):_** Логування помилок.\n\n#### Таблиця методів:\n\n| Фаза                | Метод                        | Опис                                    |\n| ------------------- | ---------------------------- | --------------------------------------- |\n| **Монтування**      | `constructor()`              | Ініціалізація стану та налаштування.    |\n|                     | `getDerivedStateFromProps()` | Оновлення стану перед рендером.         |\n|                     | `render()`                   | Рендеринг JSX у віртуальний DOM.        |\n|                     | `componentDidMount()`        | Виконується після додавання в DOM.      |\n| **Оновлення**       | `getDerivedStateFromProps()` | Оновлення стану перед рендером.         |\n|                     | `shouldComponentUpdate()`    | Визначає, чи потрібен повторний рендер. |\n|                     | `render()`                   | Оновлює віртуальний DOM.                |\n|                     | `getSnapshotBeforeUpdate()`  | Отримує знімок стану перед оновленням.  |\n|                     | `componentDidUpdate()`       | Виконується після оновлення.            |\n| **Розмонтування**   | `componentWillUnmount()`     | Очищення ресурсів перед видаленням.     |\n| **Обробка помилок** | `getDerivedStateFromError()` | Оновлює стан у разі помилки.            |\n|                     | `componentDidCatch()`        | Логування помилок.                      |\n\n#### Сучасний підхід:\n\nУ функціональних компонентах замість методів життєвого циклу використовують **хуки**:\n\n- `useEffect` замінює `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`.\n\n- `useState` для управління станом.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e36. Що робить метод shouldComponentUpdate?\u003c/summary\u003e\n\n#### React\n\n- `shouldComponentUpdate` – це метод життєвого циклу у класових компонентах, який визначає, чи потрібно повторно рендерити компонент.\n\n#### Як працює:\n\n- За замовчуванням повертає `true`, що означає ререндер при будь-якій зміні `state` або `props`.\n\n- Якщо повертає `false`, React не буде ререндерити компонент, навіть якщо props або `state` змінилися.\n\n#### Приклад використання:\n\n```jsx\nclass MyComponent extends React.Component {\n  shouldComponentUpdate(nextProps, nextState) {\n    return nextProps.value !== this.props.value; // Ререндер тільки при зміні value\n  }\n\n  render() {\n    return \u003cdiv\u003e{this.props.value}\u003c/div\u003e;\n  }\n}\n```\n\n#### Альтернатива у функціональних компонентах:\n\n- Використовуй `React.memo()` для мемоізації.\n\n- `useMemo()` і `useCallback()` допомагають оптимізувати ререндери.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e37. Як виконати код перед видаленням компонента з дерева?\u003c/summary\u003e\n\n#### React\n\n- Щоб виконати код перед видаленням компонента з дерева в React, використовують такі підходи:\n\n1. Класові компоненти: componentWillUnmount\n\n- Для класових компонентів є метод життєвого циклу componentWillUnmount, який викликається перед видаленням компонента.\n\n```jsx\nclass MyComponent extends React.Component {\n  componentWillUnmount() {\n    console.log(\"Компонент буде видалено\");\n  }\n\n  render() {\n    return \u003cdiv\u003eМій компонент\u003c/div\u003e;\n  }\n}\n```\n\n2. Функціональні компоненти: useEffect з очищенням\n\n- У функціональних компонентах очищення можна зробити в useEffect, повернувши функцію, яка виконається перед видаленням компонента.\n\n```jsx\nimport { useEffect } from \"react\";\n\nfunction MyComponent() {\n  useEffect(() =\u003e {\n    return () =\u003e {\n      console.log(\"Компонент буде видалено\");\n    };\n  }, []);\n\n  return \u003cdiv\u003eМій компонент\u003c/div\u003e;\n}\n```\n\n3. Обробка перед закриттям сторінки (beforeunload)\n\n- Якщо потрібно виконати код перед закриттям вкладки або перезавантаженням сторінки:\n\n```jsx\nuseEffect(() =\u003e {\n  const handleUnload = () =\u003e {\n    console.log(\"Сторінка закривається\");\n  };\n\n  window.addEventListener(\"beforeunload\", handleUnload);\n  return () =\u003e window.removeEventListener(\"beforeunload\", handleUnload);\n}, []);\n```\n\n#### Висновок\n\n- `componentWillUnmount` – для класових компонентів.\n\n- `useEffect` із `return` – для функціональних.\n\n- `beforeunload` – для випадків, коли потрібно реагувати на вихід із сторінки.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e38. Чому фрагменти (Fragment) кращі за контейнерні div?\u003c/summary\u003e\n\n#### React\n\n- Фрагменти (`\u003cReact.Fragment\u003e` або `\u003c\u003e...\u003c/\u003e`) кращі за контейнерні `\u003cdiv\u003e` у React з кількох причин:\n\n1. **Зменшення зайвого HTML**\n\n- Фрагменти не додають додатковий елемент у DOM, що зменшує кількість вкладених тегів і покращує продуктивність.\n\n```jsx\n\u003c\u003e\n  \u003ch1\u003eTitle\u003c/h1\u003e\n  \u003cp\u003eText\u003c/p\u003e\n\u003c/\u003e\n```\n\n- Результат у DOM:\n\n```html\n\u003ch1\u003eTitle\u003c/h1\u003e\n\u003cp\u003eText\u003c/p\u003e\n```\n\n- На відміну від `\u003cdiv\u003e`, який би додавав зайву вкладеність:\n\n```html\n\u003cdiv\u003e\n  \u003ch1\u003eTitle\u003c/h1\u003e\n  \u003cp\u003eText\u003c/p\u003e\n\u003c/div\u003e\n```\n\n2. **Відсутність стилістичних побічних ефектів**\n\n- Додатковий `\u003cdiv\u003e` може впливати на CSS-стилі, спричиняючи небажані зміни у верстці. Фрагменти цього уникають.\n\n3. **Краща сумісність з таблицями**\n\n- У `\u003ctable\u003e` не можна безпосередньо вкладати `\u003cdiv\u003e`, але можна використовувати фрагменти:\n\n```jsx\n\u003c\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eRow 1\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eRow 2\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/\u003e\n```\n\n- Це працює правильно, тоді як `\u003cdiv\u003e` спричинив би помилку.\n\n4. **Оптимізація продуктивності**\n\n- Менше зайвих вузлів у DOM → швидший рендеринг та менше споживання пам’яті.\n\n\u003c/details\u003e\n\n### Хуки\n\n\u003cdetails\u003e\n\u003csummary\u003e39. Що таке Хуки (Hooks) в React?\u003c/summary\u003e\n\n#### React\n\n- **React Хуки (Hooks)** — це функції, які дозволяють вам використовувати стан та інші можливості React без написання класів.\n\n#### Основні типи хуків:\n\n1. **useState** — дозволяє додавати стан в функціональні компоненти.\n\n```jsx\nconst [state, setState] = useState(initialState);\n```\n\n2. **useEffect** — дозволяє виконувати побічні ефекти (наприклад, запити до API або підписки) у функціональних компонентах.\n\n```jsx\nuseEffect(() =\u003e {\n  // код для ефекту\n}, [dependencies]); // залежності\n```\n\n3. **useContext** — доступ до значень контексту без необхідності використовувати компонент Consumer.\n\n```jsx\nconst value = useContext(MyContext);\n```\n\n4. **useRef** — дозволяє створювати посилання на DOM-елементи або зберігати значення між рендерами без змін стану.\n\n```jsx\nconst myRef = useRef(initialValue);\n```\n\n5. **useReducer** — альтернатива useState, зручна для управління складнішими станами через редуктори, подібно до Redux.\n\n```jsx\nconst [state, dispatch] = useReducer(reducer, initialState);\n```\n\n6. **useMemo** — оптимізує обчислення значень, щоб уникнути непотрібних повторних обчислень.\n\n```jsx\nconst memoizedValue = useMemo(() =\u003e computeExpensiveValue(a, b), [a, b]);\n```\n\n7. **useCallback** — повертає мемоізовану версію функції, щоб вона не створювалась знову при кожному рендері.\n\n```jsx\nconst memoizedCallback = useCallback(() =\u003e {\n  // функція;\n}, [dependencies]);\n```\n\n#### Основні переваги:\n\n- **Функціональні компоненти:** Замість класових компонентів ви можете використовувати функціональні компоненти з хуками.\n\n- **Покращена читабельність:** Логіка можна розділити на декілька хуків, що зменшує кількість коду та підвищує модульність.\n\n- **Перерозподіл логіки:** Хуки дозволяють повторно використовувати логіку в різних компонентах без створення складних ієрархій.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e40. Переваги Хуків (Hooks) в React?\u003c/summary\u003e\n\n#### React\n\n| **Перевага**                         | **Опис**                                                                                       |\n| ------------------------------------ | ---------------------------------------------------------------------------------------------- |\n| **Менше коду**                       | Хуки дозволяють уникнути класів і скоротити обсяг коду.                                        |\n| **Краща читабельність**              | Код з хуками легший для розуміння та підтримки.                                                |\n| **Повторне використання логіки**     | Custom Hooks дозволяють повторно використовувати логіку між компонентами.                      |\n| **Спрощене управління станом**       | Використання `useState` і `useReducer` робить стейт-менеджмент простішим.                      |\n| **Гнучкість у використанні ефектів** | `useEffect` дозволяє виконувати побічні ефекти без потреби в класових методах життєвого циклу. |\n| **Легша міграція**                   | Полегшує перехід від класових компонентів до функціональних.                                   |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e41. Недоліки Хуків (Hooks) в React?\u003c/summary\u003e\n\n#### React\n\n| **Недолік**                            | **Опис**                                                                                    |\n| -------------------------------------- | ------------------------------------------------------------------------------------------- |\n| **Збільшена кількість ререндерів**     | Неправильне використання хуків, особливо `useEffect`, може викликати зайві ререндери.       |\n| **Ускладнене розуміння логіки**        | Логіка компонента може бути розпорошена між кількома `useEffect`, що ускладнює дебаг.       |\n| **Відсутність явного життєвого циклу** | На відміну від класових компонентів, хуки не мають чітко виражених методів життєвого циклу. |\n| **Можливі проблеми з оптимізацією**    | Неправильне використання `useCallback` і `useMemo` може призвести до неефективної роботи.   |\n| **Складність у великих проєктах**      | У масштабних додатках хуки можуть ускладнювати управління станом і побічними ефектами.      |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e42. Правила (обмеження) використання Хуків (Hooks) в React?\u003c/summary\u003e\n\n#### React\n\n| **Правило**                          | **Опис**                                                                                                                           |\n| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |\n| **Використання тільки у функціях**   | Хуки можна викликати лише у функціональних компонентах або в кастомних хуках.                                                      |\n| **Збереження порядку виклику**       | Хуки не можна викликати умовно (`if`, `for`, `while`), інакше порушиться порядок виклику.                                          |\n| **Виклик тільки на верхньому рівні** | Хуки не можна викликати всередині вкладених функцій або обробників подій.                                                          |\n| **Іменування кастомних хуків**       | Кастомні хуки мають починатися з `use` (наприклад, `useAuth`).                                                                     |\n| **Дотримання правил залежностей**    | У `useEffect`, `useMemo` та `useCallback` залежності (`[]`) потрібно вказувати правильно, щоб уникнути непередбачуваної поведінки. |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e43. Що таке useReducer()?\u003c/summary\u003e\n\n#### React\n\n- `useReducer()` — це хук у React, який використовується для управління станом у функціональних компонентах. Це альтернатива `useState()`, яка підходить для складних логік оновлення стану, особливо якщо зміни залежать від попереднього стану.\n\n#### Синтаксис:\n\n```jsx\nconst [state, dispatch] = useReducer(reducer, initialState);\n```\n\n- `reducer` — функція, яка приймає `state` і `action`, повертаючи новий стан.\n\n- `initialState` — початковий стан.\n\n- `dispatch` — функція для виклику редюсера з певною `action`.\n\n#### Приклад:\n\n```jsx\nimport { useReducer } from \"react\";\n\nconst initialState = { count: 0 };\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case \"increment\":\n      return { count: state.count + 1 };\n    case \"decrement\":\n      return { count: state.count - 1 };\n    default:\n      return state;\n  }\n}\n\nfunction Counter() {\n  const [state, dispa","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevloversteam%2Freact-interview-questions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevloversteam%2Freact-interview-questions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevloversteam%2Freact-interview-questions/lists"}