Componenti Funzione vs React.FC in TypeScript: Un Confronto Civile

Comprendere l’evoluzione della tipizzazione in TypeScript per i componenti React

Componenti Funzione vs React.FC in TypeScript: Un Confronto Civile

React e TypeScript entrano insieme in un progetto. TypeScript dice: "Mi occupo dei tipi." React risponde: "Io gestisco il rendering." E da qualche parte, qualcuno domanda:

Dovremmo usare React.FC o tipizzare semplicemente la funzione?

È una domanda sensata. A prima vista, React.FC appare rifinito, ufficiale—addirittura sofisticato. Come se ti versasse un bicchiere di vino e dicesse "Rendiamo questo componente elegante." Ma sotto la superficie, porta con sé alcuni pesi che i moderni TypeScript hanno ormai lasciato indietro.

Diamo un’occhiata più da vicino.

I Due Stili

Il Componente Funzione Semplice

type Props = { title: string };

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

Pulito, chiaro e facile da capire. Come un caffè nero: niente fronzoli, semplice e funzionale.

Oppure, se preferisci le arrow function:

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

Entrambi validi, leggibili e ben allineati alle best practice attuali.

La Variante React.FC

import { FC } from 'react';

type Props = { title: string };

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

Questa versione avvolge il componente con un tipo generico. Sembra più "ufficiale" e se hai scoperto da poco i tipi utility di TypeScript, può sembrare una scelta naturale—come aver appena sbloccato un club segreto. Ma a volte, i club segreti hanno clausole nascoste.

Cosa Fa Veramente React.FC

React.FC (abbreviazione di React.FunctionComponent) è un tipo helper che descrive un componente funzione. Offre alcune caratteristiche predefinite:

  • Include la prop children di default, che tu la voglia o no.
  • Può talvolta migliorare l'autocompletamento in certi editor.
  • Può rendere il tipo di ritorno della funzione un po' più esplicito, anche se nella pratica conta poco.

Sono comodità modeste e, nei primi tempi di React + TypeScript, erano più utili. Ma i tempi sono cambiati e oggi queste "funzionalità" spesso ostacolano più che aiutare.

Perché Sta Cadendo in Disuso

Si potrebbe dire che React.FC è come i pantaloni cargo di TypeScript—pieni di tasche, la maggior parte inutilizzate.

  1. Children implicito

Ogni componente riceve una prop children anche se non la desidera. Questo può causare bug confusi quando gli sviluppatori presumono che children siano validi solo perché il tipo lo dice. (Spoiler: potrebbe non essere così.)

  1. Difficile con i generics

Quando il componente deve usare tipi generici, React.FC tende a complicare le cose invece di semplificarle. La sintassi diventa ingombrante e TypeScript meno collaborativo.

  1. Verbosità senza chiarezza

Scrivere const MyComponent: FC<Props> è più lungo e, si può dire, meno chiaro che limitarsi a tipizzare direttamente le props.

  1. Non più necessario

Le ragioni originarie per usare React.FC—supporto editor, inferenza JSX—sono ormai in gran parte risolte dai miglioramenti di TypeScript. Quello che prima era un workaround pratico, oggi è solo uno stile legacy.

Un Confronto Affiancato

Caratteristica function Component() const Component: FC
Include children? Solo se dichiarato Sempre incluso
Supporta generici? Con naturalezza Solo con difficoltà
Verbosità? Minima Notevolmente maggiore
Supporto editor? Sufficiente Leggermente migliore in casi specifici
Raccomandato? Sì Non più

L’Approccio Consigliato

Il consenso nella community è semplice: tipizza direttamente le props. Se vuoi che il componente accetti children, dichiaralo. Se non li vuoi, non ci saranno. Questo tipo di onestà ti sarà utile in futuro.

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

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

È esplicito. È mantenibile. E non finge che il componente gestisca children quando non lo fa.

Ci Sono Situazioni Dove FC Ha Ancora Senso?

Occasionalmente. Se stai lavorando in un codebase legacy che fa largo uso di React.FC, mantenere la coerenza può essere più importante che riscrivere tutto. Se stai creando componenti rapidamente e non vuoi preoccuparti di tipizzare i children, FC può ancora essere una scorciatoia.

Ma in generale, sono le eccezioni che confermano la regola.

In Conclusione

React.FC non è sbagliato. È solo che non serve più. TypeScript moderno ha reso la tipizzazione dei componenti React più semplice e prevedibile senza di esso.

Quindi la prossima volta che ti trovi a usare FC, fermati e pensa se stai aggiungendo valore—o solo strati inutili. Spesso, una funzione tipizzata semplice funzionerà meglio.

Nel software—come nella vita—la chiarezza batte l’astuzia. E meno sorprese significano quasi sempre meno rimpianti.

Categories