Interfaces robustas ytipadas

Componentes, hooks, estado, datos y rendimiento, todo tipado y con React 19. La forma en que se construye frontend en la mayoría de equipos hoy.

Empezar

Acceso al curso completo, ejercicios y material de entrevista.

// Componente con estado tipado
type Props = { inicial?: number };

function Contador({ inicial = 0 }: Props) {
  const [n, setN] = useState(inicial);
  return (
    <button onClick={() => setN(p => p + 1)}>
      Has pulsado {n} veces
    </button>
  );
}

→n: number setN: Dispatch<SetStateAction<number>>

⧗El tipo de n se infiere de inicial, sin anotar

// Custom hook genérico y tipado
function useLocalStorage<T>(clave: string, inicial: T) {
  const [valor, setValor] = useState<T>(() => {
    const guardado = localStorage.getItem(clave);
    return guardado ? JSON.parse(guardado) : inicial;
  });
  return [valor, setValor] as const;
}

→const [tema, setTema] = useLocalStorage('tema', 'claro')

→tema: string (T inferido del valor inicial)

⧗as const da la tupla [T, setter], no T[]

// Discriminated union para los estados de la UI
type Estado =
  | { tipo: 'cargando' }
  | { tipo: 'error'; msg: string }
  | { tipo: 'ok'; datos: User[] };

if (estado.tipo === 'ok') {
  return <Lista items={estado.datos} />;
}

→estado.datos solo existe en la rama 'ok'

→imposible leer datos sin comprobar el tipo

⧗El tipo modela los estados imposibles fuera

Orientado a entrevistas

No solo aprendes React. Te preparas para que te contraten.

Banco orientado a la entrevista técnica frontend: preguntas reales sobre hooks, renderizado y estado, los errores que delatan a un junior y retos de debug al estilo prueba en vivo.

Preguntas

Preguntas reales de entrevistas técnicas.

Errores comunes

Lo que delata a un junior frente al entrevistador.

Retos de debug

Código roto al estilo prueba técnica.

Qué vas a aprender

Del primer useState a construir aplicaciones tipadas y mantenibles

Componentes y props tipados

JSX con TypeScript, props con type/interface y children bien tipados.

Los hooks a fondo

useState, useEffect, useRef, useContext y useReducer sin sustos.

Custom hooks reutilizables

Extraer lógica con genéricos y tiparla para que se use bien.

Datos, estado y rutas

Fetching tipado, estado global, React Router y el hook use.

Rendimiento que se mide

Memoización con criterio, Profiler, code splitting y Suspense.

React 19 moderno

Form Actions, ref como prop, el hook use y el React Compiler.