Что такое ReactFC и какие исторические проблемы с типизацией children были связаны с этим типом?

Что такое React.FC?

React.FC (или React.FunctionComponent) — это встроенный тип в React для типизации функциональных компонентов с использованием TypeScript. Он упрощает объявление компонента, автоматически добавляя children в пропсы и возвращая JSX.Element.

Исторические проблемы с типизацией children

Основная проблема React.FC заключалась в том, что он неявно добавлял children в пропсы, даже если компонент не должен их принимать. Это приводило к ошибкам, когда разработчик случайно передавал дочерние элементы компоненту, который их не обрабатывал. Например:

// Компонент, который не ожидает children
const Header: React.FC = () => <h1>Title</h1>;

// Ошибка не возникает, хотя children не нужны
<Header>Some text</Header>;

Кроме того, React.FC не поддерживал дженерики, что усложняло создание переиспользуемых компонентов с разными типами пропсов. Также он не позволял использовать defaultProps с правильной типизацией.

Современный подход

Начиная с React 18, рекомендуется избегать React.FC и явно указывать children в пропсах, если они нужны. Это делает код более предсказуемым и гибким. Пример:

// Явное указание children
interface HeaderProps {
  title: string;
  children?: React.ReactNode;
}

const Header = ({ title, children }: HeaderProps) => {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
};

Такой подход устраняет неявное добавление children и позволяет лучше контролировать типы.

Вывод

React.FC был полезен для быстрой типизации, но из-за проблем с children и ограничений лучше использовать явное объявление пропсов. Это особенно важно в больших проектах, где точность типов критична для предотвращения ошибок.