update typescript, update docs

docs/react/01-intro.md

@@ -3,7 +3,6 @@ sidebar_position: 1
 ---
 
 # Зачем нужен React
-Источник: DeepSeek
 
 Библиотека React — это одна из самых популярных библиотек для создания пользовательских интерфейсов (UI) на JavaScript. Она разработана Facebook (ныне Meta) и активно используется для разработки веб-приложений, мобильных приложений (с помощью React Native) и даже десктопных приложений. Вот основные причины, зачем нужна React, её преимущества и недостатки:
 
@@ -57,4 +56,6 @@ sidebar_position: 1
 - Кроссплатформенная разработка (веб + мобильные приложения).
 
 ## Итог
-**React** — это мощная и гибкая библиотека, которая подходит для создания современных веб-приложений. Её компонентный подход, высокая производительность и огромная экосистема делают её одним из лучших инструментов для разработки интерфейсов. Однако для простых проектов или статических сайтов React может быть избыточным, и в таких случаях стоит рассмотреть более легкие решения.
+**React** — это мощная и гибкая библиотека, которая подходит для создания современных веб-приложений. Её компонентный подход, высокая производительность и огромная экосистема делают её одним из лучших инструментов для разработки интерфейсов. Однако для простых проектов или статических сайтов React может быть избыточным, и в таких случаях стоит рассмотреть более легкие решения.
+
+🚀 **_Источник: DeepSeek_**

docs/react/02-v-dom.md

@@ -3,7 +3,6 @@ sidebar_position: 2
 ---
 
 # Виртуальный DOM
-Источник: DeepSeek
 
 Механизм работы **Virtual DOM** и **Reconciliation** — это ключевые особенности React, которые делают его быстрым и эффективным для обновления пользовательских интерфейсов. Давайте разберём, как это работает.
  
@@ -59,4 +58,6 @@ Reconciliation — это процесс сравнения старого и н
 ## Итог
 - **Virtual DOM** — это оптимизированная копия реального DOM, которая позволяет React быстро обновлять интерфейс.
 - **Reconciliation** — это процесс сравнения старого и нового Virtual DOM для определения минимального набора изменений.
-Вместе эти механизмы делают React быстрым, эффективным и удобным для разработки сложных интерфейсов.
+Вместе эти механизмы делают React быстрым, эффективным и удобным для разработки сложных интерфейсов.
+
+🚀 **_Источник: DeepSeek_**

docs/react/03-lifecycle.md

@@ -3,7 +3,6 @@ sidebar_position: 3
 ---
 
 # Жизненный цикл компонента
-Источник: DeepSeek
 
 Жизненный цикл компонента в React описывает этапы, через которые проходит компонент от момента его создания до удаления из DOM. Эти этапы включают инициализацию, обновление и удаление компонента. React предоставляет методы жизненного цикла, которые позволяют разработчикам управлять поведением компонента на каждом этапе.
 
@@ -32,4 +31,6 @@ React также предоставляет методы для обработк
 
 С появлением React Hooks в версии 16.8, функциональные компоненты также получили возможность использовать аналогичные методы жизненного цикла с помощью хуков, таких как `useEffect`. Это сделало функциональные компоненты более мощными и гибкими.
 
-Таким образом, жизненный цикл компонента в React позволяет разработчикам контролировать поведение компонента на всех этапах его существования, что делает React мощным инструментом для создания динамических и отзывчивых пользовательских интерфейсов.
+Таким образом, жизненный цикл компонента в React позволяет разработчикам контролировать поведение компонента на всех этапах его существования, что делает React мощным инструментом для создания динамических и отзывчивых пользовательских интерфейсов.
+
+🚀 **_Источник: DeepSeek_**

docs/react/04-props-state.md

@@ -3,7 +3,6 @@ sidebar_position: 4
 ---
 
 # Состояние и пропсы компонентов
-Источник: DeepSeek
 
 В React состояние (state) и пропсы (props) — это два основных способа управления данными в компонентах. Они позволяют
 компонентам быть динамичными и реагировать на изменения данных. Однако они используются в разных ситуациях и имеют свои
