У чому бачите переваги бібліотеки React?

Повне пояснення

Що це і навіщо React — бібліотека JavaScript для побудови інтерфейсів користувача. Вона дозволяє розбити UI на незалежні, повторно використовувані компоненти, що полегшує розробку великих застосунків.

Ключові принципи

• Декларативність: описуєте, що має бути на екрані, а не як це досягти.
• Компонентність: кожен компонент має власний стан і життєвий цикл.
• Virtual DOM: React створює віртуальну копію реального DOM, обчислюючи мінімальний набір змін.

Як це працює

1. Компонент повертає JSX (розширення синтаксису JavaScript).
2. React порівнює новий virtual DOM з попереднім (diffing) і генерує мінімальний список оновлень.
3. Оновлення застосовуються до реального DOM, що зменшує витрати на перерисування.

Практика і реалізація

import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>Clicked {count}</button>;
}

Тестування

• Unit: Jest + React Testing Library.

import { render, screen } from '@testing-library/react';
render(<Counter />);
screen.getByRole('button').click();
expect(screen.getByText(/Clicked 1/)).toBeInTheDocument();

• Integration: Cypress або Playwright для end‑to‑end.

Безпека та приватність

• Використовуйте dangerouslySetInnerHTML лише при необхідності, перевіряючи вхідні дані.
• Захищайте API‑ключі через серверний проксі.

Оптимізація

• React.memo для запобігання зайвим рендерингам.
• useCallback і useMemo для стабільних функцій/значень.

Особливості в контексті React

• Hooks: useState, useEffect, useContext замінюють класові методи.
• Context API: простий спосіб передавати дані без проп‑дрилінгу.
• Redux / Zustand: для глобального стану, коли потрібна складніша логіка.

Часті помилки

1. Необхідність ключів у списках → key проп.
2. Відсутність типізації в TS → використовуйте React.FC або інтерфейси.
3. Перевантаження стану → розділіть логіку на підкомпоненти.
4. Неправильне використання useEffect → перевірте залежності.
5. Застосування setState у циклі → використовуйте колбек‑версію.
6. Відсутність React.StrictMode → допомагає виявляти побічні ефекти.
7. Перевантаження пропсів → використовуйте React.memo.
8. Необхідність оновлення DOM вручну → залишайте це React‑у.

Cheatsheet

• useState → локальний стан.
• useEffect → побічні ефекти.
• useContext → глобальний стан без Redux.
• React.memo → мемоізація компоненту.
• key у списках → унікальний ідентифікатор.

Follow‑up питання

1. Як працює useEffect і коли він виконується?
2. Що таке virtual DOM і чому це важливо?
3. Які переваги має React.memo?