The Preact team announced Preact X, adding significant updates such as fragments and hooks to their React alternative, while retaining their lean size of less than 4KB, gzipped.
Fragments are the most significant addition to Preact X, and were one of the main drivers for rethinking Preact's architecture. Fragments render child elements inline with their parent without a wrapping DOM element, fixing many of the challenges and edge cases found in earlier versions of Preact. Fragments also allow for returning multiple nodes from a render function.
Similar to React hooks and tng-hooks, Preact hooks provide a way to share logic more easily between components. To leverage hooks in Preact, developers should import the preact/hooks module. Note that Preact hooks are not part of the core 3.5KB, but this module does not add significantly to the size of Preact.
Preact also improves error handling within lifecycle methods such as render with the new componentDidCatch method. Using componentDidCatch allows Preact developers to handle lifecycle exceptions, display user-friendly error messages, and log entries to an external logging service.
Preact X introduces createContext, a successor to getChildContext(), providing a pub/sub solution for delivering property updates down the rendering tree. Previously an intermediate component changing its value would invalidate and limit the efficacy of delivering updates deeper down the virtual DOM tree.
Preact X also now directly supports CSS Custom Properties for styling Preact components.
To learn more about Preact X and the design philosophy behind Preact, watch Preact team member Marvin Hagemeister's recent talk, The Art of deleting Code.
Beyond its core rendering capabilities, Preact supports server-side rendering, web components, and PWAs.
Preact is open source software that is available under the MIT license. Contributions are welcome via the Preact GitHub repo following the Preact contribution guidelines and the Contributor covenant code of conduct.
