update browser

docs/react/05-base-hooks.md

@@ -2,4 +2,79 @@
 sidebar_position: 5
 ---
 
-# Базовые хуки React
+# Базовые хуки React
+
+React предоставляет несколько основных хуков, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Вот основные хуки:
+
+1. **useState:**
+   - Позволяет добавлять состояние в функциональный компонент.
+   - Возвращает массив, где первый элемент — текущее значение состояния, а второй — функция для его обновления.
+```js
+const [count, setCount] = useState(0);
+```
+2. **useEffect:**
+   - Позволяет выполнять побочные эффекты в функциональных компонентах (например, запросы к API, подписки, ручное изменение DOM).
+   - Принимает два аргумента: функцию с эффектом и массив зависимостей (опционально).
+```js
+useEffect(() => {
+  document.title = `Вы нажали ${count} раз`;
+}, [count]);
+```
+3. **useContext:**
+   - Позволяет использовать контекст в функциональных компонентах.
+   - Принимает объект контекста (созданный с помощью `React.createContext`) и возвращает текущее значение контекста.
+```js
+const value = useContext(MyContext);
+```
+4. **useReducer:**
+   - Альтернатива `useState` для управления сложным состоянием.
+   - Принимает редюсер (функцию, которая определяет, как состояние должно обновляться) и начальное состояние.
+   - Возвращает текущее состояние и функцию `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` которого инициализируется переданным аргументом.
+   - Используется для хранения мутабельных значений, которые не вызывают ререндер при изменении.
+   - Также может использоваться для получения ссылок на DOM-элементы.
+```js
+const inputRef = useRef(null);
+```
+8. **useImperativeHandle:**
+   - Позволяет настроить экземпляр значения, которое будет доступно при использовании `ref`.
+   - Обычно используется вместе с `forwardRef`.
+```js
+useImperativeHandle(ref, () => ({
+  focus() {
+    inputRef.current.focus();
+  }
+}));
+```
+9. **useLayoutEffect:**
+   - Похож на `useEffect`, но выполняется синхронно после всех изменений DOM, но до того, как браузер отрисует изменения.
+   - Используется для измерений DOM или других операций, которые должны быть выполнены до отрисовки.
+```js
+useLayoutEffect(() => {
+  // Логика, которая должна выполниться до отрисовки
+}, [dependencies]);
+```
+10. useDebugValue:
+    - Используется для отладки пользовательских хуков.
+    - Позволяет отображать метку для пользовательских хуков в инструментах разработчика React.
+```js
+useDebugValue(isOnline ? 'Online' : 'Offline');
+```