update hooks

docs/react/05-base-hooks.md

@@ -4,59 +4,76 @@ sidebar_position: 5
 
 # Базовые хуки React
 
-React предоставляет несколько основных хуков, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Вот основные хуки:
+React предоставляет несколько основных хуков, которые позволяют использовать состояние и другие возможности React в
+функциональных компонентах. Вот основные хуки:
 
 1. **useState:**
-   - Позволяет добавлять состояние в функциональный компонент.
+    - Позволяет добавлять состояние в функциональный компонент.
-   - Возвращает массив, где первый элемент — текущее значение состояния, а второй — функция для его обновления.
+    - Возвращает массив, где первый элемент — текущее значение состояния, а второй — функция для его обновления.
+
 ```js
 const [count, setCount] = useState(0);
 ```
+
 2. **useEffect:**
-   - Позволяет выполнять побочные эффекты в функциональных компонентах (например, запросы к API, подписки, ручное изменение DOM).
+    - Позволяет выполнять побочные эффекты в функциональных компонентах (например, запросы к API, подписки, ручное
-   - Принимает два аргумента: функцию с эффектом и массив зависимостей (опционально).
+      изменение DOM).
+    - Принимает два аргумента: функцию с эффектом и массив зависимостей (опционально).
+
 ```js
 useEffect(() => {
   document.title = `Вы нажали ${count} раз`;
 }, [count]);
 ```
+
 3. **useContext:**
-   - Позволяет использовать контекст в функциональных компонентах.
+    - Позволяет использовать контекст в функциональных компонентах.
-   - Принимает объект контекста (созданный с помощью `React.createContext`) и возвращает текущее значение контекста.
+    - Принимает объект контекста (созданный с помощью `React.createContext`) и возвращает текущее значение контекста.
+
 ```js
 const value = useContext(MyContext);
 ```
+
 4. **useReducer:**
-   - Альтернатива `useState` для управления сложным состоянием.
+    - Альтернатива `useState` для управления сложным состоянием.
-   - Принимает редюсер (функцию, которая определяет, как состояние должно обновляться) и начальное состояние.
+    - Принимает редюсер (функцию, которая определяет, как состояние должно обновляться) и начальное состояние.
-   - Возвращает текущее состояние и функцию `dispatch` для отправки действий.
+    - Возвращает текущее состояние и функцию `dispatch` для отправки действий.
+
 ```js
 const [state, dispatch] = useReducer(reducer, initialState);
 ```
+
 5. **useCallback:**
-   - Возвращает мемоизированную версию колбэка, которая изменяется только при изменении зависимостей.
+    - Возвращает мемоизированную версию колбэка, которая изменяется только при изменении зависимостей.
-   - Полезен для оптимизации производительности, когда колбэк передается в дочерние компоненты.
+    - Полезен для оптимизации производительности, когда колбэк передается в дочерние компоненты.
+
 ```js
 const memoizedCallback = useCallback(() => {
   doSomething(a, b);
 }, [a, b]);
 ```
+
 6. **useMemo:**
-   - Возвращает мемоизированное значение, которое пересчитывается только при изменении зависимостей.
+    - Возвращает мемоизированное значение, которое пересчитывается только при изменении зависимостей.
-   - Полезен для оптимизации вычислений, которые требуют больших затрат ресурсов.
+    - Полезен для оптимизации вычислений, которые требуют больших затрат ресурсов.
+
 ```js
 const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
 ```
+
 7. **useRef:**
-   - Возвращает изменяемый объект, свойство `.current` которого инициализируется переданным аргументом.
+    - Возвращает изменяемый объект, свойство `.current` которого инициализируется переданным аргументом.
-   - Используется для хранения мутабельных значений, которые не вызывают ререндер при изменении.
+    - Используется для хранения мутабельных значений, которые не вызывают ререндер при изменении.
-   - Также может использоваться для получения ссылок на DOM-элементы.
+    - Также может использоваться для получения ссылок на DOM-элементы.
+
 ```js
 const inputRef = useRef(null);
 ```
