Выбор ответа Middle Паттерны компонентов обновлено
HOC внутри рендера
Вопрос
Что не так с этим кодом?
function Dashboard({ data }) {
const LoggedChart = withLogger(Chart);
return <LoggedChart data={data} />;
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: HOC в рендере даёт новый тип каждый раз, Chart теряет state. HOC возвращает новый компонент.
Варианты ответа
- Ничего: это обычный HOC, так его и применяют внутри компонента
withLoggerнельзя применять к функциональным компонентам- Нужен
forwardRef, иначе код не скомпилируется в React 19 - HOC в рендере даёт новый тип каждый раз,
Chartтеряет stateправильный ответ
Разбор
HOC возвращает новый компонент. Если вызывать его в теле рендера, ссылка на тип меняется каждый раз, и React пересоздаёт всё поддерево. HOC применяют один раз на уровне модуля: const LoggedChart = withLogger(Chart);.
- Это классическая ошибка, а не обычный HOC.
- HOC работает и с функциональными компонентами.
forwardRefнужен был только для пробрасывания ref, и в React 19 не нужен вовсе.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.