diff --git a/docs/react/05-base-hooks.md b/docs/react/05-base-hooks.md index a59336e..da630d9 100644 --- a/docs/react/05-base-hooks.md +++ b/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` для управления сложным состоянием. - - Принимает редюсер (функцию, которая определяет, как состояние должно обновляться) и начальное состояние. - - Возвращает текущее состояние и функцию `dispatch` для отправки действий. + - Альтернатива `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-элементы. + - Возвращает изменяемый объект, свойство `.current` которого инициализируется переданным аргументом. + - Используется для хранения мутабельных значений, которые не вызывают ререндер при изменении. + - Также может использоваться для получения ссылок на DOM-элементы. + ```js const inputRef = useRef(null); ``` + 8. **useImperativeHandle:** - - Позволяет настроить экземпляр значения, которое будет доступно при использовании `ref`. - - Обычно используется вместе с `forwardRef`. + - Позволяет настроить экземпляр значения, которое будет доступно при использовании `ref`. + - Обычно используется вместе с `forwardRef`. + ```js useImperativeHandle(ref, () => ({ focus() { @@ -64,19 +81,70 @@ useImperativeHandle(ref, () => ({ } })); ``` + 9. **useLayoutEffect:** - - Похож на `useEffect`, но выполняется синхронно после всех изменений DOM, но до того, как браузер отрисует изменения. - - Используется для измерений DOM или других операций, которые должны быть выполнены до отрисовки. + - Похож на `useEffect`, но выполняется синхронно после всех изменений DOM, но до того, как браузер отрисует + изменения. + - Используется для измерений DOM или других операций, которые должны быть выполнены до отрисовки. + ```js useLayoutEffect(() => { // Логика, которая должна выполниться до отрисовки }, [dependencies]); ``` -10. useDebugValue: + +10. **useDebugValue:** - Используется для отладки пользовательских хуков. - Позволяет отображать метку для пользовательских хуков в инструментах разработчика React. + ```js useDebugValue(isOnline ? 'Online' : 'Offline'); ``` -🚀 **_Источник: DeepSeek_** \ No newline at end of file +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)** \ No newline at end of file