Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке "pure function component"?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Визначення

**Pure function component** - це **функціональний компонент**, який:

> завжди повертає **однаковий результат** при однакових вхідних даних (`props`)
> **не має побічних ефектів** під час рендеру
> не залежить від зовнішнього змінюваного стану (на кшталт глобальних змінних)

---

## Тобто "чиста функція" у функціональному сенсі

У програмуванні **чиста функція** - це функція, яка:

1. **Не має побічних ефектів** (не змінює зовнішні змінні, DOM, не робить запити тощо);
2. **Детермінована** - при одних і тих самих аргументах завжди повертає той самий результат.

> React-компоненти, по суті, - функції, які приймають `props` і повертають JSX.
> Тому вони **теж можуть бути чистими**.

---

## Приклад чистого компонента

```javascript
function Greeting({ name }) {
  return <h1>Привіт, {name}!</h1>;
}
```

> Цей компонент:
>
> - залежить лише від `props.name`
> - не змінює зовнішній стан
> - не викликає побічних ефектів (запити, таймери тощо)
> - завжди повертає однаковий JSX при однакових props

Отже, він - **pure function component**.

---

## Приклад *нечистого* компонента

```javascript
let counter = 0;

function Greeting({ name }) {
  counter++; // побічний ефект
  console.log('Рендериться'); // побічний ефект
  return <h1>Привіт, {name}!</h1>;
}
```

> Порушено:
>
> - Функція змінює зовнішню змінну `counter`
> - Пише в консоль при кожному рендері
> → отже, вона **нечиста**.

---

## Навіщо React потрібні чисті компоненти

1. **Передбачуваність**
Якщо компонент чистий, React точно знає:
при тих самих `props` він поверне той самий результат.
2. **Оптимізація (React.memo)**
React може "запам'ятовувати" результат виклику чистого компонента
і **не ререндерити** його, якщо `props` не змінилися.

```javascript
  const Greeting = React.memo(function Greeting({ name }) {
    return <h1>Привіт, {name}!</h1>;
  });
  ```
3. **Спрощення налагодження**
Поведінку компонента легко передбачити й протестувати.

---

## Відмінність від звичайної функції

React-компонент може **мати стан і ефекти** (через хуки),
але це **не скасовує його чистоту при рендері**.

> Головне - *сам рендер (тіло функції)* має бути чистим.
> Побічні ефекти повинні виконуватися **в** `useEffect`,
> а не під час обчислення JSX.

---

## Підсумок

| Критерій | Чистий компонент | Нечистий компонент |
|---|---|---|
| Залежить лише від `props` | Так | Ні |
| Повертає однаковий JSX при однакових props | Так | Ні |
| Не має побічних ефектів у тілі | Так | Ні |
| Можна безпечно оптимізувати через `React.memo` | Так | Не завжди |
| Передбачуваний при ререндері | Так | Ні |

---

> **Підсумок:**
> "Pure function component" - це такий React-компонент,
> який поводиться як **чиста функція**:
> при однакових props повертає однаковий результат
> і не робить нічого "зайвого" під час рендеру.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати421 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.