Skip to main content

Що таке "pure function component"?

ReactJunior~2 хв читання
Запропонувати правку

Визначення

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>; });
  1. Спрощення налагодження Поведінку компонента легко передбачити й протестувати.

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

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

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

Підсумок

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

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

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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