Вопрос с собеседования · Frontend

Как писать пользовательские хуки?

MiddleReact
Ещё спрашивают так:
  • Что такое custom hook?
Коротко

Пользовательский хук — функция с именем use…, внутри которой вызываются другие хуки; так выносят повторяющуюся логику (подписка на размер окна, debounce, загрузка данных, работа с формой). Каждый вызов хука получает своё состояние. Возвращаемые функции и объекты делают стабильными (useCallback, useMemo), чтобы их можно было класть в зависимости эффектов. Хук должен иметь одну ответственность и понятный API.

  • Правила хуков действуют и внутри: без условий и циклов
  • Хук не обязан возвращать JSX — это логика, а не компонент
  • Тестируют через renderHook

А ещё Не каждую функцию стоит превращать в хук — только если внутри есть хуки

Подробно

function useDebounced<T>(value: T, ms = 300) {
  const [v, setV] = useState(value);
  useEffect(() => {
    const t = setTimeout(() => setV(value), ms);
    return () => clearTimeout(t);
  }, [value, ms]);
  return v;
}

Что хотят услышать

  • Имя use и вызов хуков внутри.
  • Своё состояние на каждый вызов.
  • Стабильные возвращаемые значения.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓Функция use…, вызывающая хуки: выносит логику, у каждого вызова своё состояние
  • ✗Все компоненты, вызывающие один хук, делят одно состояние, поэтому хук заменяет Context
  • ✗Пользовательский хук обязан возвращать JSX, иначе React не сможет его отрендерить
  • ✗Внутри пользовательского хука можно вызывать хуки в условиях, ведь это не компонент

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования