Componentes Funcionales vs React.FC en TypeScript: Un Diálogo Civilizado

Entendiendo la evolución del tipado en TypeScript para componentes React

Componentes Funcionales vs React.FC en TypeScript: Un Diálogo Civilizado

React y TypeScript entran en un proyecto juntos. TypeScript dice: "Yo me ocupo de los tipos." React dice: "Yo me ocupo del renderizado." Y en algún momento, alguien pregunta:

¿Debemos usar React.FC, o simplemente tipar la función directamente?

Es una pregunta razonable. A simple vista, React.FC parece pulido, oficial—e incluso sofisticado. Como si te sirviera una copa de vino y dijera "Hagamos este componente elegante." Pero debajo de esa superficie, carga con ciertos inconvenientes que TypeScript moderno ha superado en gran medida.

Veamos de cerca.

Los Dos Estilos

El Componente Funcional Simple

type Props = { title: string };

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

Limpio, claro y fácil de entender. Como un café negro: sin adornos, simplemente hace el trabajo.

O, si prefieres funciones flecha:

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

Ambos son válidos, legibles y están bien alineados con las mejores prácticas actuales.

La Variante React.FC

import { FC } from 'react';

type Props = { title: string };

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

Esta versión envuelve el componente con un tipo genérico. Parece más "oficial" y si recientemente descubriste los tipos utilitarios de TypeScript, podría sentirse como una afinidad natural—como si hubieras desbloqueado un club secreto. Pero a veces, los clubes secretos vienen con letra pequeña.

Lo Que Realmente Hace React.FC

React.FC (abreviatura de React.FunctionComponent) es un tipo auxiliar que describe un componente funcional. Ofrece algunos comportamientos predeterminados:

  • Incluye la prop children por defecto, quieras o no.
  • Puede mejorar ocasionalmente el autocompletado en ciertos editores.
  • Puede hacer el tipo de retorno de la función un poco más explícito, aunque eso rara vez importa en la práctica.

Son conveniencias modestas, y en los primeros días de React + TypeScript, eran más útiles. Pero los tiempos han cambiado, y hoy estas "funciones" suelen estorbar más que ayudar.

Por Qué Está Cayendo en Desuso

Se podría decir que React.FC es como los pantalones cargo de TypeScript—muchos bolsillos, la mayoría sin usar.

  1. Children implícitos

Cada componente recibe por defecto una prop children aunque no la quiera. Esto puede causar bugs confusos cuando los desarrolladores asumen que children son válidas solo porque el tipo lo dice. (Spoiler: puede que no lo sean.)

  1. Torpeza con genéricos

Cuando tu componente necesita usar tipos genéricos, React.FC suele complicar las cosas en lugar de hacerlas más limpias. La sintaxis se vuelve engorrosa y TypeScript resulta menos útil, no más.

  1. Verbosidad sin claridad

Escribir const MyComponent: FC<Props> es más largo y, en cierto modo, más oscuro que simplemente tipar las props directamente.

  1. Ya no es necesario

Las razones originales para usar React.FC—soporte de editor, inferencia JSX—han sido mayormente solucionadas por mejoras en TypeScript. Lo que antes era un truco práctico ahora es solo estilo legado.

Comparación Lado a Lado

Característica Component Funcional() const Component: FC
Incluye children? Solo si se declara Siempre incluido
Soporta genéricos? De manera natural No sin esfuerzo
Verbosidad? Mínima Notablemente mayor
Soporte de editor? Suficiente Ligeramente mejor en casos específicos
¿Recomendado? Sí Ya no

El Enfoque Recomendado

El consenso en la comunidad es simple: tipa tus props directamente. Si quieres que tu componente acepte children, dilo. Si no, no lo hará. Esa es la honestidad que tu yo futuro agradecerá.

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

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

Es explícito. Es mantenible. Y no finge que tu componente maneja children cuando no es así.

¿Hay Situaciones Donde React.FC Sigue Teniendo Sentido?

Ocasionalmente. Si trabajas en un código legado que depende mucho de React.FC, mantener la consistencia puede importar más que reescribir todo. Si estás creando componentes rápidamente y no quieres preocuparte por tipar children, FC aún puede ser un atajo.

Pero en general, esas son las excepciones que confirman la regla.

Para Concluir

React.FC no está mal. Simplemente ya no es necesario. TypeScript moderno ha hecho que tipar componentes React sea más sencillo y predecible sin él.

Así que la próxima vez que vayas a usar FC, detente y considera si estás aportando valor—o solo capas extra. Más a menudo que no, una función simple tipada te servirá mejor.

En el software—como en la vida—la claridad vence a la astucia. Y menos sorpresas usualmente significan menos arrepentimientos.

Categories