frontend-docs/docs/react/05-base-hooks.md

sidebar_position

sidebar_position
5

Базовые хуки React

Источник: DeepSeek

React предоставляет несколько основных хуков, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Вот основные хуки:

1. useState:
   • Позволяет добавлять состояние в функциональный компонент.
   • Возвращает массив, где первый элемент — текущее значение состояния, а второй — функция для его обновления.

const [count, setCount] = useState(0);

2. useEffect:
   • Позволяет выполнять побочные эффекты в функциональных компонентах (например, запросы к API, подписки, ручное изменение DOM).
   • Принимает два аргумента: функцию с эффектом и массив зависимостей (опционально).

useEffect(() => {
  document.title = `Вы нажали ${count} раз`;
}, [count]);

3. useContext:
   • Позволяет использовать контекст в функциональных компонентах.
   • Принимает объект контекста (созданный с помощью React.createContext) и возвращает текущее значение контекста.

const value = useContext(MyContext);

4. useReducer:
   • Альтернатива useState для управления сложным состоянием.
   • Принимает редюсер (функцию, которая определяет, как состояние должно обновляться) и начальное состояние.
   • Возвращает текущее состояние и функцию dispatch для отправки действий.

const [state, dispatch] = useReducer(reducer, initialState);

5. useCallback:
   • Возвращает мемоизированную версию колбэка, которая изменяется только при изменении зависимостей.
   • Полезен для оптимизации производительности, когда колбэк передается в дочерние компоненты.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

6. useMemo:
   • Возвращает мемоизированное значение, которое пересчитывается только при изменении зависимостей.
   • Полезен для оптимизации вычислений, которые требуют больших затрат ресурсов.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

7. useRef:
   • Возвращает изменяемый объект, свойство .current которого инициализируется переданным аргументом.
   • Используется для хранения мутабельных значений, которые не вызывают ререндер при изменении.
   • Также может использоваться для получения ссылок на DOM-элементы.

const inputRef = useRef(null);

8. useImperativeHandle:
   • Позволяет настроить экземпляр значения, которое будет доступно при использовании ref.
   • Обычно используется вместе с forwardRef.

useImperativeHandle(ref, () => ({
  focus() {
    inputRef.current.focus();
  }
}));

9. useLayoutEffect:
   • Похож на useEffect, но выполняется синхронно после всех изменений DOM, но до того, как браузер отрисует изменения.
   • Используется для измерений DOM или других операций, которые должны быть выполнены до отрисовки.

useLayoutEffect(() => {
  // Логика, которая должна выполниться до отрисовки
}, [dependencies]);

10. useDebugValue:
    • Используется для отладки пользовательских хуков.
    • Позволяет отображать метку для пользовательских хуков в инструментах разработчика React.

useDebugValue(isOnline ? 'Online' : 'Offline');