If React is the "main boeing" of the frontend, then Preact was always his ultra-light sports plane. And now Preact 11 Beta - and we have a really new round: Hydration 2.0, Ref support and abandonment of legacy junk. Let's see what this means in simple words.
Hydration 2.0 — no more porridge at the start
Hydration is the moment when HTML from the server comes to life in the browser, turning into an interactive application. React and the old Preact sometimes had bugs: duplication of nodes, strange "jerking" when loading.
Now:
The algorithm has become smarter and faster.
The match between HTML and client state works without surprises.
SSR applications load smoothly, as if you have a butter-UI in your hands 🧈.
Summary: fewer bugs, fewer crutches, faster first paint.
Ref support — finally!
Preact has always been proud of its compatibility with the React ecosystem, but something was missing. Now you can write:
import { useRef } from 'preact/hooks';
function App() {
const inputRef = useRef();
return <input ref={inputRef} placeholder="Write something" />;
}Refs work for real, not through workarounds. So, transferring code from React has become even easier.
Goodbye, legacy
In the new version, the Preact team decided to throw away some of the old, questionable code:
Removed hacks that kept backward compatibility with old APIs.
We cleaned up the insides: fewer conventions and surprises.
The code has become more compact and faster.
Summary: less junk — cleaner future.
React vs Preact 11
What is the difference between the classic React and the fresh Preact 11 Beta:
Criterion | React | Preact 11 Beta |
|---|---|---|
Bundle size | ~40+ KB gzip | ~3 KB gzip |
Hydration | Classic, with possible glitches | Hydration 2.0, more stable and faster |
Refs | Full support | Now supported (new 🎉) |
Ecosystem compatibility | 100% (React ecosystem) | Very high, now closer to 1:1 |
Legacy | Lots of backward compatibility | Cut off the old stuff, cleaner code base |
Why this is important for developers
If you have SSR or ISR — Hydration 2.0 will give a real increase in quality.
If you use libraries from the React world - Ref support relieves pain.
If you want minimum bundle and speed — Preact remains the champion.
In Codice we always keep track of such updates. Our motto is to explain complex things in simple words so that anyone can roll into modern frameworks without unnecessary stress.
The application has courses on JavaScript and frontend, and in Telegram channel we discuss news like Preact 11 Beta.
📲 Join us and level up with us!