update state, api, arch

docs/react/01-intro.md

@@ -3,6 +3,8 @@ sidebar_position: 1
 ---
 
 # Зачем нужен React
+Источник: DeepSeek
+
 Библиотека React — это одна из самых популярных библиотек для создания пользовательских интерфейсов (UI) на JavaScript. Она разработана Facebook (ныне Meta) и активно используется для разработки веб-приложений, мобильных приложений (с помощью React Native) и даже десктопных приложений. Вот основные причины, зачем нужна React, её преимущества и недостатки:
 
 ## Зачем нужна React?

docs/react/02-v-dom.md

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

docs/react/03-lifecycle.md

@@ -3,6 +3,7 @@ sidebar_position: 3
 ---
 
 # Жизненный цикл компонента
+Источник: DeepSeek
 
 Жизненный цикл компонента в React описывает этапы, через которые проходит компонент от момента его создания до удаления из DOM. Эти этапы включают инициализацию, обновление и удаление компонента. React предоставляет методы жизненного цикла, которые позволяют разработчикам управлять поведением компонента на каждом этапе.
 

docs/react/04-props-state.md

@@ -3,6 +3,7 @@ sidebar_position: 4
 ---
 
 # Состояние и пропсы компонентов
+Источник: DeepSeek
 
 В React состояние (state) и пропсы (props) — это два основных способа управления данными в компонентах. Они позволяют
 компонентам быть динамичными и реагировать на изменения данных. Однако они используются в разных ситуациях и имеют свои

docs/react/05-base-hooks.md

@@ -3,6 +3,7 @@ sidebar_position: 5
 ---
 
 # Базовые хуки React
+Источник: DeepSeek
 
 React предоставляет несколько основных хуков, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Вот основные хуки:
 

docs/react/06-hocs.md

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

docs/react/07-optimization-hooks.md

@@ -3,7 +3,7 @@ sidebar_position: 7
 ---
 
 # Хуки оптимизации и кэширования
-
+Источник: DeepSeek
 
 ## useCallback
 `useCallback` — это хук в React, который используется для мемоизации функций. Он помогает оптимизировать производительность компонентов, особенно когда речь идет о передаче функций в дочерние компоненты или их использование в зависимостях других хуков, таких как `useEffect`.

docs/react/08-advanced-hooks.md

@@ -1,5 +0,0 @@
----
-sidebar_position: 8
----
-
-# Прочие хуки React

docs/react/08-users-hooks.md

@@ -0,0 +1,67 @@
+---
+sidebar_position: 8
+---
+
+# Пользовательские хуки
+Источник: DeepSeek
+
+Пользовательские хуки в React — это функции, которые позволяют вам использовать состояние и другие возможности React (например, эффекты, контекст и т.д.) в ваших компонентах, но с возможностью повторного использования логики. Пользовательские хуки помогают избежать дублирования кода и делают его более читаемым и поддерживаемым.
+
+## Основные правила пользовательских хуков:
+Имя пользовательского хука должно начинаться с use, чтобы React мог понять, что это хук, и применять к нему соответствующие правила (например, правила хуков).
+
+Пользовательские хуки могут вызывать другие хуки, такие как useState, useEffect, useContext и т.д.
+
+## Преимущества пользовательских хуков:
+1. **Повторное использование логики:** Вы можете использовать одну и ту же логику в разных компонентах.
+2. **Упрощение компонентов:** Логика выносится из компонента, что делает его более чистым и понятным.
+3. **Тестируемость:** Пользовательские хуки можно тестировать отдельно от компонентов.
+
+## Пример: хук для работы с localStorage
+```jsx
+import { useState } from 'react';
+
+// Пользовательский хук useLocalStorage
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.log(error);
+      return initialValue;
+    }
+  });
+
+  const setValue = (value) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return [storedValue, setValue];
+}
+
+// Использование хука в компоненте
+function App() {
+  const [name, setName] = useLocalStorage('name', 'Гость');
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder="Введите ваше имя"
+      />
+      <p>Привет, {name}!</p>
+    </div>
+  );
+}
+
+export default App;
+```

