Function Components vs React.FC in TypeScript: Eine sachliche Diskussion

Verstehen der Entwicklung der TypeScript-Typisierung in React-Komponenten

Function Components vs React.FC in TypeScript: Eine sachliche Diskussion

React und TypeScript starten gemeinsam ein Projekt. TypeScript sagt: „Ich kümmere mich um die Typen.“ React sagt: „Ich kümmere mich um das Rendering.“ Und irgendwann fragt jemand:

Sollten wir React.FC verwenden oder die Funktion einfach direkt typisieren?

Das ist eine vernünftige Frage. Auf den ersten Blick wirkt React.FC poliert, offiziell – ja sogar anspruchsvoll. Fast so, als würde es deinem Code ein Glas Wein einschenken und sagen: „Lass uns diese Komponente elegant machen.“ Doch unter der Oberfläche bringt es ein paar Altlasten mit, die moderne TypeScript größtenteils hinter sich gelassen hat.

Werfen wir einen genaueren Blick darauf.

Die zwei Stile

Die einfache Funktionskomponente

type Props = { title: string };

function MyComponent({ title }: Props) {
  return <h1>{title}</h1>;
}

Sauber, klar und leicht verständlich. Wie ein schwarzer Kaffee: ohne Schnickschnack, tut einfach seinen Zweck.

Oder, wenn du Pfeilfunktionen bevorzugst:

const MyComponent = ({ title }: Props) => {
  return <h1>{title}</h1>;
};

Beide Varianten sind gültig, gut lesbar und entsprechen den aktuellen Best Practices.

Die React.FC Variante

import { FC } from 'react';

type Props = { title: string };

const MyComponent: FC<Props> = ({ title }) => {
  return <h1>{title}</h1>;
};

Diese Version umgibt die Komponente mit einem generischen Typ. Sie wirkt „offizieller“ und wenn du kürzlich die Utility-Typen von TypeScript entdeckt hast, fühlt es sich vielleicht wie ein natürlicher Fit an – als hättest du gerade einen geheimen Club geöffnet. Aber manchmal haben geheime Clubs Kleingedrucktes.

Was React.FC tatsächlich macht

React.FC (kurz für React.FunctionComponent) ist ein Hilfstyp, der eine Funktionskomponente beschreibt. Er bietet einige Standardverhalten:

  • Das children-Prop ist standardmäßig immer enthalten, ob du es willst oder nicht.
  • Es kann in manchen Editoren den Autocomplete gelegentlich verbessern.
  • Es kann den Rückgabetyp der Funktion etwas expliziter machen, auch wenn das in der Praxis selten relevant ist.

Das sind eher bescheidene Komfortfunktionen, die in früheren Tagen von React + TypeScript nützlicher waren. Aber die Zeiten haben sich geändert, und heute stehen diese „Features“ oft eher im Weg als dass sie helfen.

Warum es aus der Mode kommt

Man könnte sagen, React.FC ist die Cargo-Hose von TypeScript – viele Taschen, von denen aber die meisten ungenutzt bleiben.

  1. Implizite children

Jede Komponente erhält ein children-Prop, egal ob sie es will oder nicht. Das kann zu verwirrenden Bugs führen, wenn Entwickler annehmen, dass children gültig sind, nur weil der Typ das sagt. (Spoiler: Das müssen sie nicht sein.)

  1. Umständlich mit Generics

Wenn deine Komponente generische Typen verwenden muss, macht React.FC die Sache meist eher komplizierter als einfacher. Die Syntax wird umständlich, und TypeScript wird weniger hilfreich, nicht mehr.

  1. Verbosität ohne Klarheit

const MyComponent: FC<Props> zu schreiben ist länger und möglicherweise weniger klar als die Props einfach direkt zu typisieren.

  1. Kein notwendiger Schritt mehr

Die ursprünglichen Gründe für React.FC – Editorunterstützung, JSX-Inferenz – wurden mittlerweile größtenteils durch Verbesserungen in TypeScript gelöst. Was früher ein praktischer Workaround war, ist heute eher ein Relikt.

Ein direkter Vergleich

Merkmal function Component() const Component: FC
Enthält children? Nur wenn deklariert Immer enthalten
Unterstützt Generics? Elegant Nicht ohne Aufwand
Verbosität? Minimal Deutlich mehr
Editor-Support? Ausreichend In bestimmten Fällen etwas besser
Empfehlenswert? Ja Nicht mehr

Der empfohlene Ansatz

Der Konsens in der Community ist einfach: Tipisiere deine Props direkt. Wenn deine Komponente children akzeptieren soll, sag es explizit. Wenn nicht, dann eben nicht. Diese Ehrlichkeit wird dein zukünftiges Ich zu schätzen wissen.

type Props = {
  title: string;
  children?: React.ReactNode;
};

const MyComponent = ({ title, children }: Props) => (
  <div>
    <h1>{title}</h1>
    {children}
  </div>
);

Es ist explizit. Es ist wartbar. Und es tut nicht so, als ob deine Komponente children handhabt, wenn sie es nicht tut.

Gibt es Situationen, in denen FC noch Sinn macht?

Gelegentlich. Wenn du in einem Legacy-Code arbeitest, der stark auf React.FC setzt, kann Konsistenz wichtiger sein als alles neu zu schreiben. Wenn du schnell Komponenten mocken möchtest und dich nicht um die Typisierung von children kümmern willst, kann FC noch ein praktischer Shortcut sein.

Aber generell sind das Ausnahmen, die die Regel bestätigen.

Zum Abschluss

React.FC ist nicht falsch – es ist nur nicht mehr notwendig. Modernes TypeScript hat die Typisierung von React-Komponenten einfacher und vorhersagbarer gemacht, ganz ohne React.FC.

Beim nächsten Mal, wenn du zu FC greifen willst, halte kurz inne und überlege, ob du wirklich einen Mehrwert schaffst – oder nur zusätzliche Schichten hinzufügst. Meistens wird dir eine einfache, typisierte Funktion besser dienen.

In der Softwareentwicklung – wie im Leben – gewinnt Klarheit vor Cleverness. Und weniger Überraschungen bedeuten meistens weniger Bedauern.

Categories