Si React es el «avión principal» del front-end, entonces Preact siempre fue su avión deportivo ultraligero. Y salió Preact 11 Beta - y realmente tenemos una nueva ronda: Hydration 2.0, soporte de Ref y rechazo de la basura heredada. Veamos qué significa esto en palabras sencillas.
Hydration 2.0: no más papilla al inicio
La hidratación es el momento en que el HTML del servidor cobra vida en el navegador, convirtiéndose en una aplicación interactiva. React y el antiguo Preact a veces tenían errores: duplicación de nodos, extraños «tirones» al cargar.
Ahora:
El algoritmo se ha vuelto más inteligente y rápido.
La coincidencia del HTML y el estado del cliente funciona sin sorpresas.
Las aplicaciones SSR se cargan sin problemas, como si tuvieras una interfaz de usuario de mantequilla en tus manos 🧈.
Resumen: menos errores, menos muletas, más rápido first paint.
¡Por fin, soporte para Ref!
Preact siempre se ha enorgullecido de su compatibilidad con el ecosistema React, pero faltaba algo. Ahora puedes escribir:
import { useRef } from 'preact/hooks';
function App() {
const inputRef = useRef();
return <input ref={inputRef} placeholder="Write something" />;
}Las referencias funcionan de verdad, no a través de atajos. Por lo tanto, transferir el código de React se ha vuelto aún más fácil.
Adiós, legado
En la nueva versión, el equipo de Preact decidió eliminar parte del código antiguo y cuestionable:
Se eliminaron los khakis que mantenían la compatibilidad con las API antiguas.
Hemos limpiado el interior: menos convenciones y sorpresas.
El código se ha vuelto más compacto y rápido.
Resumen: menos basura, un futuro más limpio.
React vs Preact 11
¿Cuál es la diferencia entre el React clásico y el nuevo Preact 11 Beta?
Criterio | React | Preact 11 Beta |
|---|---|---|
Tamaño del paquete | ~40+ KB gzip | ~3 KB gzip |
Hydration | Clásico, con posibles fallos | Hydration 2.0, más estable y más rápido |
Refs | Asistencia completa | Ahora compatible (nuevo 🎉) |
Compatibilidad del ecosistema | 100 % (ecosistema React) | Muy alta, ahora más cerca de 1:1 |
Legacy | Mucha compatibilidad con versiones anteriores | Se eliminó lo antiguo, la base de código es más limpia |
Por qué es importante para los desarrolladores
Si tienes SSR o ISR — Hydration 2.0 proporcionará un aumento real de la calidad.
Si usas bibliotecas del mundo React - el apoyo de Ref alivia el dolor.
Si lo deseas paquete mínimo y velocidad, Preact sigue siendo el campeón.
En Codice siempre seguimos estas actualizaciones. Nuestro lema es explicar cosas complejas con palabras sencillas para que cualquiera pueda entrar en los marcos modernos sin estrés innecesario.
La aplicación tiene cursos de JavaScript y front-end, y en canal de Telegram discutimos noticias como Preact 11 Beta.
📲 Únete ¡y mejora con nosotros!