Skip to main content

Pure function

Чистая функция не меняет никаких объектов или переменных, которые существовали до её вызова. При указании одинаковых входных данных должен быть всегда один и тот же результат.

В контексте React чистая функция — это функция, которая:

  1. Детерминирована — при одинаковых входных данных всегда возвращает одинаковый результат.
  2. Не изменяет внешнее состояние — не мутирует props, state или глобальные переменные.

React предполагает, что каждый написанный компонент является чистой функцией. React всегда должен возвращать один и тот же JSX при одинаковых входных данных.

Примеры чистых и нечистых функций в React​

✅ Чистая функция (без побочных эффектов):

function add(a: number, b: number) {
    return a + b;
}

console.log(add(2, 3)); // 5
console.log(add(2, 3)); // 5 (всегда один и тот же результат)

❌ Нечистая функция (изменяет внешнее состояние):

let total = 0;
function addToTotal(value: number) {
    total += value;
    return total;
}

console.log(addToTotal(5)); // 5
console.log(addToTotal(5)); // 10 (изменяется внешнее состояние!)

Чистые функции в React-компонентах​

✅ Функциональные компоненты в React должны быть чистыми!

function Greeting({ name }: { name: string }) {
    return <h1>Hello, {name}!</h1>;
}

📌 Этот компонент:

  • Всегда рендерит один и тот же вывод для одного name.
  • Не изменяет props и state.

❌ Нечистая компонента (мутирует пропсы!):

function BadComponent(props: { user: { name: string } }) {
    props.user.name = "Hacked!"; // ❌ Изменяем пропсы — это плохо!
    return <h1>Hello, {props.user.name}!</h1>;
}

📌 Почему плохо?

  • Нарушает принципы React.
  • Может вызвать неожиданные баги.

Где React использует чистые функции?​

✔️ useReducer

function reducer(state: number, action: { type: string }) {
    switch (action.type) {
        case "increment":
            return state + 1;
        case "decrement":
            return state - 1;
        default:
            return state;
    }
}

📌 reducer — чистая функция: всегда возвращает новый state, не мутируя старый. ✔️ useMemo и useCallback Используются для оптимизации чистых функций и предотвращения лишних ререндеров.

Итог​

  • ✅ Чистые функции не мутируют props и state, не создают побочные эффекты.
  • ✅ Функциональные компоненты должны быть чистыми.
  • ✅ useReducer, useMemo, useCallback — инструменты для работы с чистыми функциями.
  • ❌ Нечистые функции могут вызывать баги и ухудшать производительность.

🚀 Источник: ChatGPT