frontend-docs/docs/react/10-pure-function.md

sidebar_position

sidebar_position
10

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