Preact 11 Beta: A Modernized React Alternative

Preact, the lightweight React-compatible library, has released version 11 beta, bringing significant improvements in hydration, performance, and ecosystem alignment. This release focuses on modernization and streamlining for a more efficient development experience.

Key Improvements

Hydration 2.0: This update allows components to return zero or multiple DOM nodes during hydration, enhancing flexibility and aligning with modern rendering patterns.

Default Ref Forwarding: Functional components now receive ref props without needing forwardRef, reducing boilerplate code.

function MyComponent({ ref }) {
    return <h1 ref={ref}>Hello, world!</h1>;
}

<MyComponent ref={myRef} />;

Improved Hook Dependencies: useEffect and useState now utilize Object.is for equality checks, resolving edge cases like NaN comparisons.

Modernized Bundling: All ESM bundles are now distributed as .mjs files, adhering to current module conventions. This, along with the removal of legacy features, contributes to a smaller and more efficient bundle size. One user reported a 4KB reduction in bundle size after upgrading.

Increased Baseline Requirements: Preact 11 drops Internet Explorer 11 support and requires TypeScript 5.1 or newer, improving JSX typing and simplifying maintenance.

Removal of Legacy Features: Several legacy features have been removed, including automatic CSS px suffixing, defaultProps (moved to preact/compat), component.base, SuspenseList, and replaceNode. A comprehensive migration guide is available for upgrading from previous versions.

Under the Hood Improvements

The release also includes improvements not explicitly listed in the initial announcement, such as memory fixes, better error boundaries, and optimized rendering paths. These improvements are likely to result in even better performance.

Preact: A Lightweight React Alternative

Preact is a fast, lightweight alternative to React, ideal for performance-critical applications, PWAs, and embedded contexts. Version 11 continues to deliver this with improved performance and an updated API.

<img src="https://cdn.infoq.com/statics_s1_20250917141609/images/profiles/2PRYedPOvfl2UrYB5oV9EJyAmtLnjrtY.JPG" alt="Preact Logo">