Какие преимущества функциональных компонентов перед классовыми в React
Что проверяют
Понимаете ли вы, что дело в модели переиспользования логики, а не в краткости синтаксиса.
Как отвечать
- переиспользование логики: свой хук вытаскивает поведение целиком и подключается одной строкой. В классах для этого были компоненты высшего порядка и render props, отсюда глубокие обёртки в дереве;
- связанный код рядом: подписка и отписка живут в одном
useEffect, а не разнесены поcomponentDidMountиcomponentWillUnmount. Один жизненный цикл раньше содержал куски трёх несвязанных задач; - нет
this: исчезает целый класс ошибок с потерей контекста и ручной привязкой обработчиков; - меньше кода: нет конструктора, привязок и
render; - всё новое только здесь: хуки, Suspense, серверные компоненты,
useTransition, React Compiler. Классы поддерживаются, но не развиваются; - проще типизировать в TypeScript: пропсы это параметр функции, состояние выводится из
useState.
Честные оговорки: производительность практически не отличается, и говорить «функциональные быстрее» неверно. Границы ошибок до сих пор пишутся классом, componentDidCatch в хуках аналога не имеет. И хуки требуют дисциплины: правила вызова (только на верхнем уровне, только из компонентов и хуков) не формальность, на них держится сопоставление состояния между рендерами.
Где спотыкаются
Говорят про производительность вместо переиспользования логики.
Считают useEffect полным аналогом методов жизненного цикла.
Не знают, что границы ошибок остались классовыми.
Не могут объяснить, почему хук нельзя вызывать в условии.