---
sidebar_position: 10
---

# Pure function

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

В контексте **React** чистая функция — это **функция, которая**:
1. **Детерминирована** — при одинаковых входных данных всегда возвращает одинаковый результат.
2. **Не изменяет внешнее состояние** — не мутирует `props`, `state` или глобальные переменные.

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

## Примеры чистых и нечистых функций в React
✅ Чистая функция (без побочных эффектов):
```tsx
function add(a: number, b: number) {
    return a + b;
}

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

```

❌ Нечистая функция (изменяет внешнее состояние):
```tsx
let total = 0;
function addToTotal(value: number) {
    total += value;
    return total;
}

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

```

## Чистые функции в React-компонентах
✅ Функциональные компоненты в React должны быть чистыми!
```tsx
function Greeting({ name }: { name: string }) {
    return <h1>Hello, {name}!</h1>;
}
```
📌 Этот компонент:
- Всегда рендерит один и тот же вывод для одного name.
- Не изменяет props и state.

❌ Нечистая компонента (мутирует пропсы!):
```tsx
function BadComponent(props: { user: { name: string } }) {
    props.user.name = "Hacked!"; // ❌ Изменяем пропсы — это плохо!
    return <h1>Hello, {props.user.name}!</h1>;
}
```
📌 Почему плохо?
- Нарушает принципы React.
- Может вызвать неожиданные баги.

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

✔️ useReducer

```tsx
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_**