TypeScript : comprendre la confusion entre React.FC et les propriététs d'une fonction classique
Le framework JavaScript React a fonctionné dès le départ avec un système de composants qui ont leurs états et leurs cycles de vie. Les versions suivantes ont toujours eu la même base mais ont ajouté plus de possibilités et de flexibilité. Au début, il fallait systématiquement une classe pour créer un composant, ce qui provoquait l'utilisation de beaucoup de classes, même pour des composants simples. L'ajout des "Hooks" dans React a permis la création de composants fonctionnels, des composants qui sont écrits avec une fonction. Aujourd'hui, en plus de l'écriture classique, React a introduit la notion de "Function components" (React.FC) pour standardiser l'écriture. Les 2 notions sont proches mais ont quelques différences.
On déclare un composant fonctionnel en définissant une fonction qui prend en argument une propriété et qui retourne un élément écrit en JSX.
const App = ({ message }: AppProps) => <div>{message}</div>;
Les développeurs du framework ont donc introduit la notion de composant fonctionnel avec la méthode "React.FC". La syntaxe est très proche. La différence se situe dans les mécanismes internes.
const App: React.FC<{ message: string }> = ({ message }) => (
<div>{message}</div>
);
La méthode "React.FC" ajoute la vérification du type et l'autocomplétion pour les propriétés statiques "displayName", "propTypes" ou encore "defaultProps". "React.FC" ajoute une définition implicite pour les composants enfants avec la propriété "children", et ajoute également le type de retour, qui doit être explicite.
const App: React.FunctionComponent<{ message: string }> = ({
children,
message
}) => <div>{message}<div>{children}</div></div>;
Bien que ces ajouts aident les développeurs, ils sont encore perfectibles. Facebook décourage pour l'instant d'utiliser cette possibilité sauf dans des cas particuliers. Il y a des soucis de fonctionnement avec la gestion de la propriété "defaultProps" et avec le type implicite des composants enfants ("children"). Pour l'instant, l'écriture classique reste privilégiée par les développeurs, mais les développeurs du framework vont corriger les soucis rencontrés et ajouter de nouvelles fonctionnalités. Il faudra donc surveiller l'évolution de la méthode "React.FC" à l'avenir.