docs/react/09-render-portal.md

@@ -2,4 +2,108 @@
 sidebar_position: 9
 ---
 
-# Render portal
+# Render portal
+Источник: DeepSeek
+
+В контексте библиотеки **React**, **Portal (портал)** — это механизм, который позволяет рендерить дочерние элементы
+
+Использование порталов (**Portals**) в React позволяет рендерить элементы вне основного DOM-дерева, сохраняя при этом их
+логическую связь с React-компонентами. Это особенно полезно для модальных окон, всплывающих подсказок, уведомлений и
+других элементов, которые должны отображаться поверх основного интерфейса.
+
+## Как использовать порталы в React
+
+1. **Создайте целевой DOM-элемент:** \
+   В вашем HTML-файле создайте элемент, в который будет рендериться содержимое портала. Обычно это делается в
+   `public/index.html` (если вы используете Create React App).
+
+```html
+
+<div id="root"></div>
+<div id="modal-root"></div> <!-- Сюда будет рендериться модальное окно -->
+```
+
+2. **Используйте ReactDOM.createPortal:**
+   В React-компоненте используйте метод `ReactDOM.createPortal`, чтобы рендерить содержимое в целевой DOM-элемент.
+3. **Пример использования портала:**
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+// Компонент модального окна
+function Modal({children, onClose}) {
+  return ReactDOM.createPortal(
+    <div style={{
+      position: 'fixed',
+      top: '0',
+      left: '0',
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}>
+      <div style={{
+        backgroundColor: 'white',
+        padding: '20px',
+        borderRadius: '10px',
+        boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
+      }}>
+        {children}
+        <button onClick={onClose} style={{marginTop: '10px'}}>Закрыть</button>
+      </div>
+    </div>,
+    document.getElementById('modal-root') // Целевой DOM-элемент
+  );
+}
+
+// Основной компонент
+function App() {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  return (
+    <div>
+      <h1>Пример использования портала</h1>
+      <button onClick={() => setIsModalOpen(true)}>Открыть модальное окно</button>
+
+      {isModalOpen && (
+        <Modal onClose={() => setIsModalOpen(false)}>
+          <p>Это модальное окно, отрендеренное через портал!</p>
+        </Modal>
+      )}
+    </div>
+  );
+}
+
+export default App;
+``` 
+
+## Объяснение кода:
+
+1. **Целевой DOM-элемент:**
+    - В `public/index.html` создан элемент с `id="modal-root"`, в который будет рендериться модальное окно.
+2. **Компонент `Modal`:**
+    - Использует `ReactDOM.createPortal`, чтобы рендерить содержимое модального окна в modal-root.
+    - Первый аргумент `createPortal` — это JSX, который нужно отрендерить.
+    - Второй аргумент — это DOM-элемент, в который будет вставлено содержимое.
+3. **Компонент `App`:**
+    - Управляет состоянием модального окна (`isModalOpen`).
+    - При нажатии на кнопку "Открыть модальное окно" состояние изменяется, и модальное окно отображается через портал.
+
+## Преимущества использования порталов:
+1. Логическая связь:
+    - Элементы, рендерящиеся через портал, остаются частью React-дерева. Это означает, что они могут получать пропсы,
+      контекст и участвовать в жизненном цикле компонентов.
+2. Визуальное отделение:
+    - Позволяет отображать элементы вне основного DOM-дерева, что полезно для модальных окон, всплывающих подсказок и
+      т.д.
+3. Упрощение стилей:
+    - Позволяет избежать проблем с z-index и наложением элементов.
+
+## Когда использовать порталы?
+- Модальные окна.
+- Всплывающие подсказки (tooltips).
+- Уведомления.
+- Любые элементы, которые должны отображаться поверх основного интерфейса.