Cuando trabajamos con interfaces de usuario en la web, React suele ser una de las primeras opciones que nos vienen a la mente. Sin embargo, hay ocasiones en las que necesitamos una biblioteca más liviana sin perder compatibilidad con el ecosistema de React. Es aquí donde brilla Preact.

¿Qué es Preact?

Preact es una implementación alternativa de React con un tamaño reducido (≈3 KB comprimido y minificado). Su API es casi idéntica a la de React, lo que facilita la transición y permite usar muchas librerías del ecosistema de React sin modificaciones.

Algunas características clave:

• Usa un Virtual DOM similar al de React, pero optimizado.
• Compatible con la mayoría de los paquetes de React mediante preact/compat.
• Menor consumo de memoria y tiempos de carga más rápidos.
• Ideal para aplicaciones donde el tamaño es un factor crítico.

Instalación y uso básico

Podemos iniciar un proyecto Preact con npm:

npm init preact

Este comando instalará create-preact si no lo tienes instalado. Y te preguntará sobre qué tipo de aplicación quieres y varias opciones a escoger.

Si abrimos el archivo src/index.jsx veremos algo parecido a esto (lo hemos simplificado):

import { render } from "preact";

const App = () => <h1>Hola, Preact</h1>;

render(<App />, document.getElementById("root"));

Como puedes observar el código para una aplicación simple con Preact se parece bastante a React.

¿Cuándo elegir Preact sobre React?

No siempre es necesario cambiar de React a Preact, pero hay situaciones donde puede ser conveniente:

• Aplicaciones pequeñas o widgets embebidos, donde cada KB cuenta.
• Proyectos donde el tiempo de carga es un factor crítico.
• Sitios estáticos o generados en el servidor que solo necesitan interactividad básica.

Por otro lado, si el proyecto requiere funcionalidades avanzadas de React (como Suspense o Concurrent Mode), es posible que Preact no sea la mejor opción.

Un caso de uso perfecto para Preact es por ejemplo en una isla de Astro. Donde Preact es una dependencia de tamaño mínimo, permite carga diferida y tiene un menor consumo de memoria.

Conclusión

Preact es una excelente alternativa cuando buscamos algo más ligero que React sin perder su familiaridad. En muchos casos, la diferencia de rendimiento y tamaño del bundle puede ser significativa, lo que lo hace una opción atractiva en ciertos escenarios. Si ya trabajamos con React, probar Preact es fácil y puede ser una decisión inteligente dependiendo del contexto de nuestro proyecto.