Как использовать типизацию React.FC и почему не указывать children в интерфейсе

Что проверяют

Знаете ли вы актуальное состояние типов React, а не совет из старых туториалов. Сама формулировка вопроса опирается на устаревшее поведение, и интервьюер часто ждёт, заметите ли вы это. Следом спрашивают, как тогда типизировать children и нужен ли вообще React.FC.

Как отвечать

Сначала поправьте посылку. До @types/react 18 тип React.FC<P> неявно добавлял в пропсы children, поэтому их можно было не описывать. В типах для React 18 это убрали: теперь FC принимает ровно те пропсы, которые вы объявили, и обращение к children без объявления даёт ошибку компиляции.

Причина изменения в том, что неявный children вводил в заблуждение: любой компонент формально принимал дочерние элементы, даже если никогда их не рендерил, и ошибку «передал содержимое, а оно пропало» типы не ловили.

Как делают сейчас:

• явное поле: children?: React.ReactNode в интерфейсе пропсов, если компонент их выводит;
• PropsWithChildren<P>: утилита, которая добавляет то же поле к вашим пропсам;
• обычная функция с типизированным аргументом: function Card({ title }: CardProps). Этот вариант встречается чаще FC, легче читается и позволяет делать дженерик-компоненты вроде List<T>, которые через const List: FC<...> не выразить.

React.FC при этом не запрещён: он проверяет возвращаемое значение и подходит, если так принято в кодовой базе. Добавьте, что defaultProps у функциональных компонентов в React 19 больше не работает, значения по умолчанию задают при деструктуризации пропсов.

Где спотыкаются

Повторяют, что FC сам добавляет children. На React 18 и 19 это выдаёт, что вы давно не открывали проект с актуальными типами.

Типизируют children как JSX.Element. Тогда нельзя передать строку, число или массив, а правильный тип для содержимого почти всегда ReactNode.

Пытаются типами ограничить, какие именно компоненты можно положить внутрь, например только <Tab>. TypeScript этого не проверяет: у любого JSX-выражения один и тот же тип, и такие ограничения делают в рантайме или через API компонента.