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

useRef — позволяет создавать изменяемый объект, который сохраняется между рендерами.

Короткий ответ

Что ответить на собеседовании

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

Практика в реальном времени

Подготовьтесь к следующему собеседованию

Interview Boost учитывает вакансию, резюме и технологии и помогает сформулировать ответ прямо во время интервью.

Начать подготовку