HOC, render props, хуки
Вопрос
Как в React переиспользуют логику между компонентами? Сравни HOC, render props и кастомные хуки.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
HOC: функция над компонентом, добавляет пропсы
Минусы HOC: неясно, откуда пропс, конфликты имён, вложенные обёртки
Render props: функция, которой компонент отдаёт данные; гибко, но вложенность
Кастомные хуки: логика с состоянием без обёрток, явно видно, что откуда
Хук делит логику, а не данные: у каждого вызова своё состояние
HOC и render props ещё встречаются в библиотеках и старом коде
Что могут спросить следом
- Когда render props всё ещё уместны?
- Как правильно назвать и протестировать кастомный хук?
- Можно ли вызвать хук внутри условия?
Разбор
Исторически было три способа. HOC: функция берёт компонент и возвращает обёртку, которая подмешивает пропсы, например withRouter. Проблемы: в компоненте не видно, откуда пришёл пропс, два HOC могут перетереть одно имя, а в DevTools получается лестница обёрток.
Render props: компонент принимает функцию и вызывает её со своими данными. Гибко, но при нескольких таких компонентах код уходит вправо лесенкой.
С хуками логика с состоянием выносится в функцию useSomething, и компонент явно пишет const { data } = useFetch(url). Нет обёрток, нет конфликтов имён, хуки легко комбинировать. Важно помнить, что хук делит именно логику: у каждого компонента своё состояние.
Сейчас я пишу хуки, а HOC и render props встречаю в библиотеках, например render-функция строки в виртуальном списке.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.