Sobes.tech
Назад к вопросам
Middle
4

Какие ещё React-хуки знаете? Расскажите про useRef, useReducer, useCallback, useMemo, useContext.

Компании, где спрашивали
X5 techX5 tech

Ответ от нейросети

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>
    </>
  );
}