Какие ещё React-хуки знаете? Расскажите про useRef, useReducer, useCallback, useMemo, useContext.
Ответ от нейросети
sobes.tech AI
-
useRef — позволяет создавать изменяемый объект, который сохраняется между рендерами. Обычно используется для доступа к DOM-элементам или хранения мутабельных значений без повторного рендера.
-
useReducer — альтернатива useState для более сложной логики состояния, особенно когда есть несколько связанных значений или сложные переходы. Работает по принципу редьюсера из Redux.
-
useCallback — мемоизирует функцию, чтобы она не пересоздавалась при каждом рендере, если зависимости не изменились. Полезно для оптимизации и предотвращения лишних перерендеров дочерних компонентов.
-
useMemo — мемоизирует вычисленное значение, чтобы не пересчитывать его при каждом рендере, если зависимости не изменились.
-
useContext — позволяет получить доступ к значению из React Context без необходимости пробрасывать пропсы через все уровни компонентов.
Пример использования useRef для доступа к input:
import React, { useRef } from 'react';
function TextInput() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Фокус на инпут</button>
</>
);
}