@@ -64,3 +63,5 @@ sidebar_position: 4
 Часто состояние родительского компонента передается в дочерний компонент через пропсы. Если дочерний компонент должен
 изменить эти данные, он может вызвать callback-функцию, переданную через пропсы, которая изменит состояние родительского
 компонента.
+
+🚀 **_Источник: DeepSeek_**

docs/react/05-base-hooks.md

@@ -3,7 +3,6 @@ sidebar_position: 5
 ---
 
 # Базовые хуки React
-Источник: DeepSeek
 
 React предоставляет несколько основных хуков, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Вот основные хуки:
 
@@ -78,4 +77,6 @@ useLayoutEffect(() => {
     - Позволяет отображать метку для пользовательских хуков в инструментах разработчика React.
 ```js
 useDebugValue(isOnline ? 'Online' : 'Offline');
-```
+```
+
+🚀 **_Источник: DeepSeek_**

docs/react/06-hocs.md

@@ -3,7 +3,6 @@ sidebar_position: 6
 ---
 
 # Что такое HOC
-Источник: DeepSeek
 
 Higher-Order Components (HOC) — это продвинутая техника в React для повторного использования логики компонентов. HOC — это функция, которая принимает компонент и возвращает новый компонент с дополнительными свойствами или поведением. Это похоже на паттерн декоратора в программировании.
 
@@ -40,4 +39,6 @@ Higher-Order Components (HOC) — это продвинутая техника
 - Если вы работаете с классовыми компонентами (хуки доступны только в функциональных компонентах).
 - Если вы предпочитаете паттерн декоратора.
 
-В остальных случаях, особенно в новых проектах, рекомендуется использовать хуки, так как они проще и удобнее.
+В остальных случаях, особенно в новых проектах, рекомендуется использовать хуки, так как они проще и удобнее.
+
+🚀 **_Источник: DeepSeek_**

docs/react/07-optimization-hooks.md

@@ -3,7 +3,8 @@ sidebar_position: 7
 ---
 
 # Хуки оптимизации и кэширования
-Источник: DeepSeek
+
+useCallback, useMemo, React.Memo (HOC)
 
 ## useCallback
 `useCallback` — это хук в React, который используется для мемоизации функций. Он помогает оптимизировать производительность компонентов, особенно когда речь идет о передаче функций в дочерние компоненты или их использование в зависимостях других хуков, таких как `useEffect`.
@@ -109,4 +110,6 @@ const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
 
 ### Важные моменты:
 - `useMemo` не гарантирует, что функция не будет выполнена. Она может быть вызвана React для "подстраховки" (например, при изменении приоритетов рендеринга).
-- Используйте `useMemo` только там, где это действительно необходимо, чтобы не усложнять код без нужды.
+- Используйте `useMemo` только там, где это действительно необходимо, чтобы не усложнять код без нужды.
+
+🚀 **_Источник: DeepSeek_**

docs/react/08-users-hooks.md

@@ -3,7 +3,6 @@ sidebar_position: 8
 ---
 
 # Пользовательские хуки
-Источник: DeepSeek
 
 Пользовательские хуки в React — это функции, которые позволяют вам использовать состояние и другие возможности React (например, эффекты, контекст и т.д.) в ваших компонентах, но с возможностью повторного использования логики. Пользовательские хуки помогают избежать дублирования кода и делают его более читаемым и поддерживаемым.
 
@@ -64,4 +63,6 @@ function App() {
 }
 
 export default App;
-```
+```
+
+🚀 **_Источник: DeepSeek_**

docs/react/09-render-portal.md

@@ -3,7 +3,6 @@ sidebar_position: 9
 ---
 
 # Render portal
-Источник: DeepSeek
 
 В контексте библиотеки **React**, **Portal (портал)** — это механизм, который позволяет рендерить дочерние элементы
 
@@ -106,4 +105,6 @@ export default App;
 - Модальные окна.
 - Всплывающие подсказки (tooltips).
 - Уведомления.
-- Любые элементы, которые должны отображаться поверх основного интерфейса.
+- Любые элементы, которые должны отображаться поверх основного интерфейса.
+
+🚀 **_Источник: DeepSeek_**

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