https://github.com/frontendlovers/react-interview-questions
Найпопулярніші запитання та відповіді на співбесіді з React
https://github.com/frontendlovers/react-interview-questions
interview-questions react react-interview-questions react-interview-questions-and-answers
Last synced: about 2 months ago
JSON representation
Найпопулярніші запитання та відповіді на співбесіді з React
- Host: GitHub
- URL: https://github.com/frontendlovers/react-interview-questions
- Owner: FrontendLovers
- License: mit
- Created: 2025-01-01T12:50:06.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-03-29T23:04:57.000Z (about 2 months ago)
- Last Synced: 2025-03-30T00:18:45.145Z (about 2 months ago)
- Topics: interview-questions, react, react-interview-questions, react-interview-questions-and-answers
- Homepage:
- Size: 687 KB
- Stars: 96
- Watchers: 3
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
React 
Найпопулярніші запитання та відповіді на співбесіді з React
### Основи React
1. Що таке React?
#### React
- React — це JavaScript-бібліотека для створення користувацьких інтерфейсів. Основні характеристики:
1. **Компонентний підхід:** UI розбивається на окремі компоненти, які можна повторно використовувати.
2. **Virtual DOM:** Забезпечує ефективне оновлення інтерфейсу, мінімізуючи маніпуляції з реальним DOM.
3. **Декларативність:** Ви описуєте, як має виглядати UI в певному стані, а React забезпечує його відповідність.
4. **Однонаправлений потік даних:** Дані передаються згори донизу через props, що спрощує контроль за станом.
- React створений Facebook і широко використовується для розробки SPA (Single Page Applications).
2. Перерахуйте особливості React?
#### React
1. **Компонентний підхід:** Код розділений на багаторазові, незалежні компоненти.
2. **Віртуальний (Virtual) DOM:** Швидке оновлення інтерфейсу без прямого маніпулювання DOM.
3. **Односпрямований потік даних:** Дані передаються з батьківських компонентів у дочірні через пропси.
4. **JSX:** Розширення синтаксису JavaScript для написання UI у вигляді XML-подібного коду.
5. **Стан і життєвий цикл:** Компоненти можуть зберігати і управляти своїм станом.
6. **React Hooks:** Додають можливості роботи зі станом і побічними ефектами у функціональних компонентах.
7. **Екосистема:** Підтримує бібліотеки на кшталт React Router, Redux для розширення функціоналу.
8. **SEO-френдлі (з Next.js):** Серверний рендеринг для кращої індексації.
9. **Мобільна розробка:** React Native дозволяє створювати мобільні додатки на основі React.
10. **Відкритий код:** Активна підтримка спільноти.
3. Які основні функції React?
#### React
#### Основні функції React:
1. **Декларативний підхід**
- React дозволяє створювати інтерактивний інтерфейс, описуючи, як він повинен виглядати, а бібліотека сама оптимізує оновлення DOM.
2. **Компонентна структура**
- Додаток будується з незалежних, багаторазових компонентів, які спрощують розробку, тестування та підтримку.
3. **Віртуальний DOM**
- React використовує Virtual DOM для ефективного оновлення реального DOM, що значно покращує продуктивність.
4. **Односпрямований потік даних**
- Дані передаються від батьківських компонентів до дочірніх через props, що спрощує управління станом.
5. **Хуки (Hooks)**
- Дозволяють використовувати стан і методи життєвого циклу у функціональних компонентах.
6. **JSX**
- Розширення JavaScript для опису UI в синтаксисі, схожому на HTML.
7. **React Native**
- Можливість створювати нативні мобільні додатки з використанням тих самих принципів, що і для вебу.
8. **Екосистема**
- Великий набір бібліотек та інструментів, таких як React Router, Redux, Context API.
9. **Підтримка серверного рендерингу (SSR)**
- Дозволяє оптимізувати SEO та прискорювати початкове завантаження сторінок.
10. **Управління станом**
- За допомогою useState, Context API, Redux чи інших бібліотек.
Ці функції роблять React потужною і гнучкою бібліотекою для створення сучасних додатків.
4. Які ключові переваги використання React?
#### React
#### Ключові переваги використання React
1. **Швидкість**: Завдяки Virtual DOM React мінімізує взаємодії з реальним DOM, що підвищує продуктивність.
2. **Компонентний підхід**: Код розбивається на багаторазово використовувані компоненти, що спрощує розробку та підтримку.
3. **Одностороння передача даних**: Потік даних у React відбувається в одному напрямку (зверху вниз), що полегшує дебагінг.
4. **Велика спільнота**: React має величезну екосистему бібліотек, інструментів і розширень.
5. **Сумісність із мобільною розробкою**: Використовуючи React Native, можна створювати кросплатформені мобільні додатки.
6. **JSX**: Синтаксис, який дозволяє писати JavaScript разом із HTML, що підвищує читабельність коду.
7. **Підтримка хуків**: Спрощення роботи зі станом та життєвим циклом у функціональних компонентах.
8. **SEO-дружність**: Серверний рендеринг за допомогою інструментів, таких як Next.js, покращує SEO-оптимізацію.
9. **Гнучкість**: React можна інтегрувати в будь-який проєкт або фреймворк без значних змін у коді.
10. **React DevTools**: Інструмент для налагодження, який дозволяє зручно аналізувати компоненти та стан додатка.
5. Що таке JSX?
#### React
- **JSX (JavaScript XML)** — це синтаксис, який дозволяє писати структури UI у вигляді XML-подібного коду всередині JavaScript. JSX є розширенням JavaScript і використовується в React для опису, як виглядає інтерфейс.
#### Основні особливості JSX:
1. **XML-подібний синтаксис:** Нагадує HTML, але використовується у JavaScript.
```jsx
const element =
Hello, world!
;
```
2. **Вбудований JavaScript:** Ви можете писати JavaScript-код у фігурних дужках `{}`.
```jsx
const name = "Alice";
const element =
Hello, {name}!
;
```
3. **Трансляція:** JSX компілюється в звичайний JavaScript, використовуючи такі бібліотеки, як Babel.
```jsx
const element =
Hello
;
// Перетворюється в:
const element = React.createElement("h1", null, "Hello");
```
4. Атрибути: Використовуються як у HTML, але замість `class` пишеться `className`, а замість `for` — `htmlFor`.
```jsx
const input = ;
```
5. JSX повертає дерево елементів: JSX-вираз може повертати лише один кореневий елемент. Використовуйте `` або порожній тег `<>` для групування.
```jsx
return (
<>
Title
Description
>
);
```
#### Переваги:
- Зручне створення UI-компонентів.
- Зрозумілий і читабельний синтаксис.
- Тісна інтеграція з JavaScript-логікою.
JSX не обов'язковий у React, але широко використовується через зручність і гнучкість.
6. Різниця між станом (state) та пропсами (props)?
#### React
#### Різниця між станом (state) та пропсами (props)
| Критерій | State | Props |
| -------------------- | --------------------------------------------------------------------- | -------------------------------------------------------- |
| Призначення | Зберігає внутрішній стан компонента. | Передає дані від батьківського компонента до дочірнього. |
| Змінюваність | Може змінюватися всередині компонента. | Незмінні (read-only). |
| Доступність | Доступний тільки в компоненті, де визначений. | Доступний у дочірньому компоненті через атрибути. |
| Ініціалізація | Встановлюється в компоненті за допомогою `useState` або конструктора. | Визначається батьківським компонентом. |
| Область використання | Для збереження динамічних даних, що можуть змінюватися. | Для передачі фіксованих або динамічних даних. |
| Хто керує? | Компонент, у якому state визначений. | Батьківський компонент. |
7. Яка різниця між елементом і компонентом?
#### React
#### Різниця між елементом і компонентом у React:
| Критерій | Елемент | Компонент |
| --------------------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| **Визначення** | Об'єкт, що описує, як має виглядати інтерфейс. | Функція або клас, який повертає React-елементи. |
| **Тип** | Нероздільний (immutable). | Багаторазовий і може мати стан (state). |
| **Синтаксис створення** | `React.createElement` або JSX (`
`). | Функція або клас (`function MyComponent() {}` або `class MyComponent extends React.Component {}`). |
| **Призначення** | Представляє окремий вузол у DOM. | Інкапсулює логіку та структуру інтерфейсу. |
| **Можливість використання** | Використовується для створення UI на базовому рівні. | Використовується для побудови складних структур із бізнес-логікою. |
| **Приклад** | `Hello
` | `function Hello() { return Hello
; }` |
- Елемент — це "будівельний блок", а компонент — "конструктор" для створення складних інтерфейсів.
8. Як створити компоненти в React?
#### React
#### У React компоненти можна створювати двома способами:
1. **Функціональний компонент**
- Це проста функція, яка повертає React-елементи.
```jsx
function Greeting(props) {
return
Hello, {props.name}!
;
}
// Використання:
;
```
2. **Класовий компонент**
- Це клас, який успадковується від React.Component і обов’язково має метод render.
```jsx
class Greeting extends React.Component {
render() {
return
Hello, {this.props.name}!
;
}
}
// Використання:
;
```
#### Відмінності:
- Функціональні компоненти простіші та краще підходять для компонентів без стану.
- Класові компоненти використовуються для складніших компонентів із власним станом або методами життєвого циклу.
**Примітка:** Сучасний підхід передбачає використання функціональних компонентів із хуками замість класових.
9. Що таке стан (state) у React?
#### React
- **Стан (state)** у React — це об'єкт, який використовується для зберігання даних, що можуть змінюватися з часом, і впливають на рендеринг компонента. Стан дозволяє компонентам React бути динамічними і реагувати на події, введення користувача тощо.
#### Особливості стану:
1. **Локальний для компонента:** Стан доступний тільки в тому компоненті, де він визначений.
2. **Змінюється асинхронно:** React об'єднує виклики setState для оптимізації рендерингу.
3. **Ініціалізується в конструкторі** (для класових компонентів) або через useState (у функціональних компонентах).
#### У класових компонентах:
```jsx
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
Count: {this.state.count}
Increment
);
}
}
```
#### У функціональних компонентах (з хуком `useState`):
```jsx
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
Count: {count}
setCount(count + 1)}>Increment
);
}
```
#### Основні відмінності між станом і пропсами:
- **State** — локальний для компонента і може змінюватися.
- **Props** — передаються зовні і є незмінними (immutable).
10. Що таке пропси (props) в React?
#### React
- **Пропси (props)** в React — це об'єкт, який містить дані, що передаються від батьківського компонента до дочірнього. Вони використовуються для налаштування компонентів і є незмінними (immutable).
#### Особливості пропсів:
1. **Передаються зверху вниз** (унідіrectional data flow) — від батьківського компонента до дочірнього.
2. **Незмінні** — компонент не може змінювати отримані пропси.
3. **Динамічні** — значення пропсів можуть змінюватися, якщо змінюються дані в батьківському компоненті.
#### Використання пропсів:
1. **У функціональному компоненті:**
```jsx
function Welcome(props) {
return
Hello, {props.name}!
;
}
// Використання:
;
```
2. **У класовому компоненті:**
```jsx
Копіювати;
Редагувати;
class Welcome extends React.Component {
render() {
return
Hello, {this.props.name}!
;
}
}
// Використання:
;
```
#### Передача пропсів:
```jsx
function App() {
return (
);
}
```
- Результат:
```bash
Hello, Alice!
Hello, Bob!
```
#### Деструктуризація пропсів:
```jsx
function Welcome({ name }) {
return
Hello, {name}!
;
}
```
#### Значення пропсів за замовчуванням:
```jsx
function Welcome({ name = "Guest" }) {
return
Hello, {name}!
;
}
// Використання:
; // Виведе: Hello, Guest!
```
- Пропси забезпечують компонентам React гнучкість і можливість повторного використання.
11. Навіщо потрібен атрибут key при рендері списків?
#### React
- Атрибут `key` використовується для ідентифікації елементів у списках під час рендеру.
#### Призначення:
1. **_Оптимізація оновлень:_** React використовує `key` для ефективного оновлення інтерфейсу, швидко визначаючи, які елементи змінити, додати або видалити.
2. **_Запобігання зайвим рендерам:_** `key` допомагає уникнути перерендеру незмінених елементів.
3. **_Збереження стану компонентів:_** Наприклад, якщо елемент списку містить форму, `key` дозволяє React зберігати її стан між оновленнями.
#### Правильне використання:
- Значення `key` має бути унікальним серед братніх елементів.
- Найкраще підходять стабільні ідентифікатори (наприклад, `id` з бази даних).
- Не рекомендується використовувати індекс масиву як `key`, оскільки це може призвести до помилок при зміні порядку елементів.
```jsx
const items = ["Apple", "Banana", "Cherry"];
return (
- {item} // Унікальний key для кожного елемента
{items.map((item, index) => (
))}
);
```
12. Як передаються дані між компонентами у React
#### React
- У React дані передаються між компонентами за ієрархією наступним чином:
#### Передача даних вниз (від батьківського компонента до дочірнього)
- Для передачі даних вниз використовується props. Батьківський компонент передає значення або функції через атрибути дочірньому компоненту.
- **Приклад:**
```jsx
function ParentComponent() {
const data = "Hello from Parent";
return ;
}
function ChildComponent({ message }) {
return
{message}
;}
```
- `message` передає значення `data` в дочірній компонент `ChildComponent`.
- У дочірньому компоненті доступ до пропсів відбувається через параметр функції або `this.props` у класовому компоненті.
#### Передача даних вгору (від дочірнього компонента до батьківського)
- Дані передаються вгору за допомогою callback-функцій. Батьківський компонент передає функцію дочірньому, а той викликає її з потрібними даними.
- **Приклад:**
```jsx
function ParentComponent() {
const handleData = (childData) => {
console.log("Data from child:", childData);
};
return ;
}
function ChildComponent({ sendData }) {
const data = "Hello from Child";
return sendData(data)}>Send Data;
}
```
- Батьківський компонент передає функцію `handleData` в пропс `sendData`.
- Дочірній компонент викликає `sendData`, передаючи значення `data`.
#### Альтернативні підходи для складних додатків:
1. **Контекст (Context API):**
- Для передачі даних глибоко по ієрархії без пропсів.
- Підходить для глобального стану, наприклад, теми чи мови інтерфейсу.
```jsx
const MyContext = React.createContext();
function ParentComponent() {
const data = "Hello from Context";
return (
);
}
function ChildComponent() {
const contextData = React.useContext(MyContext);
return
{contextData}
;}
```
2. **Менеджери стану (Redux, Zustand, MobX):**
- Для передачі даних у великих додатках через єдиний глобальний стан.
3. **Custom Hooks:**
- Використовується для спільного використання логіки між компонентами.
13. Чому React використовує className замість атрибута класу?
#### React
- У React використовується `className` замість `class`, тому що `class` є зарезервованим ключовим словом у JavaScript.
#### Причини:
1. **Уникнення конфліктів** – `class` використовується для визначення класів у JavaScript (`class MyComponent {}`), що могло б викликати синтаксичні помилки.
2. **Сумісність з JSX** – JSX є синтаксичним розширенням JavaScript, тому використання `className` допомагає уникнути неоднозначностей.
3. **Пряме відображення** у `document.createElement` – React перетворює JSX у виклики `React.createElement`, і для встановлення класів у DOM-елементах використовується `className`.
#### Приклад:
```jsx
// Коректний варіант у React
// Некоректний варіант (синтаксична помилка)
```
- Це стандарт React, який гарантує стабільність і узгодженість у коді.
14. Які є винятки щодо іменування компонентів React?
#### React
- В React є кілька важливих правил і винятків щодо іменування компонентів:
1. **Великі літери для компонентів:** Імена компонентів повинні починатися з великої літери. Це обов'язково, щоб React міг відрізнити компоненти від стандартних HTML-елементів.
- Наприклад:
- Правильно: ``
- Неправильно: ``
2. **CamelCase:** Рекомендується використовувати стиль CamelCase для імен компонентів. Це означає, що кожне нове слово в імені компонента починається з великої літери:
- `MyComponent`
- `UserProfile`
3. **Назви не повинні співпадати з HTML-елементами:** Не використовуйте імена компонентів, які співпадають з тегами стандартних HTML-елементів, такими як div, span, button, тощо. Це може викликати конфлікти та непередбачувану поведінку:
- Правильно: ``
- Неправильно: `` (хоча це і HTML-елемент, в React це буде трактуватися як стандартний HTML тег)
4. **Уникати спеціальних символів:** Не використовуйте спеціальні символи в іменах компонентів (наприклад, пробіли, тире, підкреслення тощо), оскільки це може призвести до синтаксичних помилок:
- Правильно: `MyComponent`
- Неправильно: `my_component`, `my-component`
5. **Функціональні компоненти vs. класи:** Якщо ви використовуєте класи для компонентів, вони також повинні мати імена з великої літери:
- `class MyComponent extends React.Component {}`
Дотримання цих правил допоможе забезпечити правильну роботу та зрозумілість у коді.
15. Як писати коментарі в React?
#### React
- В React коментарі пишуться так само, як і в JavaScript, але є певні нюанси, коли мова йде про JSX.
1. **Коментарі в JavaScript (за межами JSX)**
```javascript
// Однорядковий коментар
/*
Багаторядковий коментар
*/
```
2. **Коментарі всередині JSX**
- У JSX необхідно використовувати спеціальний синтаксис, оскільки JSX є частиною JavaScript.
- Коментарі в JSX потрібно писати всередині фігурних дужок `{}`:
```jsx
function MyComponent() {
return (
{/_ Це коментар всередині JSX _/}
Hello, world!
);
}
```
- Коментарі в JSX повинні бути оточені `{/* коментар */}`, інакше вони викликають помилки.
- Вони можуть бути використані тільки всередині виразів JSX.
3. **Коментарі в функціях та методах**
- Для коментарів всередині функцій або методів можна використовувати стандартні JavaScript коментарі:
```jsx
function MyComponent() {
// Ось тут ми рендеримо компонент
return
}
```
#### Висновок:
- У JSX використовуйте `{/* коментар */}`.
- У звичайному JavaScript — `//` для однорядкових і `/* ... */` для багаторядкових коментарів.
### Рендеринг та оновлення стану
16. Що таке Virtual DOM в React?
#### React
- **Virtual DOM** — це віртуальне представлення реального DOM, яке React використовує для ефективного оновлення інтерфейсу.
#### Як працює в React:
1. **Рендеринг у Virtual DOM:** При зміні стану або пропсів компонентів React оновлює Virtual DOM.
2. **Diffing:** React порівнює новий Virtual DOM зі старою версією, визначаючи мінімальний набір змін.
3. **Оновлення реального DOM:** Виявлені зміни застосовуються до реального DOM, зводячи до мінімуму кількість маніпуляцій.
#### Основна перевага:
- Оптимізація оновлень DOM, що значно покращує продуктивність додатків.
17. Що таке (key) prop і яка перевага його використання в масивах елементів?
#### React
- У React prop `key` використовується для ідентифікації кожного елементу в списках або масивах, щоб допомогти React ефективно керувати рендерами при зміні або оновленні елементів списку. Це важливо для оптимізації процесу рендерингу, особливо коли список змінюється (елементи додаються, видаляються або змінюються).
#### Основні моменти щодо `key`:
1. **Унікальність:** Кожен елемент у списку повинен мати унікальний `key`. Це дозволяє React відстежувати, які елементи змінюються, додаються або видаляються, а також зберігати їх стан між рендерами.
2. **Оптимізація рендерингу:** Використання key дозволяє React мінімізувати кількість ререндерів, виконуючи тільки необхідні зміни в DOM. Без `key`, React має важчий час для відстеження змін, що призводить до повного повторного рендерингу списку, навіть якщо тільки один елемент змінився.
3. **Природа key:** Prop `key` не передається в компонент, тому його не можна використовувати для відображення значень в UI. Це тільки інтерналізована властивість, що використовується React для відстеження елементів.
#### Приклад використання `key` в списку:
```jsx
const items = ["apple", "banana", "cherry"];
function FruitList() {
return (
- {item} // Важливо: використовувати унікальний key
{items.map((item, index) => (
))}
);
}
```
#### Важливість унікальності `key`:
- **Неправильне використання:** Якщо у якості key використовувати неунікальні значення (наприклад, однаковий index), React не зможе коректно відстежувати зміни, і це призведе до помилок в рендерингу.
- **Ідеальний key:** Зазвичай, якщо є унікальний ідентифікатор елемента (наприклад, id), він повинен бути використаний як key замість індексу масиву.
```jsx
const items = [
{ id: 1, name: "apple" },
{ id: 2, name: "banana" },
{ id: 3, name: "cherry" },
];
function FruitList() {
return (
- {item.name} // Краще використовувати унікальні id
{items.map((item) => (
))}
);
}
```
#### Переваги використання `key`:
- Покращує продуктивність рендерингу.
- Дозволяє React оптимально оновлювати тільки змінені елементи, а не весь список.
- Забезпечує коректну обробку стану елементів при їх переміщенні, видаленні або оновленні.
Таким чином, використання `key` є важливим для ефективної роботи з масивами елементів у React.
18. Що таке умовний рендеринг у React?
#### React
- Умовний рендеринг у React — це процес, при якому компонент рендерить різний вміст залежно від певних умов. Це дозволяє динамічно змінювати відображення компонента на основі стану, пропсів або інших факторів.
#### Основні підходи до умовного рендерингу:
1. **Оператор `if`:** Можна використовувати стандартний оператор if для вирішення, що рендерити.
```jsx
function Greeting(props) {
if (props.isLoggedIn) {
return
Welcome back!
;}
return
Please sign up.
;}
```
2. **Тернарний оператор:** Часто використовують тернарний оператор для коротших умовних виразів.
```jsx
function Greeting(props) {
return
{props.isLoggedIn ? "Welcome back!" : "Please sign up."}
;}
```
3. **Логічне І (&&) для рендерингу:** Можна використати логічний оператор `&&`, щоб рендерити елемент лише за умови, що вираз зліва від нього є істинним.
```jsx
function Notifications(props) {
return (
{props.unreadMessages.length > 0 && (
You have {props.unreadMessages.length} unread messages.
)}
);
}
```
- Це працює так: якщо props.unreadMessages.length більше за 0, то відобразиться повідомлення, інакше нічого не буде відображено.
4. **Використання `return` з умовним оператором:** Ви можете використовувати return для умовного рендерингу на основі різних умов, як в прикладі з `if` або тернарним оператором.
#### Переваги умовного рендерингу:
- Дозволяє динамічно змінювати вміст залежно від стану або пропсів.
- Покращує гнучкість і можливість відображення різного контенту для різних користувачів або ситуацій.
#### Приклад:
```jsx
function UserStatus(props) {
return (
{props.isLoggedIn ? (
Log Out
) : (
Log In
)}
);
}
```
- Тут кнопка змінюється в залежності від того, чи користувач увійшов в систему.
19. Що таке фрагменти (Fragments) у React?
#### React
- Фрагменти в React — це спосіб групувати кілька елементів без додавання зайвих елементів в DOM. Вони дозволяють повернути декілька елементів з компонента без обгортки, такої як `div`, що може допомогти уникнути зайвих елементів, що можуть порушити стилі або структуру документа.
#### Як використовуються фрагменти?
1. **Без фрагментів (з обгорткою):**
```jsx
function MyComponent() {
return (
Title
Some text
);
}
```
- У цьому прикладі повертається один `div`, який обгортає `h1` і `p`.
2. **З фрагментами (без обгортки):**
```jsx
function MyComponent() {
return (
<>
Title
Some text
>
);
}
```
Тепер `h1` і `p` рендеряться без додаткового контейнера, що дозволяє зберегти чистоту DOM.
#### Переваги:
- **_Чистий DOM:_** Можна обходитись без зайвих обгорток у DOM.
- **_Зручність для рендерингу кількох елементів:_** Повернення кількох елементів з одного компонента без необхідності використовувати додаткові елементи.
#### Синтаксис:
- Можна використовувати порожні теги `<>` і `>`, які є скороченням для ``.
- Також можна використовувати `React.Fragment`, якщо потрібно додавати ключі (наприклад, при рендерингу списків):
```jsx
{item.name}
{item.description}
```
#### Коли використовувати:
- Коли потрібно рендерити кілька елементів без додаткової обгортки в DOM.
- Коли зберігаєте структуру компонента без порушення стилів чи верстки.
Фрагменти є дуже корисними для зменшення зайвих елементів у DOM та покращення продуктивності.
20. Що таке узгодження (Reconciliation)?
#### React
- **Reconciliation** (узгодження) — це процес, який React використовує для оновлення DOM найефективнішим способом. Коли стан або пропси компонента змінюються, React обчислює мінімальні зміни, які потрібно внести до реального DOM, щоб синхронізувати його зі станом віртуального DOM.
#### Як працює reconciliation?
1. **Порівняння старого та нового віртуального DOM:**
- React зберігає копію попереднього віртуального DOM.
- При зміні стану чи пропсів створюється новий віртуальний DOM.
- React порівнює новий віртуальний DOM із попередньою копією (алгоритм diffing).
2. **Виявлення відмінностей (diffing):**
- React ідентифікує, які частини дерева змінилися (нові елементи, зміни в атрибутах чи видалення елементів).
- Для цього використовується алгоритм, оптимізований для роботи з деревоподібними структурами.
3. **Оновлення реального DOM:**
- React застосовує зміни лише до тих частин DOM, які потрібно оновити, уникаючи повного перерендеру.
#### Основні принципи reconciliation:
- **Збереження вузлів одного рівня:** Якщо вузли мають однаковий тип (наприклад, `
- **Повторне використання компонентів:** Якщо компонент залишається тим самим, React повторно використовує існуючий екземпляр компонента.
- **Ключі для списків:** Якщо список елементів рендериться з масиву, React використовує ключі (`key` prop) для порівняння та збереження вузлів.
#### Приклад роботи:
```jsx
function App({ isVisible }) {
return isVisible ?
Hello
:Goodbye
;}
```
- Якщо `isVisible` змінюється з `true` на `false`, React видалить `
` і замінить його на `
`.
#### Важливість ключів (`key` prop) для списків:
- Ключі допомагають React коректно визначати зміни в списках. Наприклад:
```jsx
- {item.text}
{items.map((item) => (
))}
```
- Без унікальних ключів React не зможе точно визначити, які елементи списку змінилися.
#### Переваги reconciliation:
- Зменшення кількості операцій із DOM.
- Підвищення продуктивності додатків.
- Гладке оновлення інтерфейсу користувача.
21. Як оновити стан компонента?
#### React
- У React стан компонента оновлюється за допомогою методу `setState` у класових компонентах або `useState` у функціональних компонентах.
#### Класові компоненти:
- Стан оновлюється через `this.setState()`.
- **_Приклад:_**
```jsx
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
Count: {this.state.count}
Increment
);
}
}
```
#### Функціональні компоненти:
- Стан оновлюється через функцію, отриману з `useState`.
- **_Приклад:_**
```jsx
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
Count: {count}
Increment
);
}
```
#### Примітки:
1. **Асинхронність:** `setState` і `useState` працюють асинхронно. Для оновлення стану на основі попереднього значення використовуйте функціональний підхід:
```jsx
this.setState((prevState) => ({ count: prevState.count + 1 }));
setCount((prevCount) => prevCount + 1);
```
2. **Не оновлюйте стан напряму:** Модифікація стану без використання `setState` або `useState` не викликає повторний рендеринг.
22. Що таке вбудовані умовні вирази?
#### React
- **Вбудовані умовні вирази** в JavaScript (зокрема у React) — це механізми, що дозволяють вбудовувати умови безпосередньо в JSX для умовного рендерингу елементів або компонентів. Це дозволяє зробити код компактнішим і зручнішим для розуміння.
#### Основні методи:
1. **Оператор умови (тернарний оператор):** Це один із найпоширеніших способів для умовного рендерингу елементів в JSX. Він має такий синтаксис:
```jsx
умова ? вираз_якщо_правда : вираз_якщо_неправда;
```
**Приклад:**
```jsx
const isLoggedIn = true;
function App() {
return
Welcome, User!
:Please log in
}}
```
2. **Логічний оператор AND (&&):** Цей метод дозволяє відображати компонент або елемент тільки тоді, коли умова є true. Якщо умова не виконується, нічого не буде рендеритись.
**Приклад:**
```jsx
const isUserAdmin = true;
function App() {
return
You have admin privileges
}}
```
- У цьому випадку `
You have admin privileges
` буде відображено лише, якщо `isUserAdmin` — це `true`.3. **IF перед поверненням JSX:** Можна також використовувати звичайні умовні оператори if перед поверненням JSX, коли умова має бути більш складною або коли потрібно виконати декілька умовних дій.
**Приклад:**
```jsx
function App() {
let content;
if (isLoggedIn) {
content =
Welcome back!
;} else {
content =
Please sign in.
;}
return
}
```
#### Переваги:
- Вбудовані умовні вирази дозволяють писати більш чистий і компактний код.
- Вони покращують читаємість і зменшують використання додаткових умовних конструкцій.
#### Важливо:
- В React не можна використовувати інструкції `if` безпосередньо в JSX. Однак можна застосувати їх перед поверненням JSX.
### Події в React
23. Яка різниця між обробкою подій HTML і React?
#### React
#### Різниця між обробкою подій у HTML та React:
| Критерій | HTML | React |
| ---------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| **Прив’язка події** | Вказується як атрибут: ``. | Використовується camelCase: ``. |
| **Тип функції** | Посилання на глобальну функцію або рядок із JavaScript-кодом. | Прив’язка до функції компонента (зазвичай вказується як метод або стрілочна функція). |
| **Додавання слухачів подій** | Обробники додаються вручну через `addEventListener`. | React автоматично керує прив’язкою через віртуальний DOM. |
| **Контекст `this`** | Потрібно вручну встановлювати контекст, якщо використовується в класах. | React автоматично зберігає правильний контекст у функціональних компонентах. |
| **Стандартна поведінка** | Необхідно явно викликати `return false` для припинення поведінки. | Використовується `event.preventDefault()` для зупинки стандартної поведінки. |
| **Сумісність** | Обробляє лише реальні DOM-події. | Використовує "SyntheticEvent", що є обгорткою над нативними подіями. |
| **Кросбраузерність** | Потрібно вручну враховувати відмінності між браузерами. | React забезпечує кросбраузерну сумісність через SyntheticEvent. |
| **Прив’язка контексту** | Часто вимагає використання `bind`. | У класових компонентах потрібен `bind`, у функціональних — ні. |
#### Приклад у HTML:
```html
Click me
```
#### Приклад у React:
```jsx
function handleClick() {
alert("Clicked!");
}
function App() {
return Click me;
}
```
#### SyntheticEvent у React:
- React використовує обгортку над нативними подіями, яка нормалізує поведінку між різними браузерами та підвищує продуктивність.
24. Що таке синтетичні події в React?
#### React
- **Синтетичні події (Synthetic Events)** у React — це обгортки для нативних DOM-подій, які надають однаковий інтерфейс для обробки подій на різних браузерах. React створює SyntheticEvent для кожної події, що дозволяє працювати з подіями в уніфікованому вигляді, забезпечуючи кросбраузерну сумісність і покращуючи продуктивність.
#### Основні характеристики:
1. **Кросбраузерність:** SyntheticEvent абстрагує особливості роботи з подіями в різних браузерах, забезпечуючи однакову поведінку.
2. **Оптимізація:** SyntheticEvent використовує пул об'єктів, що дозволяє зменшити витрати на створення нових об'єктів подій.
3. **Одноразове використання:** Після обробки події об'єкт SyntheticEvent "повертається" в пул, і його не можна використовувати після цього. Для асинхронних операцій потрібно зберігати подію в окремій змінній.
4. **Інтерфейс:** SyntheticEvent має такі ж методи, як і стандартні нативні події (наприклад, `preventDefault()`, `stopPropagation()`).
#### Приклад використання:
```jsx
function handleClick(event) {
// SyntheticEvent має доступ до методу preventDefault()
event.preventDefault();
console.log("Button clicked!");
}
function App() {
return Click me;
}
```
- У цьому прикладі event — це SyntheticEvent, який працює аналогічно до нативної події, але з покращеними можливостями.
25. Як обробляти події в React?
#### React
- В React обробка подій працює схоже на стандартний JavaScript, але з деякими відмінностями. Події в React є синтетичними, що означає, що вони мають абстракцію поверх реальних подій браузера, що забезпечує крос-браузерну сумісність.
#### Основні принципи обробки подій в React:
1. **Синтетичні події:** Всі події в React обгорнуті в об'єкт **SyntheticEvent**, який є крос-браузерною реалізацією стандартних подій DOM. Це дозволяє обробляти події однаково в усіх браузерах.
2. **Використання camelCase для подій:** У React події записуються у форматі camelCase замість стандартного нижнього регістру (наприклад, `onClick` замість `onclick`).
3. **Передача функцій як обробників подій:** Події в React обробляються за допомогою функцій, які передаються через атрибути компонентів.
#### Приклад обробки події `click`:
```jsx
import React, { Component } from "react";
class MyButton extends Component {
handleClick = () => {
alert("Button clicked!");
};
render() {
return Click Me;
}
}
export default MyButton;
```
#### Приклад з функціональним компонентом:
```jsx
import React, { useState } from "react";
function MyButton() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return Clicked {count} times;
}
export default MyButton;
```
#### Особливості обробки подій:
1. **Не потрібно використовувати `addEventListener`:** В React немає необхідності вручну додавати або видаляти обробники подій. Це автоматично керується бібліотекою React.
2. **Збереження контексту в методах класових компонентів:** Якщо методи класових компонентів використовуються як обробники подій, контекст (`this`) потрібно прив'язати або через стрілкові функції, або вручну в конструкторі.
```jsx
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
// Прив'язка методу
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
Clicked {this.state.count} times
);
}
}
```
3. **Передача параметрів у функцію обробника:** Якщо потрібно передати додаткові аргументи в обробник події, можна використовувати стрілкові функції або функції з параметрами.
```jsx
function MyButton({ label }) {
const handleClick = (event, label) => {
console.log(label);
};
return (
handleClick(event, label)}>{label}
);
}
```
#### Обробка подій в DOM:
- Всі події, що відбуваються в React, працюють за принципом делегування подій, де один обробник подій реєструється для всього дерева компонентів і пропускається через React SyntheticEvent.
26. Що таке події вказівника (Pointer Events)?
#### React
#### Події вказівника (Pointer Events) у React
- **Pointer Events** — це API, що об'єднує події миші, сенсорного екрану та стилуса в єдину систему обробки подій.
#### Основні події Pointer Events
| **Подія** | **Опис** |
| ------------------- | ------------------------------------------------------------------------ |
| **onPointerDown** | Спрацьовує при натисканні пальцем, мишею або стилусом. |
| **onPointerUp** | Спрацьовує при відпусканні кнопки миші, пальця або стилуса. |
| **onPointerMove** | Викликається при русі вказівника над елементом. |
| **onPointerEnter** | Спрацьовує, коли вказівник входить у межі елемента. |
| **onPointerLeave** | Спрацьовує, коли вказівник виходить за межі елемента. |
| **onPointerCancel** | Викликається, коли браузер скасовує подію (наприклад, при зміні фокусу). |
#### Приклад використання у React
```jsx
const PointerExample = () => {
const handlePointerDown = () => console.log("Вказівник натиснуто");
return (
Клікни тут
);
};
```
- Цей код виведе `"Вказівник натиснуто"` у консоль при натисканні будь-яким пристроєм (миша, сенсор, стилус).
### Компоненти та їх типи
27. Коли використовувати компонент класу замість функціонального компонента?
#### React
- Класові компоненти використовувалися, коли потрібна була одна або кілька з цих функцій:
1. **Робота зі станом (state):** Раніше функціональні компоненти не підтримували локальний стан, тому використовували класи для цього.
Сьогодні хуки (useState, useReducer) дозволяють функціональним компонентам працювати зі станом.
2. **Методи життєвого циклу:** Класи забезпечували доступ до методів, таких як componentDidMount, componentDidUpdate, componentWillUnmount, для управління компонентом на різних етапах його існування.
Зараз це вирішується хуком useEffect.
3. **Обробка складної логіки:** Якщо логіка потребувала кількох методів і доступу до властивостей через this, класи виглядали логічним вибором.
Сучасний підхід — хуки, які дозволяють інкапсулювати логіку.
#### Коли класи більше не потрібні:
- Починаючи з React 16.8, функціональні компоненти з хуками замінили потребу у класових компонентах. Тому в нових проєктах перевагу варто віддавати функціональним компонентам. Класи використовуються лише для підтримки застарілого коду.
28. Що таке компоненти без стану (stateless components)?
#### React
- Компоненти без стану (stateless components) — це компоненти, які не зберігають і не обробляють жодного внутрішнього стану. Вони лише отримують дані через props і відображають їх у вигляді UI. Зазвичай ці компоненти є функціональними.
#### Особливості:
1. **Відсутність стану:** Вони не використовують this.state і не змінюють свій внутрішній стан.
2. **Тільки рендеринг:** Вони просто отримують пропси та відображають їх у вигляді елементів UI.
3. **Простота та передбачуваність:** Легше тестувати і підтримувати, оскільки не потрібно слідкувати за змінами стану.
#### Приклад:
```jsx
// Stateless component
function Greeting(props) {
return
Hello, {props.name}!
;}
// Використання:
;
```
#### Переваги:
- **Простота:** Легше розуміти та підтримувати.
- **Оптимізація продуктивності:** Оскільки ці компоненти не мають стану, React може більш ефективно їх оновлювати.
#### Коли використовувати:
- Коли компонент просто відображає дані та не потребує змін.
29. Що таке компоненти стану (stateful components)?
#### React
- **Компоненти стану** (stateful components) — це компоненти, які зберігають і управляють своїм внутрішнім станом. Вони використовують state для збереження даних, які можуть змінюватися протягом часу, і ці зміни впливають на рендеринг компонента.
#### Особливості:
1. **Стан (state):** Вони використовують this.state для зберігання і управління даними, які можуть змінюватися.
2. **Методи для оновлення стану:** Використовують метод this.setState() для оновлення стану.
3. **Життєвий цикл:** Мають доступ до методів життєвого циклу компонента, таких як componentDidMount(), shouldComponentUpdate(), componentDidUpdate() тощо.
#### Приклад:
```jsx
// Stateful component
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
{this.state.count}
Increment
);
}
}
```
#### Переваги:
- **Динамічні компоненти:** Можуть змінювати свій вміст і вигляд на основі змін в стані.
- **Інтерактивність:** Підходять для створення інтерактивних інтерфейсів, де є потреба в оновленні стану при взаємодії з користувачем.
#### Коли використовувати:
- Коли компонент потребує управління внутрішнім станом, наприклад, для збереження введених даних у формі, рахунку, вибору тощо.
30. Що таке чисті компоненти (Pure Components)?
#### React
- **Чисті компоненти (Pure Components)** — це спеціальні класові компоненти React, які автоматично оптимізують рендеринг. Вони реалізують поверхневе порівняння пропсів і стану, щоб запобігти зайвим оновленням, якщо значення пропсів або стану не змінилися.
#### Як створити чистий компонент?
- Чистий компонент створюється шляхом успадкування від React.PureComponent.
```jsx
import React, { PureComponent } from "react";
class MyComponent extends PureComponent {
render() {
return
Hello, {this.props.name}!
;}
}
// Використання:
;
```
#### Як працює `PureComponent`?
- Виконує поверхневе порівняння (`shallow comparison`) пропсів і стану у методі `shouldComponentUpdate`.
- Якщо пропси та стан не змінилися, компонент не рендериться повторно.
#### Коли використовувати `PureComponent`?
- Коли пропси та стан є простими структурами (примітивні значення або неглибокі об'єкти).
- Для підвищення продуктивності в компонентах, які часто оновлюються.
#### Обмеження:
1. **Глибоке порівняння:** `PureComponent` не враховує зміни всередині вкладених об'єктів або масивів.
- Наприклад, якщо ви оновлюєте об'єкт, але посилання на нього залишається незмінним, компонент не оновиться.
```jsx
this.setState({ data: { ...this.state.data, key: "new value" } }); // Обхідна
```
2. **Не працює з функціональними компонентами.**
- Альтернатива: використовувати `React.memo` для оптимізації функціональних компонентів.
```jsx
const MyComponent = React.memo(function MyComponent(props) {
return
Hello, {props.name}!
;});
```
31. Що таке компоненти вищого порядку (Higher-Order components)?
#### React
#### Компоненти вищого порядку (Higher-Order Components, HOC)
- Компонент вищого порядку — це функція, яка приймає компонент як вхідний аргумент і повертає новий компонент, розширюючи його функціональність.
#### Синтаксис HOC:
```jsx
const EnhancedComponent = higherOrderComponent(WrappedComponent);
```
#### Особливості HOC:
1. Приймає компонент як аргумент.
2. Повертає новий компонент із додатковими властивостями чи поведінкою.
3. Дозволяє перевикористовувати логіку у різних компонентах.
#### Приклад використання:
- HOC для додавання стану до компонента:
```jsx
import React, { useState } from "react";
// HOC: додає логіку роботи зі станом
function withCounter(WrappedComponent) {
return function EnhancedComponent(props) {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return ;
};
}
// Компонент, який буде розширено
function Button({ count, increment }) {
return Clicked {count} times;
}
// Використання HOC
const EnhancedButton = withCounter(Button);
export default EnhancedButton;
```
#### Реальні сценарії використання HOC:
1. **Авторизація (Authentication)** — обгортання компонентів для перевірки прав доступу.
2. **Обробка даних** — підключення до API чи обробка стану.
3. **Логування** — додавання журналювання дій компонентів.
#### Обмеження HOC:
- Може створювати глибокі вкладення (component tree), якщо використовувати забагато HOC.
- Ускладнює читабельність через обгортання компонентів.
HOC — потужний інструмент для повторного використання логіки, але в сучасних додатках їх часто замінюють React Hooks.
32. Що таке children prop?
#### React
#### Що таке `children` prop?
- `children` — це спеціальний пропс у React, який використовується для передачі вкладених елементів або компонентів у компонент-обгортку.
#### Як це працює?
- Коли ви передаєте дочірній вміст між відкриваючим і закриваючим тегами компонента, цей вміст автоматично передається як значення `props.children`.
#### Приклад:
- **Компонент-обгортка:**
```jsx
function Wrapper({ children }) {
return
}
```
- **Використання:**
```jsx
function App() {
return (
Hello, World!
This is a paragraph inside the wrapper.
);
}
```
- **Результат:**
```html
Hello, World!
This is a paragraph inside the wrapper.
```
#### Ключові особливості `children`:
1. **Гнучкість:** Можна передавати будь-який тип даних: текст, JSX, компоненти, масиви елементів.
2. **Повторне використання:** Компонент-обгортка може динамічно відображати різний вміст.
3. **Структурованість:** Допомагає створювати компоненти з вкладеною структурою.
#### Використання `children` з функціональними пропсами:
Іноді `children` використовується як функція для динамічної передачі даних:
```jsx
function List({ items, children }) {
return
- {items.map((item) => children(item))}
}
function App() {
return (
{(item) =>
);
}
```
- **Результат:**
```html
```
- `children` — це потужний інструмент для створення універсальних і багаторазових компонентів у React.
33. Що таке портал (Portal)?
#### React
- **Портал (Portal)** у React — це спосіб рендерити дочірні елементи в DOM-вузол, який знаходиться за межами DOM-ієрархії батьківського компонента.
#### Як працює:
- React забезпечує портали через метод `ReactDOM.createPortal`, який приймає два аргументи:
1. **React-елемент**, що потрібно рендерити.
2. **Цільовий DOM-вузол**, у який слід вставити елемент.
#### Синтаксис:
```jsx
ReactDOM.createPortal(child, container);
```
- **child** — React-елемент, який потрібно рендерити.
- **container** — DOM-вузол, де елемент буде вставлено.
#### Приклад використання:
```jsx
import React from "react";
import ReactDOM from "react-dom";
function Modal({ children }) {
return ReactDOM.createPortal(
document.getElementById("modal-root") // Цільовий вузол
);
}
function App() {
return (
Основний контент
Це контент модального вікна
);
}
```
#### Де використовують портали:
- Модальні вікна.
- Спливаючі підказки (tooltips).
- Контекстні меню.
#### Особливості:
1. **Ієрархія подій:**
- Хоча елемент рендериться поза ієрархією DOM, обробка подій відбувається відповідно до React-ієрархії компонентів. Наприклад, події onClick підніматимуться до батьківських компонентів React.
2. Гнучкість: Портали дозволяють вставляти елементи в місця, які не вписуються в поточну структуру DOM.
#### Переваги:
- Легке управління "плаваючими" елементами.
- Збереження контексту React навіть за межами основної DOM-ієрархії.
34. Як працюють портали (Portals) в React, і які їх переваги та основні застосування в UI-розробці?
#### React
- **Портали (Portals)** в React дозволяють рендерити дочірні елементи в іншу частину DOM, а не в стандартне місце рендерингу компонента. Це корисно для розміщення елементів, які повинні знаходитися поза звичною ієрархією DOM, наприклад, модальні вікна, тултіп або спливаючі елементи.
#### Основні переваги порталів:
- Вони дають можливість рендерити елементи в інше місце DOM, не порушуючи структуру React-компонентів.
- Порти можуть бути корисні, коли потрібно рендерити елементи поверх іншого вмісту (наприклад, модальні вікна, спливаючі меню).
#### Як працюють портали:
- Портал дозволяє відправити вміст в будь-яке місце DOM, навіть поза межами кореневого контейнера React.
#### Приклад використання порталу:
```jsx
import ReactDOM from "react-dom";
const Modal = () => {
return ReactDOM.createPortal(
Це модальне вікно
document.getElementById("modal-root") // Місце в DOM, куди рендеримо портал
);
};
const App = () => {
return (
Головна сторінка
);
};
```
#### Ключові моменти:
- `ReactDOM.createPortal()`: використовується для створення порталу. Перший аргумент — це вміст, який рендериться, а другий аргумент — це DOM-елемент, в який цей вміст вставляється.
- Портали можуть бути використані для модальних вікон, тултіпів, спливаючих меню та інших елементів, які мають бути відображені поза межами основного дерева компонентів.
#### Особливості:
- Хоча елементи, що рендеряться через портали, знаходяться поза межами основної ієрархії React-компонентів, вони все одно мають доступ до контексту, стану і пропсів своїх батьків.
- Порти можуть бути корисні, якщо потрібно обробити випадки, коли елементи повинні бути розташовані "поверх" іншого контенту або на іншому рівні ієрархії DOM (наприклад, модальне вікно, яке не має бути обмежене батьківським контейнером).
Порти дозволяють зберігати логіку компонента і структуру, не порушуючи правила DOM, що дозволяє створювати зручні й чисті UI-компоненти.
### Життєвий цикл компонента
35. Методи життєвого циклу компонента у React?
#### React
- Методи життєвого циклу компонента в React використовуються для управління різними етапами життя компонентів: створення, оновлення та видалення.
#### Основні фази життєвого циклу:
1. **Монтування (Mounting):** Коли компонент додається в DOM.
- **_constructor():_** Ініціалізація стану та прив'язка методів.
- **_static getDerivedStateFromProps(props, state):_** Оновлення стану перед рендером (рідко використовується).
- **_render():_** Рендерить JSX у віртуальний DOM.
- **_componentDidMount():_** Викликається одразу після додавання компонента в DOM. Використовується для запитів API, ініціалізації бібліотек.
2. **Оновлення (Updating):** Коли змінюються пропси або стан.
- **_static getDerivedStateFromProps(props, state):_** Викликається перед кожним рендером.
- **_shouldComponentUpdate(nextProps, nextState):_** Контролює, чи потрібно повторно рендерити компонент. За замовчуванням повертає true.
- **_render():_** Виконується для оновлення віртуального DOM.
- **_getSnapshotBeforeUpdate(prevProps, prevState):_** Отримує знімок перед змінами (наприклад, положення скролу).
- **_componentDidUpdate(prevProps, prevState, snapshot):_** Викликається після оновлення. Використовується для повторних запитів або роботи з DOM.
3. **Розмонтування (Unmounting):** Коли компонент видаляється з DOM.
- **_componentWillUnmount():_** Використовується для очищення ресурсів (наприклад, таймерів, підписок).
4. **Обробка помилок (Error Handling):** Коли компонент викликає помилку.
- **_static getDerivedStateFromError(error):_** Дозволяє оновити стан після помилки.
- **_componentDidCatch(error, info):_** Логування помилок.
#### Таблиця методів:
| Фаза | Метод | Опис |
| ------------------- | ---------------------------- | --------------------------------------- |
| **Монтування** | `constructor()` | Ініціалізація стану та налаштування. |
| | `getDerivedStateFromProps()` | Оновлення стану перед рендером. |
| | `render()` | Рендеринг JSX у віртуальний DOM. |
| | `componentDidMount()` | Виконується після додавання в DOM. |
| **Оновлення** | `getDerivedStateFromProps()` | Оновлення стану перед рендером. |
| | `shouldComponentUpdate()` | Визначає, чи потрібен повторний рендер. |
| | `render()` | Оновлює віртуальний DOM. |
| | `getSnapshotBeforeUpdate()` | Отримує знімок стану перед оновленням. |
| | `componentDidUpdate()` | Виконується після оновлення. |
| **Розмонтування** | `componentWillUnmount()` | Очищення ресурсів перед видаленням. |
| **Обробка помилок** | `getDerivedStateFromError()` | Оновлює стан у разі помилки. |
| | `componentDidCatch()` | Логування помилок. |
#### Сучасний підхід:
У функціональних компонентах замість методів життєвого циклу використовують **хуки**:
- `useEffect` замінює `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`.
- `useState` для управління станом.
36. Що робить метод shouldComponentUpdate?
#### React
- `shouldComponentUpdate` – це метод життєвого циклу у класових компонентах, який визначає, чи потрібно повторно рендерити компонент.
#### Як працює:
- За замовчуванням повертає `true`, що означає ререндер при будь-якій зміні `state` або `props`.
- Якщо повертає `false`, React не буде ререндерити компонент, навіть якщо props або `state` змінилися.
#### Приклад використання:
```jsx
class MyComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return nextProps.value !== this.props.value; // Ререндер тільки при зміні value
}
render() {
return
}
}
```
#### Альтернатива у функціональних компонентах:
- Використовуй `React.memo()` для мемоізації.
- `useMemo()` і `useCallback()` допомагають оптимізувати ререндери.
37. Як виконати код перед видаленням компонента з дерева?
#### React
- Щоб виконати код перед видаленням компонента з дерева в React, використовують такі підходи:
1. Класові компоненти: componentWillUnmount
- Для класових компонентів є метод життєвого циклу componentWillUnmount, який викликається перед видаленням компонента.
```jsx
class MyComponent extends React.Component {
componentWillUnmount() {
console.log("Компонент буде видалено");
}
render() {
return
}
}
```
2. Функціональні компоненти: useEffect з очищенням
- У функціональних компонентах очищення можна зробити в useEffect, повернувши функцію, яка виконається перед видаленням компонента.
```jsx
import { useEffect } from "react";
function MyComponent() {
useEffect(() => {
return () => {
console.log("Компонент буде видалено");
};
}, []);
return
}
```
3. Обробка перед закриттям сторінки (beforeunload)
- Якщо потрібно виконати код перед закриттям вкладки або перезавантаженням сторінки:
```jsx
useEffect(() => {
const handleUnload = () => {
console.log("Сторінка закривається");
};
window.addEventListener("beforeunload", handleUnload);
return () => window.removeEventListener("beforeunload", handleUnload);
}, []);
```
#### Висновок
- `componentWillUnmount` – для класових компонентів.
- `useEffect` із `return` – для функціональних.
- `beforeunload` – для випадків, коли потрібно реагувати на вихід із сторінки.
38. Чому фрагменти (Fragment) кращі за контейнерні div?
#### React
- Фрагменти (`` або `<>...>`) кращі за контейнерні `
1. **Зменшення зайвого HTML**
- Фрагменти не додають додатковий елемент у DOM, що зменшує кількість вкладених тегів і покращує продуктивність.
```jsx
<>
Title
Text
>
```
- Результат у DOM:
```html
Title
Text
```
- На відміну від `
```html
Title
Text
```
2. **Відсутність стилістичних побічних ефектів**
- Додатковий `
3. **Краща сумісність з таблицями**
- У `` не можна безпосередньо вкладати `
```jsx
<>
Row 1
Row 2
>
```
- Це працює правильно, тоді як `
4. **Оптимізація продуктивності**
- Менше зайвих вузлів у DOM → швидший рендеринг та менше споживання пам’яті.
### Хуки
39. Що таке Хуки (Hooks) в React?
#### React
- **React Хуки (Hooks)** — це функції, які дозволяють вам використовувати стан та інші можливості React без написання класів.
#### Основні типи хуків:
1. **useState** — дозволяє додавати стан в функціональні компоненти.
```jsx
const [state, setState] = useState(initialState);
```
2. **useEffect** — дозволяє виконувати побічні ефекти (наприклад, запити до API або підписки) у функціональних компонентах.
```jsx
useEffect(() => {
// код для ефекту
}, [dependencies]); // залежності
```
3. **useContext** — доступ до значень контексту без необхідності використовувати компонент Consumer.
```jsx
const value = useContext(MyContext);
```
4. **useRef** — дозволяє створювати посилання на DOM-елементи або зберігати значення між рендерами без змін стану.
```jsx
const myRef = useRef(initialValue);
```
5. **useReducer** — альтернатива useState, зручна для управління складнішими станами через редуктори, подібно до Redux.
```jsx
const [state, dispatch] = useReducer(reducer, initialState);
```
6. **useMemo** — оптимізує обчислення значень, щоб уникнути непотрібних повторних обчислень.
```jsx
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```
7. **useCallback** — повертає мемоізовану версію функції, щоб вона не створювалась знову при кожному рендері.
```jsx
const memoizedCallback = useCallback(() => {
// функція;
}, [dependencies]);
```
#### Основні переваги:
- **Функціональні компоненти:** Замість класових компонентів ви можете використовувати функціональні компоненти з хуками.
- **Покращена читабельність:** Логіка можна розділити на декілька хуків, що зменшує кількість коду та підвищує модульність.
- **Перерозподіл логіки:** Хуки дозволяють повторно використовувати логіку в різних компонентах без створення складних ієрархій.
40. Переваги Хуків (Hooks) в React?
#### React
| **Перевага** | **Опис** |
| ------------------------------------ | ---------------------------------------------------------------------------------------------- |
| **Менше коду** | Хуки дозволяють уникнути класів і скоротити обсяг коду. |
| **Краща читабельність** | Код з хуками легший для розуміння та підтримки. |
| **Повторне використання логіки** | Custom Hooks дозволяють повторно використовувати логіку між компонентами. |
| **Спрощене управління станом** | Використання `useState` і `useReducer` робить стейт-менеджмент простішим. |
| **Гнучкість у використанні ефектів** | `useEffect` дозволяє виконувати побічні ефекти без потреби в класових методах життєвого циклу. |
| **Легша міграція** | Полегшує перехід від класових компонентів до функціональних. |
41. Недоліки Хуків (Hooks) в React?
#### React
| **Недолік** | **Опис** |
| -------------------------------------- | ------------------------------------------------------------------------------------------- |
| **Збільшена кількість ререндерів** | Неправильне використання хуків, особливо `useEffect`, може викликати зайві ререндери. |
| **Ускладнене розуміння логіки** | Логіка компонента може бути розпорошена між кількома `useEffect`, що ускладнює дебаг. |
| **Відсутність явного життєвого циклу** | На відміну від класових компонентів, хуки не мають чітко виражених методів життєвого циклу. |
| **Можливі проблеми з оптимізацією** | Неправильне використання `useCallback` і `useMemo` може призвести до неефективної роботи. |
| **Складність у великих проєктах** | У масштабних додатках хуки можуть ускладнювати управління станом і побічними ефектами. |
42. Правила (обмеження) використання Хуків (Hooks) в React?
#### React
| **Правило** | **Опис** |
| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| **Використання тільки у функціях** | Хуки можна викликати лише у функціональних компонентах або в кастомних хуках. |
| **Збереження порядку виклику** | Хуки не можна викликати умовно (`if`, `for`, `while`), інакше порушиться порядок виклику. |
| **Виклик тільки на верхньому рівні** | Хуки не можна викликати всередині вкладених функцій або обробників подій. |
| **Іменування кастомних хуків** | Кастомні хуки мають починатися з `use` (наприклад, `useAuth`). |
| **Дотримання правил залежностей** | У `useEffect`, `useMemo` та `useCallback` залежності (`[]`) потрібно вказувати правильно, щоб уникнути непередбачуваної поведінки. |
43. Що таке useReducer()?
#### React
- `useReducer()` — це хук у React, який використовується для управління станом у функціональних компонентах. Це альтернатива `useState()`, яка підходить для складних логік оновлення стану, особливо якщо зміни залежать від попереднього стану.
#### Синтаксис:
```jsx
const [state, dispatch] = useReducer(reducer, initialState);
```
- `reducer` — функція, яка приймає `state` і `action`, повертаючи новий стан.
- `initialState` — початковий стан.
- `dispatch` — функція для виклику редюсера з певною `action`.
#### Приклад:
```jsx
import { useReducer } from "react";
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
default:
return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
Count: {state.count}
dispatch({ type: "increment" })}>+
dispatch({ type: "decrement" })}>-
);
}
```
#### Коли використовувати:
- Коли стан має складну логіку або залежності.
- Коли необхідно уніфікувати оновлення стану через dispatch.
- Для масштабованості, наприклад, при використанні в глобальному стані.
44. Розкажіть про хуки useCallback(), useMemo(), useImperativeHandle(), useLayoutEffect()?
#### React
#### useCallback()
- Мемоізує функцію, щоб вона не створювалася заново при кожному рендері. Корисно для передачі колбеків у дочірні компоненти.
- **Приклад:**
```jsx
import { useCallback } from "react";
function MyComponent({ onClick }) {
return Натисни;
}
function Parent() {
const handleClick = useCallback(() => {
console.log("Клік");
}, []); // Функція створюється один раз
return ;
}
```
#### useMemo()
- Мемоізує обчислення, щоб не виконувати їх повторно при кожному рендері, якщо залежності не змінилися.
- **Приклад:**
```jsx
import { useMemo } from "react";
function ExpensiveCalculation({ num }) {
const result = useMemo(() => {
console.log("Обчислення...");
return num \* 2;
}, [num]); // Виконується лише при зміні num
return
}
```
#### useImperativeHandle()
- Дозволяє керувати поведінкою ref у дочірньому компоненті. Використовується разом із forwardRef().
- **Приклад:**
```jsx
import { useRef, useImperativeHandle, forwardRef } from "react";
const CustomInput = forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => inputRef.current.focus(),
clear: () => (inputRef.current.value = ""),
}));
return ;
});
function Parent() {
const inputRef = useRef();
return (
inputRef.current.focus()}>Фокус
inputRef.current.clear()}>Очистити
);
}
```
#### useLayoutEffect()
- Працює як `useEffect()`, але виконується синхронно після змін в DOM. Корисно для вимірювання або маніпуляцій з DOM перед тим, як браузер малює сторінку.
- **Приклад:**
```jsx
import { useLayoutEffect, useRef } from "react";
function LayoutEffectExample() {
const divRef = useRef();
useLayoutEffect(() => {
console.log("Ширина елемента:", divRef.current.offsetWidth);
}, []);
return (
Елемент
);
}
```
#### Коли який хук використовувати?
- `useCallback()` — для запам’ятовування функцій.
- `useMemo()` — для запам’ятовування обчислень.
- `useImperativeHandle()` — для керування ref дочірнього компонента.
- `useLayoutEffect()` — коли треба щось зробити перед відображенням змін в DOM (наприклад, вимірювання).
45. Як реалізувати одноразове виконання операції під час початкового рендерингу?
#### React
- Для виконання операції лише один раз під час початкового рендерингу у функціональних компонентах використовуй `useEffect` з порожнім масивом залежностей (`[]`):
#### Приклад:
```jsx
import { useEffect } from "react";
function MyComponent() {
useEffect(() => {
console.log("Це виконається лише один раз після монтування компонента");
}, []);
return
}
```
#### Пояснення:
- `useEffect(() => { /_ код _/ }, [])` — пустий масив залежностей означає, що ефект запуститься тільки один раз після першого рендерингу (аналог `componentDidMount` у класових компонентах).
#### Додатково (наприклад, підписка/відписка):
```jsx
useEffect(() => {
const interval = setInterval(() => {
console.log("Працює одноразовий ефект");
}, 1000);
return () => clearInterval(interval); // Очистка при розмонтуванні
}, []);
```
- Цей підхід корисний для ініціалізації API-запитів, підписок, таймерів тощо.
### Контекст та управління станом
46. Що таке контекст (Context)?
#### React
- **Контекст (Context)** в React — це механізм для передачі даних через дерево компонентів без необхідності передавати ці дані через пропси на кожному рівні.
#### Як працює контекст:
1. **React.createContext()** — використовується для створення контексту.
```jsx
const MyContext = React.createContext(defaultValue);
```
2. **Provider** — компонент, який надає значення контексту. Він обгортає частину дерева компонентів і передає значення вниз через value.
```jsx
```
3. **Consumer** — компонент, який споживає значення контексту. Зазвичай використовує функцію як дочірній елемент, що отримує значення контексту.
```jsx
{value => }
```
4. **useContext** — хук, який дозволяє доступити значення контексту без необхідності використовувати Consumer.
```jsx
const value = useContext(MyContext);
```
#### Коли використовувати:
- Коли є потреба передавати дані між компонентами на різних рівнях ієрархії (наприклад, тема, мова або користувач).
- Коли вам не хочеться передавати пропси через кілька рівнів компонентів, що може ускладнити код.
#### Приклад використання:
```jsx
// Створення контексту
const ThemeContext = React.createContext("light");
// Компонент, який надає значення контексту
function App() {
return (
);
}
// Компонент, який споживає значення контексту
function ThemedComponent() {
const theme = useContext(ThemeContext);
return
}
```
#### Переваги:
- Зручність в передачі глобальних значень.
- Покращує масштабованість програми, зменшуючи кількість переданих пропсів.
47. Як в React працює механізм контексту (Context) для спільної передачі даних між компонентами?
#### React
- Механізм **React Context** дозволяє передавати дані між компонентами без необхідності передавати їх через пропси на кожному рівні компонентів. Це корисно для глобальних даних, таких як налаштування теми, аутентифікація користувача чи мова.
#### Основні етапи роботи з контекстом:
1. **Створення контексту:** Для створення контексту використовується React.createContext(). Це повертає два компоненти:
- Provider — компонент, який передає значення контексту.
- Consumer — компонент, який отримує значення контексту.
```jsx
const MyContext = React.createContext();
```
2. **Надання контексту:** Використовуємо Provider, щоб огорнути компоненти, яким потрібно передавати контекст. В Provider передається значення через пропс value.
```jsx
const App = () => {
const [user, setUser] = useState("John Doe");
return (
);
};
```
3. **Отримання контексту:** Використовуємо Consumer або хук useContext для доступу до значення контексту.
- **Consumer:**
```jsx
const Child = () => (
{(user) =>
);
```
- **useContext хук (рекомендовано в функціональних компонентах):**
```jsx
const Child = () => {
const user = useContext(MyContext);
return
};
```
- **Зміна контексту:** Для зміни значення контексту можна використовувати функції, передані через `useState` або інші методи управління станом.
```jsx
const App = () => {
const [user, setUser] = useState("John Doe");
return (
setUser("Jane Doe")}>Change User
);
};
```
#### Ключові моменти:
- Контекст дозволяє уникати "prop drilling" (передавання пропсів через багато компонентів).
- Якщо значення контексту змінюється, всі компоненти, які споживають цей контекст, будуть перерендерені.
- **_useContext_** — зручніший і сучасніший спосіб отримати значення контексту в порівнянні з `Consumer`.
Контекст — це потужний інструмент, але використовувати його варто тільки для глобальних даних. Для локального стану краще використовувати звичайний state.
48. Що таке буріння пропсів (Prop Drilling)? Як його уникнути?
#### React
- **Prop Drilling** — це передача пропсів через кілька рівнів вкладених компонентів, навіть якщо вони потрібні лише в дочірньому компоненті глибше в ієрархії. Це ускладнює підтримку коду та робить його менш читабельним.
- **Приклад Prop Drilling:**
```jsx
const Parent = () => {
const user = { name: "John" };
return ;
};
const Child = ({ user }) => {
return ;
};
const GrandChild = ({ user }) => {
return
Ім'я: {user.name}
;};
```
- Тут `user` передається через `Child`, хоча він йому не потрібен — це і є **_буріння пропсів_**.
#### Як уникнути Prop Drilling?
| **Метод** | **Опис** |
| --------------------------------------------------- | ----------------------------------------------------------------------- |
| **Context API** | Дозволяє передавати дані безпосередньо потрібним компонентам. |
| **Зовнішні стейти (Redux, Zustand, Jotai, Recoil)** | Використовуються для управління глобальним станом без передачі пропсів. |
| **Компоненти з рендер-пропсами (Render Props)** | Дозволяють передавати функції замість пропсів. |
| **Custom Hooks** | Виносять логіку в окремі функції для доступу до загальних даних. |
#### Приклад використання Context API замість Prop Drilling
```jsx
import { createContext, useContext } from "react";
const UserContext = createContext();
const Parent = () => {
const user = { name: "John" };
return (
);
};
const GrandChild = () => {
const user = useContext(UserContext);
return
Ім'я: {user.name}
;};
```
- Тут `user` доступний напряму у `GrandChild`, без зайвої передачі через `Child`.
49. Що таке Redux?
#### React
- Redux — це бібліотека для керування станом у JavaScript-додатках, особливо популярна у React. Вона ґрунтується на концепції глобального сховища (store), де зберігається весь стан додатка, і дозволяє керувати ним через передбачувані зміни.
#### Основні принципи Redux:
1. **Єдине джерело правди** — весь стан зберігається в одному глобальному `store`, що спрощує відстеження змін.
2. **Стан є лише для читання** — змінювати стан напряму не можна, тільки через `action`.
3. **Зміни відбуваються через чисті функції** — стан змінюється за допомогою функцій-ред’юсерів (reducers), які приймають поточний стан і `action`, повертаючи новий стан.
#### Основні елементи Redux:
- **Store** — єдине сховище стану.
- **Actions** — об'єкти, що описують намір змінити стан.
- **Reducers** — чисті функції, що визначають, як змінюється стан.
- **Dispatch** — метод для відправки `action`.
- **Selectors** — функції для отримання потрібних даних зі `store`.
Redux підходить для великих додатків з ускладненими потоками даних, але для простих проєктів часто є зайвим.
50. Які ти ще знаш бібліотеки керуванням стану в React крім Redux?
#### React
- Окрім Redux, є багато бібліотек для керування станом у React:
1. **React Context API** — вбудований механізм React для передачі стану без пробросу пропсів. Добре підходить для малих і середніх додатків.
2. **Zustand** — простіший і легший за Redux, не потребує reducers та actions. Використовує імперативний підхід і працює через хуки.
3. **Recoil** — бібліотека від Facebook, що працює з атомами (atoms) та селекторами (selectors), дозволяючи створювати гнучку систему глобального стану.
4. **Jotai** — схожа на Recoil, але простіша. Використовує атоми для збереження стану та дозволяє декларативно керувати ним.
5. **MobX** — реактивний підхід до керування станом, працює через спостереження (observables). Зручний для роботи з об’єктами та складними структурами.
6. **Effector** — більш декларативний та ефективний за Redux. Побудований на реактивному підході та дозволяє легко керувати потоками даних.
7. **XState** — бібліотека для роботи з машинами станів (state machines), добре підходить для складної бізнес-логіки.
- Кожна з них має свої переваги, і вибір залежить від складності проєкту та вимог до продуктивності.
51. Що таке Redux Thunk?
#### React
- **Redux Thunk** — це middleware для Redux, який дозволяє виконувати асинхронні операції (наприклад, запити до API) перед відправкою змін у `store`.
#### Як працює:
- Звичайно, Redux дозволяє передавати в `dispatch` тільки об'єкти (actions). Redux Thunk розширює цю можливість, дозволяючи передавати функції. Це дає змогу:
1. Виконувати асинхронні дії перед зміною стану.
2. Отримувати доступ до `dispatch` і `getState` усередині `thunk`.
#### Приклад використання:
```jsx
const fetchData = () => {
return async (dispatch) => {
dispatch({ type: "FETCH_START" });
try {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
dispatch({ type: "FETCH_SUCCESS", payload: data });
} catch (error) {
dispatch({ type: "FETCH_ERROR", error });
}
};
};
```
- Далі викликаємо цей `thunk`:
```jsx
dispatch(fetchData());
```
#### Коли використовувати:
- Для запитів до API.
- Для затримок або складної логіки перед оновленням store.
- Коли потрібно виконати кілька dispatch у рамках однієї дії.
Якщо додаток має складну асинхронну логіку, краще розглянути **Redux Saga** або **RTK Query** як альтернативи.
52. Як працює Redux Saga?
#### React
- **Redux Saga** — це middleware для Redux, яке використовує генератори (function\*) для керування асинхронними запитами в додатку.
#### Як працює:
1. **Слухає екшени** (`takeEvery`, `takeLatest`) і реагує на них.
2. **Виконує побічні ефекти** (запити до API, таймери тощо).
3. **Диспатчить нові екшени** (`put`) у store.
#### Приклад:
1. **Сага для отримання даних з API:**
```jsx
import { call, put, takeEvery } from "redux-saga/effects";
function* fetchData() {
try {
const response = yield call(fetch, "https://api.example.com/data");
const data = yield response.json();
yield put({ type: "FETCH_SUCCESS", payload: data });
} catch (error) {
yield put({ type: "FETCH_ERROR", error });
}
}
```
2. **Слухач екшенів:**
```jsx
function* watchFetchData() {
yield takeEvery("FETCH_REQUEST", fetchData);
}
```
3. **Запуск саги в `store`:**
```jsx
import createSagaMiddleware from "redux-saga";
const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(watchFetchData);
```
#### Переваги Redux Saga:
✅ Керує складною асинхронною логікою.
✅ Вбудоване оброблення скасувань (`takeLatest`).
✅ Потужні оператори (`call`, `put`, `select`, `delay`).
- Redux Thunk простіший, але для складних сценаріїв **Saga краще підходить**.
53. Що таке React Fiber?
#### React
- **React Fiber** — це нова архітектура рендерингу в React, представлена з версії 16. Вона була розроблена для покращення продуктивності, підтримки асинхронного рендерингу та забезпечення більш гнучкого управління оновленнями UI.
#### Ключові особливості React Fiber:
1. **Покращена продуктивність:**
- Fiber дозволяє React зберігати стан виконання рендеру, що дає можливість переривати і продовжувати рендеринг за потреби. Це важливо для великих додатків, де складні обчислення можуть уповільнювати рендеринг.
2. **Асинхронний рендеринг:**
- React Fiber підтримує асинхронний рендеринг, що дозволяє виконувати рендеринг по частинах, покращуючи відгук додатку, особливо в складних інтерфейсах. Завдяки цьому можна виконувати рендеринг без блокування головного потоку.
3. **Пріоритет оновлень:**
- Fiber дозволяє надавати пріоритет різним типам оновлень (наприклад, рендеринг анімацій може бути високим пріоритетом, а рендеринг змін стану — низьким). Це дозволяє React управляти складними оновленнями більш ефективно.
4. **Розбиття рендерингу на підзадачі:**
- У старих версіях React всі зміни оброблялись в одному кроці. Fiber розбиває рендеринг на дрібніші підзадачі, що дозволяє React виконувати роботу поетапно і дає змогу обробляти інші важливі операції (наприклад, обробку подій) між етапами.
5. **Покращена підтримка анімацій та переходів:**
- Завдяки асинхронному рендерингу, React може більш ефективно керувати анімаціями, що робить переходи між станами плавними та без затримок.
#### Як працює React Fiber?
- У старих версіях React весь процес рендерингу був синхронним: від початку до кінця. Це означало, що важкі обчислення блокували рендеринг інтерфейсу. У React Fiber рендеринг розділений на маленькі задачі, які можуть бути виконані асинхронно. Якщо необхідно, React може перервати одну задачу і продовжити виконання пізніше, не блокуючи інші операції (наприклад, оновлення UI або обробку подій).
- **_Fiber дозволяє React:_**
- Розподіляти виконання рендерингу для покращення продуктивності.
- Реалізувати асинхронні оновлення UI.
- Краще керувати пріоритетами та обробкою важких обчислень, що особливо важливо для складних інтерфейсів і додатків.
#### Переваги:
- Покращення відгуку додатків.
- Можливість обробляти важкі операції без затримок для користувача.
- Краще управління анімаціями та переходами.
**_React Fiber_** — це внутрішнє оновлення, яке змінило спосіб, яким React працює з рендерингом, покращуючи загальну продуктивність додатків.
54. Що таке Lifting State Up у React?
#### React
**Lifting State Up** — це підхід у React, коли стан (state) піднімається до найближчого спільного предка компонентів, яким потрібно спільно використовувати цей стан. Це дозволяє організувати єдине джерело правди для управління даними між компонентами.
#### Основна ідея:
1. Компоненти, які мають спільно використовувати дані, не повинні кожен мати власний стан.
2. Стан піднімається до батьківського компонента, який передає дані через props дочірнім компонентам.
#### Як це працює:
1. Батьківський компонент зберігає стан.
2. Він передає стан та функції для оновлення стану своїм дочірнім компонентам через props.
3. Дочірні компоненти повідомляють батька про зміни, використовуючи передані функції.
#### Приклад:
```jsx
import React, { useState } from "react";
function TemperatureInput({ temperature, onTemperatureChange }) {
return (
Enter temperature in Celsius:
onTemperatureChange(e.target.value)}
/>
);
}
function BoilingVerdict({ celsius }) {
return celsius >= 100 ? (
The water will boil.
) : (
The water won't boil.
);
}
function Calculator() {
const [temperature, setTemperature] = useState("");
return (
);
}
export default Calculator;
```
#### Переваги:
1. Забезпечує єдине джерело правди для стану.
2. Полегшує синхронізацію даних між компонентами.
3. Робить компоненти більш передбачуваними та повторно використовуваними.
### Форми в React
55. Що таке контрольовані компоненти (Controlled Components)?
#### React
#### Контрольовані компоненти (Controlled Components) в React
- Контрольовані компоненти — це компоненти, в яких **React контролює стан форми** через `state`. Значення полів форми (наприклад, ``, ``, ``) прив'язуються до стану компонента, і зміни обробляються через події.
- **Як це працює:**
1. Компонент зберігає значення форми у своєму `state`.
2. Зміни значення полів форми обробляються через подію `onChange`.
3. Значення форми оновлюється, використовуючи `setState`.
- **_Приклад:_**
```jsx
import React, { useState } from "react";
function ControlledForm() {
const [inputValue, setInputValue] = useState("");
const handleChange = (event) => {
setInputValue(event.target.value); // Оновлюємо стан
};
const handleSubmit = (event) => {
event.preventDefault();
console.log("Submitted value:", inputValue);
};
return (
Enter text:
Submit
);
}
export default ControlledForm;
```
#### Основні переваги:
1. **Одне джерело істини:** Значення форми синхронізоване зі станом компонента.
2. **Гнучкість:** Легко валідовувати та модифікувати дані форми.
3. **Прозорість:** Стан форми зрозумілий та передбачуваний.
#### Відмінності від неконтрольованих компонентів:
- У контрольованих компонентах значення форми контролюється React через `state`.
- У неконтрольованих компонентах значення зберігається в самому DOM, і доступ до нього здійснюється через `ref`.
- **_Неконтрольований приклад для порівняння:_**
```jsx
function UncontrolledForm() {
const inputRef = React.useRef();
const handleSubmit = (event) => {
event.preventDefault();
console.log("Submitted value:", inputRef.current.value);
};
return (
Enter text:
Submit
);
}
```
- Контрольовані компоненти надають кращий контроль та передбачуваність у роботі з формами.
56. Що таке неконтрольовані компоненти (Uncontrolled Components)?
#### React
#### Неконтрольовані компоненти у React
- Неконтрольовані компоненти (Uncontrolled Components) — це компоненти, які зберігають свій стан у DOM, а не у внутрішньому стані React-компонента. Доступ до значень таких компонентів здійснюється за допомогою **рефів (refs)**.
#### Основні характеристики:
1. **Стан керується DOM:** значення полів зберігаються та оновлюються безпосередньо у DOM.
2. **Менше інтеграції з React:** вони не використовують useState або будь-які інші засоби React для зберігання стану.
3. **Застосування рефів:** для отримання доступу до значення полів форми використовується ref.
#### Приклад неконтрольованого компонента:
```jsx
import React, { useRef } from "react";
function UncontrolledForm() {
const inputRef = useRef(null);
const handleSubmit = (event) => {
event.preventDefault();
alert(`Введене значення: ${inputRef.current.value}`);
};
return (
Ім'я:
Відправити
);
}
export default UncontrolledForm;
```
#### Коли використовувати неконтрольовані компоненти:
- Якщо потрібна мінімальна інтеграція React із DOM.
- Якщо значення форми обробляються сторонніми бібліотеками.
- Якщо необхідна проста форма без складної логіки.
#### Переваги:
- Простота реалізації для простих форм.
- Менше коду для управління станом.
#### Недоліки:
- Менший контроль над значеннями.
- Складніше реалізувати валідацію або синхронізацію даних.
- Менш React-орієнтований підхід.
57. Як створити форму в React?
#### React
#### Створення форми в React
- Форми в React створюються за допомогою елементів `` та відповідних контролів, як-от ``, ``, ``. Реактивність форм забезпечується керованими або некерованими компонентами.
#### Керована форма (Controlled Component)
- Керовані компоненти використовують стан (state) для відстеження значення полів форми.
#### Приклад:
```jsx
import React, { useState } from "react";
function ControlledForm() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
console.log("Submitted:", { name, email });
};
return (
Name:
setName(e.target.value)}
/>
Email:
setEmail(e.target.value)}
/>
Submit
);
}
export default ControlledForm;
```
- **Особливості:**
- Кожне поле контролюється через `state`.
- Легко синхронізувати та обробляти дані форми.
#### Некерована форма (Uncontrolled Component)
- Некеровані компоненти використовують реф (`ref`) для прямого доступу до DOM-елементів.
#### Приклад:
```jsx
import React, { useRef } from "react";
function UncontrolledForm() {
const nameRef = useRef();
const emailRef = useRef();
const handleSubmit = (e) => {
e.preventDefault();
console.log("Submitted:", {
name: nameRef.current.value,
email: emailRef.current.value,
});
};
return (
Name:
Email:
Submit
);
}
export default UncontrolledForm;
```
- **Особливості:**
- Доступ до значень здійснюється через ref.
- Підходить для простих форм.
#### Основні моменти:
1. **Керована форма:**
- Використовує `state`.
- Більш підходить для складних форм, що потребують валідації або синхронізації.
2. Некерована форма:
- Використовує `ref`.
- Простий підхід без складної логіки управління станом.
Вибір підходу залежить від складності форми та потреб у взаємодії з її полями.
58. Як застосувати перевірку пропсів (props) у React?
#### React
- Для перевірки пропсів у React використовують **PropTypes**.
1. **Встановлення PropTypes (якщо не встановлено)**
```sh
npm install prop-types
```
2. **Використання PropTypes у функціональному компоненті:**
```jsx
import React from "react";
import PropTypes from "prop-types";
function UserCard({ name, age, isAdmin }) {
return (
{name}
Age: {age}
{isAdmin &&
Admin Access
});
}
// Визначення PropTypes
UserCard.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
isAdmin: PropTypes.bool,
};
// Значення за замовчуванням
UserCard.defaultProps = {
age: 18,
isAdmin: false,
};
export default UserCard;
```
3. **Використання у класовому компоненті:**
```jsx
import React from "react";
import PropTypes from "prop-types";
class UserCard extends React.Component {
render() {
const { name, age, isAdmin } = this.props;
return (
{name}
Age: {age}
{isAdmin &&
Admin Access
});
}
}
// Визначення PropTypes
UserCard.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
isAdmin: PropTypes.bool,
};
// Значення за замовчуванням
UserCard.defaultProps = {
age: 18,
isAdmin: false,
};
export default UserCard;
```
#### Доступні типи PropTypes:
- `PropTypes.string`
- `PropTypes.number`
- `PropTypes.bool`
- `PropTypes.array`
- `PropTypes.object`
- `PropTypes.func`
- `PropTypes.node` (JSX або текст)
- `PropTypes.element` (React-елемент)
- `PropTypes.oneOf(['value1', 'value2'])` (перелік допустимих значень)
- `PropTypes.shape({ key: PropTypes.type })` (об'єкт із певною структурою)
#### Висновок:
PropTypes допомагають уникнути помилок, перевіряючи типи пропсів, але в TypeScript це робиться на рівні самої мови.
### Маршрутизація
59. Чим React Router відрізняється від звичайної маршрутизації?
#### React
#### Різниця між React Router і звичайною маршрутизацією:
| Критерій | React Router | Звичайна маршрутизація (Server-Side Routing) |
| -------------------------- | ---------------------------------------------- | -------------------------------------------------- |
| **Тип маршрутизації** | Клієнтська (SPA) | Серверна (MPA) |
| **Перехід між сторінками** | Без перезавантаження сторінки (JS оновлює URL) | Перезавантаження сторінки при кожному переході |
| **Швидкість** | Швидший, оскільки не перезапитує сервер | Повільніший через нові HTTP-запити |
| **SEO** | Гірший без SSR (але Next.js вирішує проблему) | Кращий, оскільки контент завантажується із сервера |
| **Обробка даних** | Динамічний рендеринг компонентів | Завантаження HTML зі сторони сервера |
| **Налаштування** | Потрібен React Router | Використовує стандартні можливості сервера |
60. Як передавати пропси в React Router?
#### React
- Щоб передати пропси в компоненти при використанні **React Router**, є кілька підходів:
1. **Використання компоненту Route для передачі пропсів:**
- Можна передавати пропси через компонент **Route** за допомогою `render` або `children`.
#### Приклад:
```jsx
import { Route } from "react-router-dom";
}
/>;
```
- Тут ми передаємо додаткові пропси до компонента `Profile`.
2. **Використання useNavigate() для передачі даних через навігацію (за допомогою state):**
- При переході на нову сторінку можна передавати пропси через `state`.
#### Приклад:
```jsx
import { useNavigate } from "react-router-dom";
function Home() {
const navigate = useNavigate();
function goToProfile() {
navigate("/profile", { state: { user: "John" } });
}
return Go to Profile;
}
```
#### Отримання пропсів у компоненті:
```jsx
import { useLocation } from "react-router-dom";
function Profile() {
const location = useLocation();
const user = location.state?.user;
return
}
```
3. **Використання useParams() для доступу до параметрів маршруту:**
- Якщо потрібно передати параметри через URL, можна використовувати `useParams()`.
#### Приклад:
```jsx
import { useParams } from "react-router-dom";
function Profile() {
const { id } = useParams();
return
}
```
#### Висновок:
- `render` або `children` підходять для передачі пропсів безпосередньо.
- `useNavigate()` та `state` дозволяють передавати дані між сторінками.
- `useParams()` зручний для динамічних параметрів в URL.
### Стилізація в React
61. Способи стилізації в React-компонентах?
#### React
#### Способи використання стилів у React-компонентах:
1. **Inline-стилі** Стилі передаються безпосередньо у вигляді об’єкта через атрибут `style`.
```jsx
function InlineStyle() {
const style = {
color: "blue",
fontSize: "20px",
};
return
Привіт, React!
;}
```
2. **CSS-файли** Використання звичайних CSS-файлів, які імпортуються в компонент.
```jsx
import "./styles.css";
function CSSFile() {
return
Привіт, React!
;}
```
```css
Копіювати
Редагувати
/* styles.css */
.heading {
color: blue;
font-size: 20px;
}
```
3. **CSS-модулі** Створюють локально ізольовані стилі для кожного компонента.
```jsx
import styles from "./styles.module.css";
function CSSModule() {
return
Привіт, React!
;}
```
```css
/* styles.module.css */
.heading {
color: blue;
font-size: 20px;
}
```
4. **Styled Components** Використання бібліотеки styled-components для написання стилів у JavaScript.
```bash
npm install styled-components
```
```jsx
import styled from "styled-components";
const Heading = styled.h1`
color: blue;
font-size: 20px;
`;
function StyledComponent() {
return Привіт, React!;
}
```
5. **Emotion** Альтернативна бібліотека для стилізації, схожа на styled-components.
```bash
npm install @emotion/react @emotion/styled
```
```jsx
/**_ @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
const style = css`
color: blue;
font-size: 20px;
`;
function EmotionStyle() {
return
Привіт, React!
;}
```
6. **CSS-in-JS** Створення динамічних стилів у звичайних JavaScript-файлах.
```jsx
function CSSInJS({ isBlue }) {
const style = {
color: isBlue ? "blue" : "red",
fontSize: "20px",
};
return
Привіт, React!
;}
```
7. **Tailwind CSS** Фреймворк класів утиліт для стилізації компонентів.
```jsx
function TailwindExample() {
return
Привіт, React!
;}
```
- **_Налаштування Tailwind CSS:_** додайте залежності та налаштуйте конфігурацію.
8. **Sass/SCSS** Розширений CSS із підтримкою змінних, міксинів та вкладеності.
```bash
npm install sass
```
```jsx
import "./styles.scss";
function SCSSExample() {
return
Привіт, React!
;}
```
```scss
/* styles.scss */
.heading {
color: blue;
font-size: 20px;
}
```
#### Вибір способу залежить від:
- Масштабності проекту.
- Потреби в ізоляції стилів.
- Переваг команди.
62. У чому перевага модульних стилів (module CSS)?
#### React
- **Перевага модульних стилів (CSS Modules):**
1. **_Локальний Scope_** — стилі застосовуються тільки до компонента, а не глобально. Це запобігає конфліктам між класами і гарантує, що стилі не впливають на інші частини додатку.
2. **_Унікальні імена класів_** — CSS Modules автоматично генерує унікальні імена класів, що виключає ризик перезапису стилів з іншими компонентами.
3. **_Легша підтримка_** — з меншими проблемами при масштабуванні проекту, оскільки кожен компонент має свої стилі, що робить код більш організованим і легким для розуміння.
4. **_Ізольованість_** — кожен компонент має повну ізоляцію стилів, що спрощує рефакторинг і зміну стилів без впливу на інші компоненти.
5. **_Легша інтеграція з JavaScript_** — можна використовувати динамічні стилі за допомогою JavaScript, змінюючи класи в залежності від стану компонента.
- Це дозволяє зберігати порядок у великих додатках і знижує ймовірність помилок у стилях.
### Оптимізація продуктивності
63. Які підходи ви знаєте для оптимізації продуктивності React-додатків?
#### React
#### Підходи для оптимізації продуктивності React-додатків:
1. **Мемоїзація компонентів:**
- Використовуйте `React.memo` для мемоїзації функціональних компонентів, які не залежать від частих оновлень пропсів.
- Використовуйте `PureComponent` для класових компонентів.
2. **Мемоїзація значень та функцій:**
- `useMemo` — для обчислення значень, які залежать від певних залежностей.
- `useCallback` — для мемоїзації функцій, які передаються в дочірні компоненти.
3. **Оптимізація рендерингу списків:**
Завжди використовуйте унікальний key для елементів у списках.
Уникайте повторного рендерингу компонентів без потреби.
4. **Динамічне завантаження компонентів:**
- Використовуйте `React.lazy` для завантаження компонентів на вимогу.
- В поєднанні з `Suspense` це дозволяє оптимізувати завантаження додатку.
5. **Контроль за ререндерингом:**
- Використовуйте `shouldComponentUpdate` або `React.memo` для зменшення непотрібних рендерів.
- Використовуйте `React.Fragment` замість додаткових обгорткових елементів.
6. **Розділення коду (Code Splitting):**
- Впроваджуйте `React.lazy` та динамічні імпорти, щоб завантажувати код модулів лише тоді, коли це потрібно.
7. **Управління станом:**
- Уникайте зберігання глобального стану для компонентів, де це не потрібно.
- Виносьте важкі операції зі станом у контекст або спеціалізовані бібліотеки (Redux, Zustand).
8. **Віртуалізація списків:**
- Використовуйте бібліотеки, такі як `react-window` або `react-virtualized`, для рендерингу лише видимих елементів списків.
9. **Оптимізація зображень:**
- Використовуйте відкладене завантаження (`lazy loading`) для зображень.
- Стискайте та оптимізуйте зображення перед використанням.
10. **Зменшення кількості компонентів в DOM:**
- Уникайте надмірного вкладення компонентів.
- Видаляйте непотрібні елементи з DOM при переходах між сторінками.
11. **Кешування даних:**
- Використовуйте кешуючі бібліотеки, такі як `SWR` чи `React Query`, для управління даними та зменшення запитів до сервера.
12. **Використання Production-збірки:**
- Упевніться, що додаток побудований за допомогою production-режиму (`npm run build`).
- Використовуйте інструменти, такі як `Webpack`, для мінімізації та оптимізації коду.
13. **Профілювання додатку:**
- Використовуйте `React DevTools` для аналізу продуктивності.
- Виявляйте "вузькі місця" за допомогою вкладки "Profiler".
14. **Оптимізація CSS та стилів:**
- Використовуйте `CSS-in-JS` рішення (наприклад, `styled-components`) тільки там, де це необхідно.
- Стискайте стилі за допомогою `PostCSS` або інших інструментів.
Ці підходи допомагають зменшити затримки, підвищити швидкість рендерингу та загальну продуктивність додатку.
64. Різниця між memo і useMemo?
#### React
#### Різниця між memo і useMemo
| Критерій | memo | useMemo |
| ------------------------ | ----------------------------------------------------------------- | ------------------------------------------------------ |
| **Що це?** | Функція вищого порядку (HOC) | Хук |
| **Призначення** | Запобігає повторному рендеру компонента, якщо пропси не змінилися | Запам’ятовує результат обчислення між рендерами |
| **Де використовується?** | Обгортає компонент | Всередині компонента |
| **Приклад використання** | `export default memo(MyComponent);` | `const value = useMemo(() => compute(), [deps]);` |
| **Що кешує?** | Весь компонент | Результат функції |
| **Коли застосовувати?** | Якщо компонент рендериться з тими ж пропсами без змін | Якщо обчислення ресурсозатратне і залежить від змінних |
#### Коли використовувати?
- `memo` — коли компонент отримує однакові пропси і його ререндер не потрібен.
- `useMemo` — коли потрібно зберігати результат обчислення, щоб не перераховувати його кожен раз.
65. Навіщо setState() потрібно передавати функцію?
#### React
- Передача функції в `setState()` потрібна, коли новий стан залежить від попереднього. Це гарантує правильне оновлення, оскільки `setState()` виконується асинхронно і може групувати виклики.
#### Приклад з проблемою:
```jsx
function Counter() {
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
setCount(count + 1);
}
return {count};
}
```
- Тут `count + 1` обчислюється двічі з тим самим старим `count`, тому кнопка збільшуватиме значення лише на 1, а не на 2.
#### Правильний підхід:
```jsx
function Counter() {
const [count, setCount] = useState(0);
function increment() {
setCount((prevCount) => prevCount + 1);
setCount((prevCount) => prevCount + 1);
}
return {count};
}
```
- Тут `setCount()` отримує актуальне значення `prevCount`, тому інкремент працює коректно, збільшуючи значення на 2.
### Взаємодія з DOM
66. Як рефи (refs) у React використовуються для взаємодії з DOM елементами?
#### React
- Рефи (refs) у React використовуються для отримання доступу до DOM елементів або компонентів безпосередньо, обминаючи стандартний механізм пропсів та стану.
1. **Створення рефів:** Використовуєш `React.createRef()` для створення рефа.
```jsx
const myRef = React.createRef();
```
2. **Прив'язка рефа до елемента:** Реф передається до DOM елемента через атрибут `ref`.
```jsx
```
3. **Взаємодія з DOM:** Реф дає доступ до DOM елемента через `.current`. Наприклад, щоб встановити фокус:
```jsx
myRef.current.focus();
```
4. **Обмеження:** Рефи не повинні використовуватися для керування станом, вони призначені лише для взаємодії з DOM, коли це необхідно (наприклад, для фокусу, вибору тексту чи анімацій).
5. **Функціональні компоненти:** В React 16.8 і вище для функціональних компонентів використовують useRef.
```jsx
const inputRef = useRef();
inputRef.current.focus();
```
67. Як використовувати InnerHtml у React?
#### React
- У React для вставки HTML-контенту в DOM використовується атрибут dangerouslySetInnerHTML. Це дає можливість вставити HTML безпосередньо в компонент, однак такий підхід може бути небезпечним, тому й називається "dangerously", оскільки він дозволяє вбудовувати сирий HTML, що може призвести до XSS-атак, якщо дані не очищені.
#### Приклад використання `dangerouslySetInnerHTML`:
```jsx
const MyComponent = () => {
const htmlContent = "
Це HTML контент.
";return
;};
```
#### Пояснення:
- `dangerouslySetInnerHTML` приймає об'єкт, в якому ключ `__html` містить рядок HTML-коду.
- Це дозволяє вбудовувати HTML всередину компонента, але не безпечно, якщо контент надходить з ненадійних джерел.
#### Коли використовувати:
- Якщо ви впевнені в безпечності даних (наприклад, від власних серверів).
- Коли вам потрібно вбудувати динамічний HTML-контент, такий як сторінки чи статті з HTML.
#### Застереження:
- Безпека: Ніколи не використовуйте dangerouslySetInnerHTML для вставки даних, отриманих від користувача чи зовнішніх джерел, без попередньої очистки від шкідливих скриптів.
- Для очищення контенту використовуйте бібліотеки, такі як DOMPurify, щоб уникнути XSS атак.
Приклад очищення даних перед вставкою:
```jsx
import DOMPurify from "dompurify";
const MyComponent = () => {
const dirtyHtml = "";
const cleanHtml = DOMPurify.sanitize(dirtyHtml);
return
;};
```
Отже, `dangerouslySetInnerHTML` слід використовувати обережно і тільки в тих випадках, коли ви впевнені в безпеці контенту.
### Рендеринг та серверна частина
68. Що таке ReactDOMServer?
#### React
- `ReactDOMServer` — це бібліотека, що входить до складу React, і використовується для рендерингу React-компонентів на сервері, тобто для серверного рендерингу (SSR). Це дозволяє генерувати HTML-код на сервері і передавати його на клієнт, що може покращити продуктивність і SEO.
#### Основні методи:
1. `ReactDOMServer.renderToString()`: Рендерить React-елементи в HTML-строку. Це основний метод для генерації статичного HTML для початкового завантаження сторінки.
```jsx
import ReactDOMServer from "react-dom/server";
const html = ReactDOMServer.renderToString();
```
2. `ReactDOMServer.renderToStaticMarkup()`: Рендерить HTML без будь-яких додаткових атрибутів, пов'язаних з React, таких як data-reactroot. Це підходить для створення повністю статичних сторінок.
```jsx
const html = ReactDOMServer.renderToStaticMarkup();
```
3. `ReactDOMServer.hydrate()`: Використовується на клієнтській стороні для "гідратації" серверно-рендереного HTML, тобто для прив'язування реактивності до уже існуючого HTML.
```jsx
ReactDOM.hydrate(, document.getElementById("root"));
```
#### Використання:
- **SSR (Server-Side Rendering):** Це підхід, при якому React-компоненти рендеряться на сервері, а не в браузері, що дозволяє надсилати повністю сформовану HTML-сторінку на клієнт.
- **SEO:** Оскільки сервер відразу відправляє HTML-контент, пошукові системи можуть індексувати сторінки без необхідності виконувати JavaScript.
Таким чином, `ReactDOMServer` дозволяє створювати попередньо рендерені сторінки, що покращує швидкість завантаження і може бути корисним для SEO.
69. Яке використання пакету react-dom?
#### React
- Пакет `react-dom` використовується для взаємодії React з реальним DOM у веб-додатках. Основні функції:
1. `ReactDOM.render()`: Використовується для рендерингу компонента в реальний DOM. Це основний метод, який зв'язує React з HTML-елементами.
```jsx
ReactDOM.render(, document.getElementById("root"));
```
2. `ReactDOM.hydrate()`: Використовується для гідратації серверно-рендереного HTML (наприклад, для SSR). Це дозволяє React взяти на себе управління вже наявним HTML.
```jsx
ReactDOM.hydrate(, document.getElementById("root"));
```
3. `ReactDOM.createPortal()`: Дозволяє рендерити дочірні елементи в іншому місці DOM, поза межами звичайної ієрархії компонентів. Це часто використовується для модальних вікон, тултіпів і спливаючих елементів.
```jsx
ReactDOM.createPortal(, document.getElementById("modal-root"));
```
4. `ReactDOM.unmountComponentAtNode()`: Видаляє React-компонент з DOM.
```jsx
ReactDOM.unmountComponentAtNode(document.getElementById("root"));
```
5. `ReactDOM.findDOMNode()`: Дає доступ до реального DOM елемента компонента (рідко використовується, бо є більш сучасні підходи через рефи).
- Цей пакет необхідний для роботи з реальним DOM, але в більшості випадків, після початкової установки, вам не потрібно вручну викликати ці методи, оскільки вони автоматично використовуються за допомогою інструментів для компіляції та рендерингу.
70. Як використовувати React.lazy та React.Suspense для запуску коду програми?
#### React
- `React.lazy` та `React.Suspense` використовуються для **_динамічного завантаження компонентів_** в React, що дозволяє реалізувати **_розподілений рендеринг_** (code splitting). Це означає, що частини коду завантажуються лише тоді, коли вони необхідні, покращуючи тим самим продуктивність вашої програми.
#### Як це працює:
1. `React.lazy()` дозволяє відкладено завантажувати компонент.
2. `React.Suspense` використовується для обгортання частини коду, який ще не завантажений, і дозволяє показувати запасний контент (наприклад, лоадер), поки компоненти не завантажаться.
#### Приклад:
1. **Динамічне завантаження компонента:**
- Спочатку створіть компонент, який буде завантажуватися динамічно.
```jsx
// Динамічно завантажуваний компонент
const MyComponent = React.lazy(() => import("./MyComponent"));
```
2. **Обгортка з `React.Suspense`:**
- Тепер використовуйте `React.Suspense`, щоб показати лоадер під час завантаження компонента.
```jsx
function App() {
return (
Моя програма
{/* Обгортка для динамічно завантажуваних компонентів */}
Завантаження...
);
}
```
3. **Опис:**
- `React.lazy()` приймає функцію, яка динамічно імпортує модуль.
- `React.Suspense` обгортатиме компонент, що використовує React.lazy(), і покаже запасний контент (в даному випадку, текст "Завантаження..."), поки компонент не завантажиться.
#### Переваги:
- Покращує продуктивність, завантажуючи компоненти лише тоді, коли це необхідно.
- Зменшує розмір початкового завантаження, оскільки частини програми завантажуються на вимогу.
Це підхід особливо корисний у великих програмах, де можна розділити код на частини, щоб зменшити час завантаження сторінки.
### Безпека
71. Найкращі практики безпеки в React?
#### React
#### Найкращі практики безпеки в React:
1. **Запобігання XSS (Cross-Site Scripting):**
- Завжди очищуйте дані, що надходять від користувача, перед їх відображенням у компоненті.
- Використовуйте JSX (React автоматично очищає вводи, але слід уникати використання `dangerouslySetInnerHTML`).
- Якщо потрібно використовувати `dangerouslySetInnerHTML`, переконайтеся, що вміст надійно очищений.
2. **Уникайте ін'єкцій коду:**
- Ніколи не передавайте дані без перевірки у `eval()`, `setTimeout()`, `setInterval()` або інші функції, які виконують код.
- Для динамічного імпорту використовуйте функціональність з вбудованим контролем (наприклад, `React.lazy()`).
3. **Безпечний доступ до API:**
- Використовуйте HTTPS для захисту даних, що передаються через мережу.
- Використовуйте автентифікацію та авторизацію, а також захищені куки (HTTPOnly, Secure).
4. **Захист від CSRF (Cross-Site Request Forgery):**
- Використовуйте токени CSRF для перевірки всіх запитів, які змінюють дані на сервері.
- Використовуйте флаг `SameSite` для cookies, щоб обмежити доступ до них тільки на тому ж домені.
5. **Контроль доступу:**
- Перевіряйте, чи є в користувача права на виконання запитуваної дії перед тим, як відправити запит на сервер.
- Не довіряйте клієнтським перевіркам. Всі перевірки на сервері повинні бути остаточними.
6. **Захист від відкритих редагувальних полів:**
- Для форм і полів, що приймають дані від користувачів, встановлюйте обмеження на допустимі значення.
7. **Оновлення залежностей:**
- Регулярно перевіряйте і оновлюйте залежності для виявлення потенційних вразливостей. Використовуйте `npm audit` або інші інструменти для цього.
8. **Керування секретами:**
- Не зберігайте секрети (API-ключі, паролі тощо) в клієнтському коді. Вони повинні бути на сервері або в середовищах, таких як перемінні оточення.
9. **Використання Content Security Policy (CSP):**
- Використовуйте CSP для запобігання виконанню небажаних скриптів на вашому сайті.
10. **Захист від Clickjacking:**
- Використовуйте заголовки `X-Frame-Options` або `Content-Security-Policy` для запобігання вашому сайту бути вбудованим в `` на інших веб-сайтах.
Дотримання цих практик допоможе знизити ризики безпеки в React-додатках.
72. Як обробляти помилки в React за допомогою Error Boundary?
#### React
- **Error Boundaries** у React дозволяють ловити помилки у компонентах під час рендерингу, в методах життєвого циклу та в конструкторах, а також обробляти їх без повного зупинення додатку.
#### Основні моменти:
- Error Boundary — це компонент, який обгортає інші компоненти і може ловити помилки, що виникають в їхньому коді.
- Error Boundaries ловлять лише помилки, що сталися в їхніх нащадках. Вони не ловлять помилки в самому Error Boundary.
#### Як реалізувати Error Boundary:
1. **Створення Error Boundary:** Для створення Error Boundary потрібно реалізувати два методи:
- `static getDerivedStateFromError(error)` — оновлює стан при виникненні помилки.
- `componentDidCatch(error, info)` — дозволяє реєструвати помилки (наприклад, надсилати їх на сервер).
```jsx
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false, error: null };
}
static getDerivedStateFromError(error) {
// Оновлюємо стан, щоб показати запасний UI
return { hasError: true, error };
}
componentDidCatch(error, info) {
// Логіка для реєстрації помилок (наприклад, на сервер)
console.error("Error caught:", error, info);
}
render() {
if (this.state.hasError) {
// Показуємо запасний UI, якщо сталася помилка
return
Щось пішло не так.
;}
return this.props.children;
}
}
```
2. **Використання Error Boundary:** Обгортаємо компоненти, які можуть викликати помилки, у `ErrorBoundary`.
```jsx
const App = () => {
return (
);
};
```
3. **Запасний інтерфейс:** Коли помилка відбувається, в ErrorBoundary можна показати запасний інтерфейс (наприклад, повідомлення про помилку, кнопку для повторної спроби або навіть дії для відновлення додатку).
#### Важливі моменти:
- Error Boundary не ловить помилки в обробниках подій (наприклад, onClick), асинхронних кодах, таймерах чи мережевих запитах. Для цих випадків використовуй try-catch або інші механізми.
- Якщо помилка сталася у самому Error Boundary, вона не буде зловлена.
Error Boundaries корисні для стабільності додатку, дозволяючи перехоплювати та обробляти помилки, не зупиняючи весь додаток.
### Додаткові концепції
73. Що таке інверсія спадкування (Inheritance Inversion)?
#### React
- **Інверсія спадкування (Inheritance Inversion)** — це ситуація, коли клас, який мав би бути базовим, фактично залежить від його нащадків або втрачає контроль над логікою, що повинна бути у спадковій ієрархії.
#### Проблеми інверсії спадкування
- Порушення принципу Liskov Substitution (LSP).
- Важко змінювати або розширювати базовий клас без впливу на всі його нащадки.
- Збільшення складності через взаємозалежності.
#### Приклад поганої практики
```js
class Parent {
method() {
throw new Error("Метод має бути реалізований у нащадку");
}
}
class Child extends Parent {
method() {
return "Реалізація в нащадку";
}
}
```
- Тут базовий клас не має власної логіки і змушує нащадків реалізовувати поведінку, що є ознакою інверсії спадкування.
#### Альтернатива: Композиція замість спадкування
```js
class Behavior {
method() {
return "Реалізація без інверсії";
}
}
class Parent {
constructor() {
this.behavior = new Behavior();
}
method() {
return this.behavior.method();
}
}
```
- Цей підхід усуває залежність батьківського класу від нащадків, роблячи код гнучкішим.
74. Що таке "опитування" (Polling)? Як його реалізувати у React?
#### React
- **Опитування (Polling)** — це періодичне надсилання запитів до сервера для отримання оновлених даних. Це корисно, коли сервер не підтримує WebSockets або Server-Sent Events, а клієнт має отримувати нову інформацію без необхідності перезавантаження сторінки.
#### Реалізація Polling у React
- Опитування можна реалізувати через `setInterval`, `setTimeout` або використовуючи React-хуки (`useEffect`).
1. **Використання `setInterval`**
```jsx
import { useState, useEffect } from "react";
const PollingComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch("https://api.example.com/data");
const result = await response.json();
setData(result);
};
fetchData(); // Виконати одразу при завантаженні
const interval = setInterval(fetchData, 5000); // Опитування кожні 5 сек.
return () => clearInterval(interval); // Очищення при розмонтуванні
}, []);
return
};
```
- fetchData() отримує дані із сервера.
- setInterval запускає опитування кожні 5 секунд.
- clearInterval зупиняє опитування при розмонтуванні.
2. **Використання `setTimeout` для динамічного інтервалу**
- Якщо сервер має обмеження по запитах, краще використовувати setTimeout, щоб уникнути накладання запитів.
```jsx
const PollingComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
let isMounted = true;
const fetchData = async () => {
try {
const response = await fetch("https://api.example.com/data");
const result = await response.json();
if (isMounted) setData(result);
} catch (error) {
console.error("Помилка запиту", error);
} finally {
if (isMounted) setTimeout(fetchData, 5000);
}
};
fetchData();
return () => {
isMounted = false; // Запобігає оновленню стану після розмонтування
};
}, []);
return
};
```
- Тут setTimeout викликається лише після завершення попереднього запиту, що дозволяє уникнути накладання запитів.
#### Висновок
- setInterval підходить для постійного опитування, але може створювати накладення запитів.
- setTimeout дає більше контролю і краще підходить для адаптивного опитування.
- У разі великих навантажень варто розглянути WebSockets або Server-Sent Events.
75. Як у React реалізувати двостороннє зв'язування даних?
#### React
- У React двостороннє зв’язування даних реалізується через **керовані компоненти** (controlled components), де стан (`state`) компонента синхронізується з полем вводу (`input`).
#### Приклад реалізації
```jsx
import { useState } from "react";
const TwoWayBinding = () => {
const [value, setValue] = useState("");
return (
setValue(e.target.value)}
/>
Введене значення: {value}
);
};
export default TwoWayBinding;
```
#### Як це працює?
1. `value` зберігає поточний стан введеного значення.
2. `onChange` оновлює стан при зміні `input`.
3. Оновлений `value` відображається в інтерфейсі, забезпечуючи двосторонній зв’язок.
- Цей підхід дозволяє контролювати введені дані, робити валідацію та обробку перед оновленням стану.
76. Що таке зворотний потік даних (Reverse Data Flow) у React?
#### React
- Зворотний потік даних (Reverse Data Flow) у React означає передачу змін у стані від дочірнього компонента до батьківського компонента. Це протилежність звичайному потоку даних, де батьківський компонент передає пропси дочірньому компоненту.
#### У React зворотний потік даних зазвичай реалізується через:
1. **Callback-функції:**
- Дочірній компонент викликає callback, переданий йому через пропси, щоб повідомити батьківський компонент про зміни в своєму стані або виконати якісь дії.
- Наприклад, при оновленні значення в дочірньому компоненті, можна викликати функцію з батьківського компонента, яка оновлює стан.
2. **Приклад:**
```jsx
function Parent() {
const [value, setValue] = useState("");
const handleChange = (newValue) => {
setValue(newValue);
};
return ;
}
function Child({ onValueChange }) {
return onValueChange(e.target.value)} />;
}
```
- У цьому прикладі дочірній компонент передає значення в батьківський через функцію onValueChange, що реалізує зворотний потік даних.
77. Що таке мутація стану і як їй запобігти?
#### React
- Мутація стану — це пряме змінювання об'єкта або масиву, що зберігає стан, без створення копії. В React це призводить до непередбачуваних результатів, оскільки React не знає, що стан змінився, і не перерендерить компонент.
#### Щоб запобігти мутації стану, треба:
1. **Створювати копії даних** перед їх зміною. Наприклад, для масивів та об'єктів:
- Для масивів: `setItems([...items, newItem])`
- Для об'єктів: `setUser({...user, name: 'John'})`
2. **Використовувати методи, що не мутують дані**, як `map()`, `filter()`, `reduce()` для масивів, або `Object.assign()` для об'єктів.
- Це дозволяє React коректно відслідковувати зміни та перерендерювати компоненти.
-
78. Що таке строгий режим (Strict Mode) React? Його переваги?
#### React
- **Strict Mode** — це спеціальний інструмент React для виявлення потенційних проблем у коді. Він не впливає на роботу у продакшені, але допомагає покращити якість коду під час розробки.
- Активується обгорткою компонентів у ``:
```jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
);
```
#### Переваги Strict Mode
| **Функція** | **Опис** |
| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| **Виявлення небезпечних методів життєвого циклу** | Попереджає про застарілі методи (`componentWillMount`, `componentWillReceiveProps`, `componentWillUpdate`). |
| **Двічі викликає функції під час розробки** | Допомагає знайти побічні ефекти у `useEffect` та інших хуках. |
| **Попереджає про використання застарілого API** | Вказує на старі контексти (`contextType`) та небезпечні патерни. |
| **Виявляє непередбачувану поведінку** | Наприклад, викликає `useEffect` двічі, щоб перевірити коректність очистки ефектів. |
#### Чи варто його використовувати?
- Так, якщо ти хочеш уникнути проблем ще на етапі розробки. Він може трохи дратувати через подвійний рендер, але це допомагає знаходити приховані помилки в коді.
79. Які рекомендовані способи перевірки статичних типів?
#### React
1. **TypeScript:** Найбільш популярний та повний підхід для статичної типізації в JavaScript/React. TypeScript додає строгі типи до вашого коду, дозволяючи перевіряти типи на етапі компіляції.
2. **PropTypes:** Вбудований механізм для перевірки типів пропсів у React компонентах. Використовується для валідації типів під час виконання. Це не дає статичної типізації на етапі компіляції, але дозволяє перевіряти пропси під час виконання додатка.
```jsx
MyComponent.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
};
```
3. **Flow:** Інший механізм для статичної типізації в JavaScript. Flow є менш популярним, ніж TypeScript, але також дозволяє додавати типи та перевіряти їх на етапі компіляції.
4. **ESLint з плагінами для типізації:** Можна використовувати ESLint з плагінами для перевірки типів (наприклад, eslint-plugin-flowtype або eslint-plugin-typescript), але це не дає такої глибини типізації, як TypeScript.
- Рекомендую використовувати TypeScript, оскільки він інтегрується з React та іншими інструментами і надає повну статичну типізацію на етапі компіляції.
### Анімація
80. Як реалізувати анімацію в React?
#### React
1. **CSS анімації:** Найпростіший спосіб — використання стандартних CSS анімацій або переходів.
```jsx
{`
.my-element {
animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
`}
```
2. **React Transition Group:** Для більш складних анімаційних переходів між компонентами. Цей пакет дозволяє керувати анімацією під час додавання чи видалення компонентів.
```jsx
import { CSSTransition } from 'react-transition-group';
{`
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 300ms;
}
`}
```
3. **Framer Motion:** Це потужна бібліотека для анімацій, яка дозволяє реалізувати складні анімації в React.
```jsx
import { motion } from "framer-motion";
Hello
;
```
4. **React Spring:** Для фізично базованих анімацій, що дозволяють створювати анімації з реалістичними рухами.
```jsx
import { useSpring, animated } from "react-spring";
const props = useSpring({ opacity: 1, from: { opacity: 0 } });
Hello;
```
5. **Inline стилі та JavaScript:** Можна використовувати setState та змінювати стилі на основі стану компонента.
```jsx
const [opacity, setOpacity] = useState(0);
useEffect(() => {
setOpacity(1);
}, []);
return
```
- Для складніших анімаційних ефектів рекомендується використовувати **_Framer Motion_** або **_React Spring_**, бо ці бібліотеки дають більше можливостей та легше керувати складними анімаціями.
81. Які самі популярні пакети для анімації у React?
#### React
- **Популярні пакети для анімації в React:**
1. **_Framer Motion_** — один з найпопулярніших пакетів для анімацій в React. Простий у використанні, підтримує анімації та переходи, працює з drag-and-drop, а також має потужну API для створення складних анімацій.
2. **_React Spring_** — бібліотека для створення фізичних анімацій. Використовує підхід до анімацій, що ґрунтується на фізичних властивостях, таких як пружність і тертя. Добре підходить для складних анімацій і взаємодій.
3. **_GSAP (GreenSock Animation Platform)_** — потужна бібліотека для анімацій, яка працює не тільки з React, а й з іншими фреймворками. Відомий своєю швидкістю і можливістю створювати складні, хардкорні анімації.
4. **_React Transition Group_** — основна бібліотека для анімацій переходів у React. Вона дозволяє створювати анімації входу, виходу та змін стану компонентів, надаючи гнучкість у визначенні переходів.
5. **_Lottie for React_** — дозволяє легко вбудовувати анімації, створені в After Effects, у форматі JSON. Підходить для складних анімацій, таких як іконки або інтерактивні елементи.
### Тестування та налагодження
82. React DevTools: Як використовувати для налагодження?
#### React
1. **Встановлення React DevTools**
- Якщо використовуєш `Chrome` або `Firefox`, просто встанови розширення `React Developer Tools`:
- Chrome Web Store
- Firefox Add-ons
- Якщо налагоджуєш `Electron`, `React Native` або інший нестандартний оточення, встанови:
```sh
npm install -g react-devtools
react-devtools
```
2. **Основні вкладки та їх використання**
- ⚛ **Components** → перегляд структури компонентів, стану та пропсів.
- ⚡ **Profiler** → аналіз продуктивності та виявлення зайвих рендерів.
3. **Дебаг пропсів і стану**
- Відкрий вкладку Components.
- Вибери компонент → побачиш його `props`, `state`, `context`.
- Можеш редагувати `state` і `props` прямо у `DevTools`, щоб тестувати зміну поведінки.
4. **Виявлення зайвих рендерів**
- У вкладці Profiler натисни "Record", зроби взаємодію, натисни "Stop".
- Перевір кольорове маркування:
- **Червоний** → дорогий рендер.
- **Жовтий** → середня вартість.
- **Синій** → легкий рендер.
- Оптимізуй компоненти через `React.memo()`, `useMemo()`, `useCallback()`.
5. **Інструменти для відладки Context API**
- Якщо використовуєш React Context, можна перевірити його значення в DevTools.
- Вибери компонент, який використовує `useContext()`, і знайди вкладку Context.
6. **Відладка рендеру в Strict Mode**
- Якщо `React DevTools` показує, що компонент рендериться двічі, перевір StrictMode у `index.js`:
```jsx
```
- Він не викликає багів, а лише допомагає виявити потенційні проблеми.
7. **Інспекція хуків**
- DevTools дозволяє бачити стан хуків (`useState`, `useEffect`, `useReducer`).
- У вкладці Components вибери компонент → побачиш стан `useState`.
#### Висновок:
- React DevTools — це потужний інструмент для налагодження стану, пропсів, продуктивності та контексту. Використовуй Profiler для оптимізації та Components для відстеження змін у стані та пропсах.
83. Які самі популярні лінтери для React?
#### React
- **Самі популярні лінтери для React:**
1. **_ESLint_** — найпоширеніший лінтер для `JavaScript`, який підтримує `React` через плагін `eslint-plugin-react`. Він перевіряє стиль коду, знайомить з помилками і може працювати разом з іншими інструментами, такими як `Prettier` для форматування.
2. **_Prettier_** — інструмент для автоматичного форматування коду, часто використовується в комбінації з `ESLint` для забезпечення єдиного стилю коду.
3. **_TSLint_** — лінтер для `TypeScript`, який також можна використовувати з `React`, хоча зараз його активно замінюють на `ESLint` через його більшу гнучкість та підтримку.
- Ці інструменти допомагають підтримувати високий рівень якості коду та запобігають помилкам у великих проектах.
### Суміжні технології
84. Що таке Next.js?
#### React
- **Next.js** — це React-фреймворк, який надає готові рішення для серверного рендерингу (SSR), статичної генерації (SSG), API-роутів, маршрутизації, оптимізації продуктивності та SEO.
#### Основні можливості:
- **Гібридний рендеринг:** підтримка SSR, SSG та ISR (інкрементального оновлення).
- **Автоматична маршрутизація:** файли у pages/ автоматично стають маршрутами.
- **API-роути:** створення серверних ендпоінтів у файлах pages/api/\*.
- **Оптимізація продуктивності:** автоматичний код-сплітинг, зменшення бандлу.
- **Підтримка App Router:** новий підхід на основі React Server Components та app/ замість pages/.
- **Вбудована підтримка Tailwind, TypeScript, ESLint та інших технологій**.
Використовується для створення високопродуктивних вебзастосунків, блогів, e-commerce рішень та складних інтерфейсів.
85. Які головні відміності між Next.js і React?
#### React
#### Головні відмінності між Next.js і React:
| **Критерій** | **React** | **Next.js** |
| ----------------------------------- | -------------------------------------- | ------------------------------------------------------------------------ |
| **Тип** | Бібліотека для створення UI | Фреймворк на базі React |
| **Рендеринг** | Тільки клієнтський (CSR) | Підтримує CSR, SSR, SSG, ISR |
| **Маршрутизація** | Реалізується вручну через React Router | Файлова маршрутизація (`pages/` або `app/`) |
| **SEO** | Погана підтримка через CSR | Хороша підтримка SEO (SSR, SSG) |
| **API-роути** | Немає | Вбудована можливість створювати API-ендпоінти (`pages/api/`) |
| **Кешування** | Немає вбудованих механізмів | ISR дозволяє оновлювати сторінки без повного перегенерації |
| **Оптимізація продуктивності** | Використання сторонніх рішень | Вбудовані оптимізації (код-сплітинг, автоматичне завантаження зображень) |
| **Підтримка серверних компонентів** | Залежить від конфігурації | Вбудована підтримка React Server Components (`app/`) |
#### Висновок:
- React підходить для SPA, які рендеряться на клієнті.
- Next.js краще підходить для SEO-оптимізованих проєктів, гібридного рендерингу та продуктивних вебзастосунків.
86. Для чого потрібен React Helmet Async?
#### React
- **React Helmet Async** — це оптимізована версія **React Helmet**, яка використовується для динамічного оновлення `` (мета-теги, заголовки, Open Graph тощо) у React-додатках.
#### Навіщо потрібен?
1. **SEO-оптимізація** – дозволяє змінювати заголовки сторінок, мета-описи, ключові слова.
2. **Динамічний ``** – можна змінювати теги для кожної сторінки без перезавантаження.
3. **Підтримка SSR (Server-Side Rendering)** – на відміну від звичайного React Helmet, ця версія коректно працює у SSR-додатках без проблем з асинхронністю.
#### Приклад використання:
```jsx
import { Helmet } from "react-helmet-async";
function MyComponent() {
return (
Головна сторінка
);
}
```
#### SSR(Next.js, Express);
```jsx
import { HelmetProvider, Helmet } from "react-helmet-async";
const helmetContext = {};
const html = renderToString(
);
const { helmet } = helmetContext;
const finalHtml = `
${helmet.title.toString()}
${helmet.meta.toString()}
${html}
`;
```
#### Чому краще за `react-helmet`?
✅ Підтримує SSR без помилок асинхронності.
✅ Легший та швидший.
✅ Не створює проблем при `StrictMode`.
- Висновок: **Якщо потрібен SEO у React + SSR, варто використовувати `react-helmet-async`**.
### Підхід до розробки
87. Що таке розподілений компонент (Distributed Component)?
#### React
- **Розподілений компонент (Distributed Component)** — це концепція, коли компонент розбивається на кілька незалежних частин, що можуть рендеритися або виконувати логіку окремо, але працюють разом.
#### Приклади реалізації:
1. **Код-сплітинг (Code Splitting)**
- Компоненти вантажаться лише при необхідності, що зменшує початковий розмір бандла.
```jsx
import { lazy, Suspense } from "react";
const LazyComponent = lazy(() => import("./LazyComponent"));
function App() {
return (
Завантаження...
);
}
```
2. **Компоненти-контейнери (Container-Presentational Pattern)**
- Виділяє логіку (контейнер) та відображення (презентаційний компонент).
```jsx
function DataContainer({ children }) {
const [data, setData] = useState(null);
useEffect(() => {
fetch("/api/data")
.then((res) => res.json())
.then(setData);
}, []);
return children(data);
}
function Presentational({ data }) {
return
}
function App() {
return (
{(data) => }
);
}
```
3. **Мікрофронтенди (Micro Frontends)**
- Використання окремих автономних компонентів у різних частинах застосунку.
- Наприклад, різні команди розробляють окремі частини великого проєкту (`React`, `Vue`, `Angular`) і інтегрують їх разом.
#### Коли використовувати:
- Для оптимізації продуктивності (ліниве завантаження).
- Щоб спростити підтримку коду (відокремлення логіки).
- Для масштабованих застосунків (мікрофронтенди).
88. Що таке компонент-перемикач (Switching Component)?
#### React
- **Компонент-перемикач (Switching Component)** в React — це патерн, коли компонент динамічно рендерить один із своїх дочірніх компонентів на основі певної умови. Це використовується, коли потрібно відображати різні компоненти залежно від стану, маршруту чи отриманих даних.
#### Приклад 1: Перемикання на основі стану
```jsx
const SwitchingComponent = ({ type }) => {
switch (type) {
case "success":
return ;
case "error":
return ;
default:
return ;
}
};
```
```jsx
const App = () => {
return ;
};
```
- `type` визначає, який компонент буде відображений.
#### Приклад 2: Використання з React Router
```jsx
import { Route, Routes } from "react-router-dom";
const App = () => {
return (
} />
} />
} />
);
};
```
- Тут `Routes` виступає як компонент-перемикач для рендерингу відповідного компонента залежно від URL.
#### Приклад 3: Умовне рендеринг через об'єкт
```jsx
const components = {
success: SuccessMessage,
error: ErrorMessage,
default: DefaultMessage,
};
const SwitchingComponent = ({ type }) => {
const Component = components[type] || components.default;
return ;
};
```
- Це більш чистий варіант без `switch`.
Компоненти-перемикачі спрощують логіку та роблять код більш читабельним, коли потрібно умовно рендерити різні компоненти.
### Просунуті питання
89. Що таке Reselect та як він працює?
#### React
- Reselect — це бібліотека для створення ефективних селекторів у Redux. Вона допомагає оптимізувати отримання даних зі стану та уникати непотрібних рендерів компонентів за допомогою мемоізації.
#### Як працює Reselect?
- Reselect використовує **_мемоізацію_**, щоб повторно використовувати результати обчислень, якщо вхідні дані не змінилися.
1. **Приймає "input селектори"**, які отримують дані зі стану.
2. **Обчислює значення** на основі отриманих даних.
3. **Кешує результат**, щоб не виконувати обчислення при однакових вхідних значеннях.
#### Приклад використання:
```jsx
import { createSelector } from "reselect";
// Вхідний селектор отримує всі користувачі
const selectUsers = (state) => state.users;
// Вхідний селектор отримує активний фільтр
const selectFilter = (state) => state.filter;
// Мемоізований селектор фільтрує користувачів
export const selectFilteredUsers = createSelector(
[selectUsers, selectFilter],
(users, filter) => users.filter((user) => user.role === filter)
);
```
🔹 Без Reselect компонент перевіряв би весь масив users при кожному рендері.
🔹 З Reselect селектор виконується тільки тоді, коли users або filter змінюється.
#### Переваги Reselect:
✅ Зменшує кількість зайвих викликів mapStateToProps.
✅ Уникає непотрібних рендерів компонентів.
✅ Легко комбінується з Redux.
✅ Покращує продуктивність.
90. Які типи даних може повернути render?
#### React
- Метод `render()` у React може повертати:
1. **JSX або React-елемент**
```jsx
render() {
return
}
```
2. **Масив елементів (фрагментований рендеринг)**
```jsx
render() {
return [
];
}
```
3. **Фрагменти (React.Fragment)**
```jsx
render() {
return (
<>
Title
Description
>
);
}
```
4. **null (нічого не рендерити)**
```jsx
render() {
return null;
}
```
5. **Булеві значення (ігноруються)**
```jsx
render() {
return false; // Нічого не відобразиться
}
```
6. **Текстові значення (рендеряться як текст)**
```jsx
render() {
return "Hello, World!";
}
```
7. **Портали (рендер у DOM-елемент поза батьківським компонентом)**
```jsx
import { createPortal } from "react-dom";
render() {
return createPortal(
}
```
🚀 Висновок: Основний варіант — JSX або React-елементи, але можна повертати масиви, фрагменти, null, текст або рендерити через портали.
91. Як React обробляє чи обмежує використання пропсів певного типу?
#### React
- React обмежує використання пропсів певного типу за допомогою `PropTypes` або `TypeScript`.
1. **Використання PropTypes (вбудована перевірка типів)**
```jsx
import PropTypes from "prop-types";
const MyComponent = ({ name, age, isActive }) => {
return (
{name}
Вік: {age}
{isActive ? "Активний" : "Неактивний"}
);
};
// Визначення типів пропсів
MyComponent.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
isActive: PropTypes.bool,
};
```
- `PropTypes.string.isRequired` — обов’язковий пропс name.
- `PropTypes.number` — age має бути числом.
- `PropTypes.bool` — isActive має бути булевим значенням.
Якщо передані некоректні типи, React видасть попередження в консолі (тільки у режимі розробки).
2. **Використання TypeScript (строга перевірка на рівні компіляції)**
```tsx
Копіювати;
Редагувати;
type MyComponentProps = {
name: string;
age?: number;
isActive: boolean;
};
const MyComponent: React.FC = ({ name, age, isActive }) => {
return (
{name}
Вік: {age}
{isActive ? "Активний" : "Неактивний"}
);
};
```
- `name: string` — обов’язковий рядковий пропс.
- `age?: number` — необов’язковий числовий пропс.
- `isActive: boolean` — обов’язковий булевий пропс.
TypeScript дає помилку ще до запуску коду, якщо передані неправильні пропси.
#### Що вибрати?
| **Метод** | **Переваги** | **Недоліки** |
| -------------- | --------------------------------------- | ----------------------------------------- |
| **PropTypes** | Простий, працює в JavaScript | Перевіряє лише в runtime, слабка безпека |
| **TypeScript** | Строга типізація, ловить помилки раніше | Потрібна компіляція, складніший синтаксис |
- Якщо проєкт на **TypeScript**, **PropTypes** не потрібен. Якщо **JavaScript**, **PropTypes** дає базову перевірку.
92. Різниця між рендерингом та монтуванням?
#### React
- Різниця між рендерингом та монтуванням у React
| **Процес** | **Опис** |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Монтування (Mounting)** | Компонент створюється і додається в DOM вперше. Викликаються `constructor`, `render`, `componentDidMount` (у класах) або `useEffect` з порожнім масивом залежностей (у функціональних компонентах). |
| **Рендеринг (Rendering)** | Виконується виклик `render()` або повторний виклик функціонального компонента для оновлення вмісту. Відбувається при зміні `state`, `props` або виклику `forceUpdate()`. |
#### Приклад монтування
```jsx
useEffect(() => {
console.log("Компонент змонтовано");
}, []); // Виконається один раз при монтуванні
```
#### Приклад рендерингу
```jsx
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Компонент відрендерився");
}); // Виконається при кожному рендері
return setCount(count + 1)}>+;
```
Тут рендер відбувається кожного разу при зміні `count`.
93. Що таке реактивний потік даних (reactive data flow) у React?
#### React
- **Реактивний потік даних (Reactive Data Flow) у React** означає, що зміни в стані або пропсах компонента автоматично призводять до оновлення UI без необхідності вручну викликати ререндеринг.
#### Основні принципи:
1. **Односторонній потік даних** – React передає дані згори вниз (від батьківських до дочірніх компонентів).
2. **Декларативність** – Описуємо, "що" треба рендерити, а React сам керує оновленням.
3. **Автоматичне оновлення** – Якщо state або props змінюються, React перерендерює лише змінені частини.
#### Приклад реактивного оновлення:
```jsx
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
Лічильник: {count}
setCount(count + 1)}>Збільшити
);
}
```
#### Як це працює?
- `useState` створює стан `count`.
- При кліку `setCount(count + 1)` оновлює стан.
- React автоматично ререндерить компонент із новими даними.
#### Чи є React повністю реактивним?
- Ні. На відміну від "реактивних" фреймворків типу Svelte або Solid.js, React не оновлює DOM при зміні змінної напряму. Він використовує Virtual DOM і запускає ререндер при зміні `state` або `props`.
#### Висновок:
- Реактивний потік даних у React означає, що UI автоматично оновлюється при зміні стану, але з використанням Virtual DOM і батчингом оновлень для оптимізації.
94. Чи є React реактивним?
#### React
- React не є чисто реактивною бібліотекою, як, наприклад, Vue або Svelte. Однак React має деякі характеристики, які роблять його схожим на реактивні фреймворки:
1. **Автоматичне оновлення UI**: React оновлює UI (інтерфейс) автоматично, коли змінюється стан (state) або пропси компонента, що нагадує реактивні підходи. Це відбувається через процес рендерингу та порівняння змін.
2. **Функціональні компоненти і хуки**: Використання хуків, таких як `useState`, `useEffect`, створює ефект реактивності, де зміни в стані або пропсах приводять до повторного рендеру компонентів.
3. **Часткова реактивність**: React виконує перерендер тільки тих компонентів, чий стан чи пропси змінилися, що є підходом до реактивності, але на відміну від інших фреймворків, React не обробляє залежності або значення з автоматичними спостерігачами.
- Отже, React має деякі реактивні принципи, але не є повністю реактивним фреймворком.
95. Які варіанти реалізації drag-and-drop у React ти знаєш?
#### React
- Drag-and-drop у React можна реалізувати кількома способами:
- **Використання HTML5 API** (`onDragStart`, `onDrop`)
- **Бібліотеки** (`react-dnd`, `dnd-kit`)
1. **Використання нативного Drag-and-Drop API**
```jsx
import { useState } from "react";
function DragAndDrop() {
const [items, setItems] = useState(["Item 1", "Item 2", "Item 3"]);
const onDragStart = (e, index) => {
e.dataTransfer.setData("text/plain", index);
};
const onDrop = (e, targetIndex) => {
const sourceIndex = e.dataTransfer.getData("text/plain");
const newItems = [...items];
const [movedItem] = newItems.splice(sourceIndex, 1);
newItems.splice(targetIndex, 0, movedItem);
setItems(newItems);
};
return (
- onDragStart(e, index)}
onDragOver={(e) => e.preventDefault()}
onDrop={(e) => onDrop(e, index)}
style={{ padding: "10px", border: "1px solid black", margin: "5px" }}
>
{item}
{items.map((item, index) => (
))}
);
}
export default DragAndDrop;
```
✅ Простий, без сторонніх бібліотек.
❌ Обмежений контроль, не підтримує складні кейси.
2. **Використання `react-dnd` (потужніший варіант)**
```bash
npm install react-dnd react-dnd-html5-backend
```
```jsx
import { DndProvider, useDrag, useDrop } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { useState } from "react";
const ItemType = "ITEM";
function DraggableItem({ item, index, moveItem }) {
const [{ isDragging }, drag] = useDrag({
type: ItemType,
item: { index },
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
});
const [, drop] = useDrop({
accept: ItemType,
hover: (draggedItem) => {
if (draggedItem.index !== index) {
moveItem(draggedItem.index, index);
draggedItem.index = index;
}
},
});
return (
style={{
padding: "10px",
margin: "5px",
border: "1px solid black",
backgroundColor: isDragging ? "lightgray" : "white",
}}
>
{item}
);
}
function DragAndDrop() {
const [items, setItems] = useState(["Item 1", "Item 2", "Item 3"]);
const moveItem = (from, to) => {
const updatedItems = [...items];
const [movedItem] = updatedItems.splice(from, 1);
updatedItems.splice(to, 0, movedItem);
setItems(updatedItems);
};
return (
{items.map((item, index) => (
))}
);
}
export default DragAndDrop;
```
✅ Гнучкий, підтримує складні кейси.
✅ Легше працювати з вкладеними елементами.
❌ Додає залежність.
3. **Використання `dnd-kit` (простий та сучасний варіант)**
```bash
npm install @dnd-kit/core @dnd-kit/sortable
```
```jsx
import { DndContext, closestCenter } from "@dnd-kit/core";
import { SortableContext, useSortable, arrayMove } from "@dnd-kit/sortable";
import { useState } from "react";
function SortableItem({ id }) {
const { attributes, listeners, setNodeRef, transform, transition } =
useSortable({ id });
return (
{id}
);
}
function DragAndDrop() {
const [items, setItems] = useState(["Item 1", "Item 2", "Item 3"]);
const onDragEnd = ({ active, over }) => {
if (active.id !== over.id) {
setItems((items) => {
const oldIndex = items.indexOf(active.id);
const newIndex = items.indexOf(over.id);
return arrayMove(items, oldIndex, newIndex);
});
}
};
return (
{items.map((id) => (
))}
);
}
export default DragAndDrop;
```
✅ Сучасний API, легший за react-dnd.
✅ Простий у використанні.
✅ Підтримує сортування (sortable).
#### Висновок:
- Якщо потрібно щось просте → **HTML5 Drag-and-Drop API.**
- Якщо потрібен гнучкий контроль → **react-dnd.**
- Якщо хочеш сучасний, легкий варіант → **dnd-kit.**
96. Як відрендерити HTML код у React-компоненті?
#### React
- Використовуй `dangerouslySetInnerHTML`, але будь обережний — це може призвести до XSS-атак, якщо вставляєш несанітизовані дані.
#### Приклад:
```jsx
Копіювати;
Редагувати;
function MyComponent() {
const htmlContent = "
Це HTML-код
";return
;}
```
- Якщо працюєш з динамічними даними, обов’язково санітизуй їх перед вставкою.
97. Як реалізувати додавання класу за умовою в React?
#### React
- В React умовне додавання класів до елементів зазвичай здійснюється через атрибут `className` і використання тернарного оператора або функцій для визначення умов.
#### Основні підходи:
1. **Тернарний оператор**
```jsx
function MyComponent({ isActive }) {
return (
);
}
```
- Якщо `isActive` дорівнює `true`, до елемента буде додано клас `active-class`.
- Інакше — `inactive-class`.
2. **Шаблонні рядки**
```jsx
function MyComponent({ isHighlighted }) {
return (
Hello
);
}
```
- Завжди додається `base-class`.
- Якщо `isHighlighted` дорівнює true, додається ще й `highlighted-class`.
3. **Бібліотека `clsx`**
- `clsx` допомагає працювати з класами більш елегантно.
```bash
npm install clsx
```
```jsx
import clsx from "clsx";
function MyComponent({ isActive, isDisabled }) {
return (
Hello
);
}
```
- `clsx` дозволяє легко додавати кілька класів на основі умов.
4. **Бібліотека `classnames`**
- Схожа на `clsx`, але має більше можливостей.
```bash
npm install classnames
```
```jsx
import classNames from "classnames";
function MyComponent({ isActive, isDisabled }) {
return (
Hello
);
}
```
5. **Винесення логіки в окрему функцію**
```jsx
function getClassName(isActive, isDisabled) {
let className = "base-class";
if (isActive) className += " active-class";
if (isDisabled) className += " disabled-class";
return className;
}
function MyComponent({ isActive, isDisabled }) {
return
}
```
- Логіка визначення класів стає більш читабельною та може бути перевикористана.
#### Висновок:
- Для простих випадків підійде використання тернарного оператора або шаблонних рядків.
- Для складних умов краще застосовувати бібліотеки `clsx` або `classnames`, які забезпечують зручність і читаємість коду.
98. Як виконати код перед видаленням компонента з дерева?
#### React
- Щоб виконати код перед видаленням компонента з дерева в React, використовують такі підходи:
1. Класові компоненти: componentWillUnmount
- Для класових компонентів є метод життєвого циклу componentWillUnmount, який викликається перед видаленням компонента.
```jsx
class MyComponent extends React.Component {
componentWillUnmount() {
console.log("Компонент буде видалено");
}
render() {
return
}
}
```
2. Функціональні компоненти: useEffect з очищенням
- У функціональних компонентах очищення можна зробити в useEffect, повернувши функцію, яка виконається перед видаленням компонента.
```jsx
import { useEffect } from "react";
function MyComponent() {
useEffect(() => {
return () => {
console.log("Компонент буде видалено");
};
}, []);
return
}
```
3. Обробка перед закриттям сторінки (beforeunload)
- Якщо потрібно виконати код перед закриттям вкладки або перезавантаженням сторінки:
```jsx
useEffect(() => {
const handleUnload = () => {
console.log("Сторінка закривається");
};
window.addEventListener("beforeunload", handleUnload);
return () => window.removeEventListener("beforeunload", handleUnload);
}, []);
```
#### Висновок
- `componentWillUnmount` – для класових компонентів.
- `useEffect` із `return` – для функціональних.
- `beforeunload` – для випадків, коли потрібно реагувати на вихід із сторінки.
99. Що таке useReducer()?
#### React
- `useReducer()` — це хук у React, який використовується для управління станом у функціональних компонентах. Це альтернатива `useState()`, яка підходить для складних логік оновлення стану, особливо якщо зміни залежать від попереднього стану.
#### Синтаксис:
```jsx
const [state, dispatch] = useReducer(reducer, initialState);
```
- `reducer` — функція, яка приймає `state` і `action`, повертаючи новий стан.
- `initialState` — початковий стан.
- `dispatch` — функція для виклику редюсера з певною `action`.
#### Приклад:
```jsx
import { useReducer } from "react";
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
default:
return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
Count: {state.count}
dispatch({ type: "increment" })}>+
dispatch({ type: "decrement" })}>-
);
}
```
#### Коли використовувати:
- Коли стан має складну логіку або залежності.
- Коли необхідно уніфікувати оновлення стану через dispatch.
- Для масштабованості, наприклад, при використанні в глобальному стані.
100. Як використовувати React.lazy та React.Suspense для запуску коду програми?
#### React
- `React.lazy` та `React.Suspense` використовуються для **_динамічного завантаження компонентів_** в React, що дозволяє реалізувати **_розподілений рендеринг_** (code splitting). Це означає, що частини коду завантажуються лише тоді, коли вони необхідні, покращуючи тим самим продуктивність вашої програми.
#### Як це працює:
1. `React.lazy()` дозволяє відкладено завантажувати компонент.
2. `React.Suspense` використовується для обгортання частини коду, який ще не завантажений, і дозволяє показувати запасний контент (наприклад, лоадер), поки компоненти не завантажаться.
#### Приклад:
1. **Динамічне завантаження компонента:**
- Спочатку створіть компонент, який буде завантажуватися динамічно.
```jsx
// Динамічно завантажуваний компонент
const MyComponent = React.lazy(() => import("./MyComponent"));
```
2. **Обгортка з `React.Suspense`:**
- Тепер використовуйте `React.Suspense`, щоб показати лоадер під час завантаження компонента.
```jsx
function App() {
return (
Моя програма
{/* Обгортка для динамічно завантажуваних компонентів */}
Завантаження...
);
}
```
3. **Опис:**
- `React.lazy()` приймає функцію, яка динамічно імпортує модуль.
- `React.Suspense` обгортатиме компонент, що використовує React.lazy(), і покаже запасний контент (в даному випадку, текст "Завантаження..."), поки компонент не завантажиться.
#### Переваги:
- Покращує продуктивність, завантажуючи компоненти лише тоді, коли це необхідно.
- Зменшує розмір початкового завантаження, оскільки частини програми завантажуються на вимогу.
Це підхід особливо корисний у великих програмах, де можна розділити код на частини, щоб зменшити час завантаження сторінки.
101. Які підходи використовуються для виконання HTTP-запитів у React?
#### React
#### Підходи для виконання HTTP-запитів у React
- React не має вбудованого API для виконання HTTP-запитів, але ви можете використовувати сторонні бібліотеки або стандартні засоби JavaScript. Ось основні підходи:
1. **Використання Fetch API**
- Стандартний інструмент для виконання HTTP-запитів у JavaScript.
- **_Приклад:_**
```jsx
import React, { useEffect, useState } from "react";
function FetchExample() {
const [data, setData] = useState([]);
const [error, setError] = useState(null);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => setData(data))
.catch((error) => setError(error.message));
}, []);
return (
{error ? (
Error: {error}
) : (
- {post.title}
{data.map((post) => (
))}
)}
);
}
export default FetchExample;
```
2. **Використання Axios**
- Бібліотека для виконання HTTP-запитів з простішим синтаксисом та вбудованою підтримкою проміжних обробників (interceptors).
- **_Приклад:_**
```jsx
import React, { useEffect, useState } from "react";
import axios from "axios";
function AxiosExample() {
const [data, setData] = useState([]);
const [error, setError] = useState(null);
useEffect(() => {
axios
.get("https://jsonplaceholder.typicode.com/posts")
.then((response) => setData(response.data))
.catch((error) => setError(error.message));
}, []);
return (
{error ? (
Error: {error}
) : (
- {post.title}
{data.map((post) => (
))}
)}
);
}
export default AxiosExample;
```
3. **React Query (TanStack Query)**
- Бібліотека для управління станом даних, отриманих через HTTP-запити. Підтримує кешування, повторні спроби та оновлення даних.
- **_Приклад:_**
```jsx
import React from "react";
import { useQuery } from "react-query";
import axios from "axios";
function ReactQueryExample() {
const { data, error, isLoading } = useQuery("posts", async () => {
const response = await axios.get(
"https://jsonplaceholder.typicode.com/posts"
);
return response.data;
});
if (isLoading) return
Loading...
;if (error) return
Error: {error.message}
; return (
- {post.title}
{data.map((post) => (
))}
);
}
export default ReactQueryExample;
```
4. **GraphQL (Apollo Client)**
- Для роботи з GraphQL API використовується Apollo Client.
- **_Приклад:_**
```jsx
import React from "react";
import { useQuery, gql } from "@apollo/client";
const GET_POSTS = gql`
query GetPosts {
posts {
id
title
}
}
`;
function ApolloExample() {
const { loading, error, data } = useQuery(GET_POSTS);
if (loading) return
Loading...
;if (error) return
Error: {error.message}
; return (
- {post.title}
{data.posts.map((post) => (
))}
);
}
export default ApolloExample;
```
5. **Custom Hooks**
- Ви можете створювати власні хуки для повторного використання логіки запитів.
- **_Приклад:_**
```jsx
import { useState, useEffect } from "react";
function useFetch(url) {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(url)
.then((response) => response.json())
.then((data) => {
setData(data);
setLoading(false);
})
.catch((error) => {
setError(error.message);
setLoading(false);
});
}, [url]);
return { data, error, loading };
}
export default useFetch;
```
#### Вибір підходу залежить від ваших потреб:
- **Fetch API:** для простих запитів.
- **Axios:** якщо потрібна більша гнучкість (interceptors, тайм-аути).
- **React Query:** для управління кешем даних.
- **GraphQL/Apollo Client:** якщо API побудоване на GraphQL.
- **Custom Hooks:** для повторного використання логіки запитів.
102. Яка різниця між createElement і cloneElement?
#### React
| **Метод** | **Опис** | **Основне застосування** |
| --------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| `React.createElement` | Створює новий елемент React. Приймає тип елемента, пропси та дочірні елементи як аргументи. | Використовується для створення елементів React з нуля, зазвичай під час рендерингу JSX. |
| `React.cloneElement` | Клонує існуючий елемент React, дозволяючи змінити його пропси або дочірні елементи. | Використовується для створення змінених копій вже існуючих елементів React. |
#### Приклади:
`React.createElement`
```jsx
const element = React.createElement(
"div",
{ className: "example" },
"Привіт, React!"
);
```
Результат: створюється `
`React.cloneElement`
```jsx
const originalElement = Натисни;
const clonedElement = React.cloneElement(originalElement, {
className: "secondary",
});
```
Результат: клон `Натисни` зі зміненим класом.
#### Різниця:
- `createElement`: створює абсолютно новий елемент.
- `cloneElement`: працює на основі вже існуючого елемента, дозволяючи змінювати його властивості або вміст.
103. Що таке компоненти вищого порядку (Higher-Order components)?
#### React
#### Компоненти вищого порядку (Higher-Order Components, HOC)
- Компонент вищого порядку — це функція, яка приймає компонент як вхідний аргумент і повертає новий компонент, розширюючи його функціональність.
#### Синтаксис HOC:
```jsx
const EnhancedComponent = higherOrderComponent(WrappedComponent);
```
#### Особливості HOC:
1. Приймає компонент як аргумент.
2. Повертає новий компонент із додатковими властивостями чи поведінкою.
3. Дозволяє перевикористовувати логіку у різних компонентах.
#### Приклад використання:
- HOC для додавання стану до компонента:
```jsx
import React, { useState } from "react";
// HOC: додає логіку роботи зі станом
function withCounter(WrappedComponent) {
return function EnhancedComponent(props) {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return ;
};
}
// Компонент, який буде розширено
function Button({ count, increment }) {
return Clicked {count} times;
}
// Використання HOC
const EnhancedButton = withCounter(Button);
export default EnhancedButton;
```
#### Реальні сценарії використання HOC:
1. **Авторизація (Authentication)** — обгортання компонентів для перевірки прав доступу.
2. **Обробка даних** — підключення до API чи обробка стану.
3. **Логування** — додавання журналювання дій компонентів.
#### Обмеження HOC:
- Може створювати глибокі вкладення (component tree), якщо використовувати забагато HOC.
- Ускладнює читабельність через обгортання компонентів.
HOC — потужний інструмент для повторного використання логіки, але в сучасних додатках їх часто замінюють React Hooks.
104. Чи підтримує функція lazy іменований експорт?
#### React
- Ні, функція `React.lazy` не підтримує іменований експорт. Вона працює лише з експортом за замовчуванням. Якщо у вас є модуль з іменованим експортом, і ви хочете використовувати його з `React.lazy`, потрібно створити обгортку, яка експортує потрібний компонент за замовчуванням.
#### Приклад обгортки:
```jsx
// Іменований експорт
export const MyComponent = () => {
return
};
// Використання React.lazy
const LazyComponent = React.lazy(() =>
import("./MyComponent").then((module) => ({ default: module.MyComponent }))
);
export default LazyComponent;
```
- Тут ми явно вказуємо, що module.MyComponent має бути використаний як експорт за замовчуванням.
105. Які переваги React?
#### React
#### Переваги React
1. **Висока продуктивність**
- Використання **_Virtual DOM_** мінімізує оновлення реального **_DOM_**, що робить рендеринг швидшим.
2. **Компонентний підхід**
- Додаток складається з **_повторно використовуваних компонентів_**, що спрощує розробку та підтримку.
3. **Одностороння передача даних (Unidirectional Data Flow)**
- Дані передаються вниз по ієрархії компонентів, що спрощує відстеження змін стану.
4. **Підтримка хуків (Hooks)**
- `useState`, `useEffect`, `useMemo` тощо дозволяють керувати станом та ефектами у функціональних компонентах без класів.
5. **Серверний рендеринг (SSR) та статична генерація (SSG)**
- З Next.js можна оптимізувати SEO та покращити продуктивність додатків.
6. **Гнучкість та екосистема**
- React можна використовувати разом із **_Redux_**, **_Zustand_**, **_MobX_**, **_React Query_**, тощо.
- Підтримує **_React Native_** для створення мобільних додатків.
7. **Розширені можливості налагодження**
- **_React DevTools_** дозволяє переглядати структуру компонентів, стан та пропси в реальному часі.
8. **Активна спільнота та підтримка Facebook**
- Великий вибір бібліотек та готових рішень, швидкий розвиток фреймворку.
React — це гнучкий, продуктивний і сучасний інструмент для розробки веб-додатків.
106. Які обмеження React?
#### React
1. **Велика кількість перерендерів:** Якщо компоненти неправильно оптимізовані, це може призвести до надмірних перерендерів, що погіршує продуктивність.
2. **Необхідність керувати станом:** Без правильного управління станом додаток може стати складним для підтримки.
3. **Однонаправлений потік даних:** Потік даних йде лише в одному напрямку, що може ускладнювати передачу даних через кілька рівнів компонентів.
4. **Реактивність:** React оновлює DOM через віртуальний DOM, але це може бути неефективно для великих, динамічних додатків.
5. **Залежність від JavaScript:** Погана підтримка без JavaScript на клієнтській стороні.
6. **Навчання для новачків:** Хоча концепції React досить прості, правильно освоїти хуки, контексти та оптимізацію може бути важко.
7. **Інструменти сторонніх розробників:** Хоча існує велика кількість інструментів, їх інтеграція може бути складною в великих проектах.
107. Для чого призначений метод registerServiceWorker() у React?
#### React
- `registerServiceWorker()` використовувався для реєстрації Service Worker у Create React App (до видалення з CRA у версії 4).
#### Призначення:
- Кешування ресурсів для офлайн-режиму
- Прискорення завантаження додатка
- Фонове оновлення ресурсів
#### Приклад використання (до CRA 4):
```javascript
import { register } from "./serviceWorker";
register();
```
- Після видалення з CRA, Service Worker потрібно налаштовувати вручну через `navigator.serviceWorker.register()`.
- У **React 19** немає вбудованого `registerServiceWorker()`, оскільки його видалили ще в React 17 (з Create React App 4). Якщо тобі потрібен Service Worker, реєструй його вручну.
Висновок: у React 19 цей метод більше не актуальний, і Service Worker потрібно налаштовувати самостійно.
108. Що таке синтетичні події (SyntheticEvent) у React?
#### React
- **SyntheticEvent** у React — це обгортка над нативними подіями браузера, яка забезпечує кросбраузерну сумісність і покращує продуктивність.
#### Особливості SyntheticEvent:
- Працює однаково у всіх браузерах.
- Використовує пулізацію (event pooling), що запобігає утриманню зайвих об'єктів у пам’яті.
- Всі події нормалізовані та мають однакові властивості незалежно від браузера.
#### Приклад використання:
```jsx
function MyComponent() {
const handleClick = (event) => {
console.log(event.type); // "click"
console.log(event.nativeEvent); // Оригінальна подія браузера
};
return Натисни;
}
```
#### Основні методи:
- `event.preventDefault()` — запобігає стандартній поведінці.
- `event.stopPropagation()` — зупиняє спливання події.
- `event.persist()` — вимикає пулізацію, щоб подія не скидалася.
109. Техніки оптимізації перфомансу React?
#### React
#### Техніки оптимізації продуктивності React:
1. **Мемоізація компонентів**
- Використовуйте `React.memo()` для запобігання зайвим ререндерам.
- `useMemo()` для кешування обчислень.
- `useCallback()` для збереження стабільності функцій.
2. **Оптимізація ререндеру**
- Уникайте зайвих станів (`useState`) і пропсів.
- Використовуйте `shouldComponentUpdate`, `React.PureComponent` у класових компонентах.
- Оптимізуйте контекст (`Context API`) – не передавайте зайві значення.
- Селектори (`Reselect`, `Zustand`, `Jotai`) для мінімізації оновлень.
3. **Віртуалізація списків**
- `react-window`, `react-virtualized` для відображення лише видимих елементів.
4. **Кешування та дебаунс**
- `useMemo()` та `useCallback()` для важких обчислень.
- Дебаунс (`lodash.debounce`) або тротлінг (`lodash.throttle`) для введення користувача.
5. **Ліниве завантаження (Lazy Loading)**
- `React.lazy()` + `Suspense` для поділу коду.
- Динамічний імпорт модулів (`import()`).
6. **Уникнення зайвих ефектів в useEffect**
- Передавайте залежності правильно.
- Використовуйте `useRef` для збереження значень без ререндеру.
7. **Оптимізація зображень**
- Використовуйте `next/image` у Next.js.
- Оптимізуйте розміри та формати (`WebP`, `AVIF`).
8. **Оптимізація React Router**
- Використовуйте `React.lazy()` для сторінок.
- Уникайте зайвого ререндеру шляхом коректного оновлення стану.
9. **Розділення стану**
- Використовуйте локальний state там, де не потрібен глобальний.
- Виносьте глобальні зміни у `Redux/Zustand/Recoil`.
10. **Використання Web Workers**
- Для важких обчислень, щоб не блокувати головний потік.
110. Чи можливо використовувати async/await у React?
#### React
- Так, можна використовувати `async/await` в React, але є деякі моменти, на які варто звернути увагу:
1. **Використання в компонентах:** `async/await` не можна безпосередньо використовувати в самих компонентах або в методах життєвого циклу, таких як `render()`. Однак ви можете використовувати їх в методах обробки подій або в хукках, таких як `useEffect`.
2. **Засоби для асинхронних запитів:**
- Використовуйте async/await всередині функцій, що викликаються в хуках, наприклад:
```jsx
useEffect(() => {
const fetchData = async () => {
const response = await fetch("https://api.example.com");
const data = await response.json();
setData(data);
};
fetchData();
}, []);
```
3. **Обробка помилок:** не забувайте використовувати try/catch для обробки помилок при асинхронних запитах:
```jsx
const fetchData = async () => {
try {
const response = await fetch("https://api.example.com");
const data = await response.json();
setData(data);
} catch (error) {
console.error("Error fetching data:", error);
}
};
```
- Таким чином, async/await можна і потрібно використовувати для асинхронних операцій в React, але треба правильно організувати їх використання в рамках компонентів.
111. Яка історія еволюції React?
#### React
- Ось коротка історія еволюції React:
1. **2011**
- React створений у Facebook для внутрішніх потреб. Його розробив інженер Джордан Волке, щоб вирішити проблему ефективного оновлення інтерфейсу.
2. **2013**
- Facebook випустив React як open-source бібліотеку. Спочатку спільнота зустріла її скептично через використання JSX, який здавався незвичним.
3. **2015**
- Випущено React 0.14: розділено React і ReactDOM, що зробило бібліотеку більш модульною.
- Facebook представив React Native, що дозволило створювати нативні мобільні додатки за допомогою React.
4. **2016**
- Випущено React 15. Основні оновлення торкнулися покращення продуктивності через новий рендеринг-движок.
5. **2017**
- Випущено React 16 (Fiber). Fiber став новою архітектурою, що забезпечила покращену продуктивність та підтримку асинхронного рендерингу.
- Додано підтримку порталів і помилкових кордонів (Error Boundaries).
6. **2018**
- Facebook представив React Hooks, які дозволили використовувати стан і методи життєвого циклу у функціональних компонентах. Це стало революцією у способі створення компонентів.
7. **2019**
- Випущено React 16.8 з офіційною підтримкою хуків.
- Покращено ефективність Concurrent Mode (експериментально).
8. **2020**
- Випущено React 17. Головна мета — спрощення поступового оновлення React у великих проектах.
- Додано підтримку сучасних інструментів і нових можливостей для роботи з JSX.
9. **2022**
- Випущено React 18. Головними нововведеннями стали Concurrent Rendering, новий API useTransition та useDeferredValue, які покращують продуктивність у динамічних додатках.
10. **2024**
- Випущено React 19
- Оновлений серверний рендеринг (RSC).
- Підтримка нової use функції.
- Покращена система форм, помилки рендерингу та синтаксис JSX без import React.
- Оновлений React Compiler для автоматичної оптимізації продуктивності.
#### Основні зміни за час еволюції:
- Від класових компонентів до функціональних з хуками.
- Підтримка серверного рендерингу (SSR).
- Concurrent Mode для плавного оновлення інтерфейсу.
- Інтеграція React із мобільною розробкою через React Native.
React залишився популярним завдяки високій продуктивності, зручності використання та постійній підтримці від Facebook.
112. Які нововведення було додано в React 19?
#### React
- React 19 представив низку значних оновлень, спрямованих на покращення продуктивності та зручності розробки. Ось ключові нововведення:
1. **Нова система рендерингу:** Впроваджено асинхронний рендеринг, що дозволяє React ефективніше керувати оновленнями інтерфейсу, покращуючи взаємодію з користувачем.
2. **React Compiler:** Новий компілятор автоматично оптимізує повторні рендери, зменшуючи непотрібні оновлення та підвищуючи продуктивність додатків.
3. **Actions API:** Це новий підхід для керування станом та мутаціями даних на сервері, спрощуючи обробку побічних ефектів та запитів до даних.
4. **Покращена механіка Suspense:** Надає розробникам тонший контроль над асинхронним завантаженням даних, полегшуючи управління гідратацією компонентів та fallback-станами.
5. **Хук `use`:** Новий хук, що спрощує роботу з асинхронними даними та покращує підтримку серверних компонентів.
6. **Нативна підтримка метатегів:** Тепер `meta`, `title`, `link` та інші метатеги підтримуються без додаткових бібліотек, що спрощує керування SEO та ресурсами.
- Ці нововведення роблять React 19 потужнішим та зручнішим інструментом для розробників, покращуючи як продуктивність додатків, так і досвід розробки.
113. Що рекомендують використовувати розробники React після того як React Create App став Deprecated?
#### React
- Після припинення підтримки Create React App у лютому 2025 року, розробникам рекомендується використовувати сучасні фреймворки для створення нових React-додатків. Ці фреймворки підтримують клієнтський рендеринг (CSR) та односторінкові додатки (SPA), які можна розгорнути на CDN або статичних хостингових сервісах без необхідності сервера.
#### Рекомендовані фреймворки:
1. **Next.js:** Пропонує потужні можливості, такі як серверний рендеринг та генерація статичних сайтів, забезпечуючи високу продуктивність та SEO-оптимізацію.
2. **React Router:** Надає можливість створення SPA з динамічним маршрутизацією, дозволяючи легко керувати навігацією в додатку.
3. **Expo:** Спрощує розробку React Native додатків, забезпечуючи інструменти для створення кросплатформених мобільних додатків з використанням JavaScript та React.
114. Як працює хук useDeferredValue у React?
#### React
`useDeferredValue` — це React-хук, що з'явився у React 18 як частина Concurrent Mode. Він дозволяє відкладати оновлення певних значень (станів чи пропсів), знижуючи їхній пріоритет та надаючи можливість React оновити інтерфейс із більш важливими завданнями у першу чергу.
Це дуже зручно, якщо значення часто змінюється, а оновлення інтерфейсу на кожну зміну займає багато ресурсів.
##### Для чого використовують `useDeferredValue`?
- Щоб уникнути затримок та лагів у складних застосунках, де швидкість реакції інтерфейсу важлива.
- Щоб покращити взаємодію користувача, особливо коли змінюється багато даних (пошук, фільтрація, рендер великих списків).
- Щоб забезпечити плавність анімацій та переходів між станами.
##### Як це працює?
Хук `useDeferredValue` приймає значення та повертає його відкладену версію:
```jsx
const deferredValue = useDeferredValue(value);
```
- React відразу оновлює критичні (пріоритетні) зміни.
- Відкладене значення (deferredValue) оновлюється асинхронно після того, як React обробить терміновіші завдання.
- Якщо оновлення основного значення відбуваються надто швидко, React може пропустити деякі проміжні значення і перейти відразу до останнього.
##### Приклад використання:
Уявимо, є компонент із полем пошуку та великим списком, який потрібно фільтрувати при введенні тексту.
###### Без використання `useDeferredValue`:
```jsx
import { useState, useMemo } from "react";
function SearchList({ items }) {
const [query, setQuery] = useState("");
const filteredItems = useMemo(() => {
return items.filter((item) => item.includes(query));
}, [items, query]);
return (
<>
setQuery(e.target.value)}
placeholder="Пошук..."
/>
>
);
}
```
Це може викликати «гальмування», якщо список дуже великий, адже при кожному введенні символу React миттєво перераховує фільтровані результати.
###### Із використанням `useDeferredValue`:
```jsx
import { useState, useDeferredValue, useMemo } from "react";
function SearchList({ items }) {
const [query, setQuery] = useState("");
const deferredQuery = useDeferredValue(query);
const filteredItems = useMemo(() => {
return items.filter((item) => item.includes(deferredQuery));
}, [items, deferredQuery]);
return (
<>
setQuery(e.target.value)}
placeholder="Пошук..."
/>
>
);
}
```
У цьому варіанті:
- Введення користувача завжди миттєве й плавне.
- Фільтрація списку виконується асинхронно (після того, як користувач зупинить введення або коли знизиться інтенсивність змін).
- В результаті інтерфейс залишається чуйним.
##### Особливості роботи:
- `useDeferredValue` не встановлює конкретний час затримки (на відміну від debounce). Він дозволяє React автоматично визначати час оновлення залежно від завантаження інтерфейсу.
- Значення, отримане з `useDeferredValue`, може "відставати" від основного стану, що потрібно враховувати при використанні в логіці додатка.
##### Переваги використання:
- Зменшує навантаження на процесор під час активних взаємодій.
- Забезпечує стабільний FPS і плавний UI.
- Робить UX більш комфортним і передбачуваним, особливо у великих та складних додатках.
##### Коли краще використовувати `useDeferredValue`?
- Списки із великою кількістю елементів.
- Форми з активним фільтруванням та автозаповненням.
- Всі випадки, коли часте оновлення інтерфейсу може створювати неприємний досвід для користувача.
115. ???
#### React
- Coming Soon... 😎