Какие встроенные типы React для Props важно знать и когда их применять?

Компоненты

При типизации props в React-TypeScript пригодится небольшой набор встроенных типов — они покрывают почти все случаи.

Дети и узлы

React.ReactNode — всё, что можно отрендерить: JSX, строка, число, массив, null/undefined. Тип для children по умолчанию.
React.ReactElement — конкретно JSX-элемент (уже, чем ReactNode): когда нужно гарантировать элемент, а не строку (слоты: icon: ReactElement).

type Props = { children: React.ReactNode; icon?: React.ReactElement };

Обработчики событий

React.MouseEvent<HTMLButtonElement>, React.ChangeEvent<HTMLInputElement>, React.KeyboardEvent, React.FormEvent — типы SyntheticEvent.
React.MouseEventHandler<HTMLButtonElement> — короткая запись пропа-обработчика.

type Props = { onClick: React.MouseEventHandler<HTMLButtonElement> };

Наследование атрибутов DOM

React.ComponentProps<'button'> (или ButtonHTMLAttributes<HTMLButtonElement>) — «все нативные пропсы кнопки»; база для собственных UI-компонентов:

type ButtonProps = React.ComponentProps<'button'> & { variant: 'primary' | 'ghost' };

React.ComponentProps<typeof MyComponent> — вытащить пропсы чужого компонента.

Ref и стили

React.Ref<HTMLInputElement> / RefObject — типы ref'ов; React.CSSProperties — объект style.

Чего избегать

React.FC — сегодня не рекомендуется: неявный children (до v18), проблемы с дженериками; проще типизировать props напрямую: const Card = (props: CardProps) => ....
JSX.Element как тип children — слишком узко.

Коротко для собеседования

Основные типы: ReactNode (children), ReactElement (слоты-элементы), типы событий (ChangeEvent/MouseEvent + …EventHandler), ComponentProps<'tag'> для наследования нативных атрибутов, CSSProperties, Ref. React.FC избегают (неявный children, дженерики) — props типизируют напрямую.