update typescript, update docs

docs/react/10-pure-function.md

@@ -0,0 +1,84 @@
+---
+sidebar_position: 10
+---
+
+# Pure function
+
+В контексте **React** чистая функция — это **функция, которая**:
+1. **Детерминирована** — при одинаковых входных данных всегда возвращает одинаковый результат.
+2. **Не изменяет внешнее состояние** — не мутирует `props`, `state` или глобальные переменные.
+
+## Примеры чистых и нечистых функций в 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_**