+
 8. **useImperativeHandle:**
-   - Позволяет настроить экземпляр значения, которое будет доступно при использовании `ref`.
+    - Позволяет настроить экземпляр значения, которое будет доступно при использовании `ref`.
-   - Обычно используется вместе с `forwardRef`.
+    - Обычно используется вместе с `forwardRef`.
+
 ```js
 useImperativeHandle(ref, () => ({
   focus() {
@@ -64,19 +81,70 @@ useImperativeHandle(ref, () => ({
   }
 }));
 ```
+
 9. **useLayoutEffect:**
-   - Похож на `useEffect`, но выполняется синхронно после всех изменений DOM, но до того, как браузер отрисует изменения.
+    - Похож на `useEffect`, но выполняется синхронно после всех изменений DOM, но до того, как браузер отрисует
-   - Используется для измерений DOM или других операций, которые должны быть выполнены до отрисовки.
+      изменения.
+    - Используется для измерений DOM или других операций, которые должны быть выполнены до отрисовки.
+
 ```js
 useLayoutEffect(() => {
   // Логика, которая должна выполниться до отрисовки
 }, [dependencies]);
 ```
-10. useDebugValue:
+
+10. **useDebugValue:**
     - Используется для отладки пользовательских хуков.
     - Позволяет отображать метку для пользовательских хуков в инструментах разработчика React.
+
 ```js
 useDebugValue(isOnline ? 'Online' : 'Offline');
 ```
 
-🚀 **_Источник: DeepSeek_**
+11. **useTransition:** позволяет вам обновлять состояние без блокировки пользовательского интерфейса. Он особенно полезен для оптимизации
+      производительности при медленных рендерах или когда вам нужно отложить менее важные обновления.
+
+```jsx
+import {useTransition} from 'react';
+
+function MyComponent() {
+  const [isPending, startTransition] = useTransition();
+
+  // ...
+}
+```
+
+- `startTransition` - функция, которая позволяет пометить обновления состояния как переходные (неблокирующие)
+- `isPending` - булево значение, указывающее, активен ли в данный момент переход
+
+**Когда использовать**
+- **Медленные рендеры:** Когда у вас есть сложные вычисления или тяжелые компоненты, которые могут заблокировать UI
+- **Отложенные обновления:** Когда некоторые обновления состояния могут быть отложены в пользу более важных
+- **Улучшение воспринимаемой производительности:** Чтобы пользователь видел немедленный отклик на свои действия
+  
+**Особенности**
+- **Приоритизация обновлений:** Обновления внутри startTransition имеют более низкий приоритет
+- **Индикация загрузки:** isPending позволяет показать пользователю, что происходит фоновая загрузка
+- **Совместимость с Suspense:** Хорошо работает вместе с Suspense для плавных переходов между состояниями
+  **Отличие от других подходов**
+- **useDeferredValue:** Вместо управления обновлениями, откладывает значение
+- **setTimeout:** useTransition интегрирован в планировщик React и работает более предсказуемо
+
+12. **useDeferredValue** позволяет отложить обновление части UI, чтобы избежать блокировки основного потока при выполнении ресурсоемких операций. Он похож на `debounce` или `throttle`, но интегрирован в механизм рендеринга React.
+    
+**Когда использовать**
+    - Оптимизация производительности при работе с медленными или тяжелыми компонентами 
+    - Отложенный рендеринг не критичных частей интерфейса
+    - Синхронизация нескольких состояний, когда одно зависит от другого, но может обновляться с задержкой
+```jsx
+import { useDeferredValue } from 'react';
+
+function MyComponent({ value }) {
+  const deferredValue = useDeferredValue(value);
+  
+  // ...
+}
+```
+
+🚀 **_Источник: DeepSeek_** \
+🚀 **Источник: [YT: useTransition и useDeferredValue хуки в React](https://www.youtube.com/watch?v=hWUlv7M7rR8)**