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

Почему пользовательские хуки вытеснили HOC и render props?

MiddleReact
Ещё спрашивают так:
  • Что такое HOC в React?
  • Что такое render props?
Коротко

HOC — функция, которая принимает компонент и возвращает обёрнутый с дополнительными props (withUser(Profile)). Render props — компонент вызывает функцию-проп для отрисовки (<Mouse render={pos => ...}/>). Оба приёма делили логику, но давали «ад обёрток» в дереве, конфликты имён props и неявные зависимости. Пользовательский хук делит ту же логику без лишних компонентов: const user = useUser() — явно, типизируется просто, комбинируется.

  • HOC ещё встречается в старом коде и некоторых библиотеках
  • Хук делит логику, а не состояние: у каждого вызова своё
  • Render props остаются уместны, когда нужно отдать управление разметкой

А ещё Хуки нельзя вызывать условно — правила хуков

Подробно

// HOC
const ProfileWithUser = withUser(Profile);
// хук
function Profile() {
  const user = useUser();
  return <h1>{user.name}</h1>;
}

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

  • Что такое HOC и render props.
  • Их проблемы: обёртки, конфликты props.
  • Хуки как явная замена.

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

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

Показать варианты и ответ
  • ✗Пользовательский хук делит одно состояние между всеми компонентами, которые его вызывают
  • ✗HOC быстрее хуков и поэтому предпочтительнее
  • ✗Render props запрещены в современных версиях React
  • ✓Хук делит логику без лишних компонентов в дереве и без конфликтов имён props

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

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

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

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

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