useRef — позволяет создавать изменяемый объект, который сохраняется между рендерами.
Какие ещё React-хуки знаете? Расскажите про useRef, useReducer, useCallback, useMemo, useContext.
useRef — позволяет создавать изменяемый объект, который сохраняется между рендерами.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
- 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>
</>
);
}