Skip to content
Noroff Case Studies

Preact Case Study

Author: Senbet

Project Logo

Introduction

Preact was created by Jason Miller, aiming to provide a faster and smaller alternative to React. Designed to offer similar functionality with a significantly smaller footprint. Its primary focus is on speed, efficiency, and compatibility with existing React libraries, making it an attractive choice for performance-critical applications.

Main Features

  • Lightweight: Approximately 3KB when minified and compressed with gzip.

  • Fast Virtual DOM: Optimized diffing algorithm for high performance.

  • React Compatibility: preact/compat enables easy migration.

  • Built-in Hooks: Supports React-style hooks for state management.

  • SSR Support: Optimized for server-side rendering.

| ----------------- | --------------------------------------------------- |

Size Preact is extremely lightweight at around 3KB when minified and gzipped. This compact size is ideal for performance-focused applications, enhancing load times and responsiveness. By minimizing JavaScript, Preact improves initial load speeds and reduces memory usage, making it perfect for mobile and bandwidth-limited environments.

Compatibility: Preact’s preact/compat module lets you use React components in Preact applications easily. To set it up, first install preact and preact/compat. Then, update your build tool to redirect react and react-dom to preact/compat. This setup allows you to gradually switch to Preact while still using your existing React components and libraries, making the transition smooth and straightforward.

Hooks Preact supports React-style hooks like useState and useEffect, enabling efficient state management and side effects. This support allows developers to build dynamic UIs using familiar patterns. Preact’s hook implementation is optimized for performance, ensuring applications remain fast and responsive.

Standard HTML Attributes Preact uses standard HTML attributes like class and for, aligning with traditional HTML practices. This makes Preact more intuitive for developers, enhancing code readability and maintainability. Unlike React, which uses className and htmlFor, Preact allows developers to use familiar HTML attributes directly.

//Preact
<div class="foo" />


//React
<div className="foo" />

SSR Support Preact is designed to work well with server-side rendering (SSR), which helps improve both performance and search engine optimization (SEO). SSR speeds up the initial loading of web pages and enhances the user experience. Preact’s efficient process ensures that the page becomes interactive quickly, making it a great choice for applications that need fast content delivery and better search engine ranking.

Getting Started

  1. Install Preact:
Terminal window
npm install preact
  1. Create a simple component:
import { h, render } from "preact";


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


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

Preact vs React

  • Ecosystem: Compared to React, preact does not have as big eco-system or community support and has limited enterprise adoption.

  • Use case: Preact shines in mobile-first performance applications, while React remains superior for large-scale, complex applications.

  • Performance: Preact enhances performance by avoiding the use of synthetic event system. Unlike React, Preact relies directly on the browser’s built in event handling. This makes Preact more efficient and does not add an extra layer of event management, therefore handles user interactions more swiftly.

  • Bundle Size: Preact is significantly smaller (~3KB) compared to React (~40KB). This makes Preact ideal for performance-sensitive applications where minimizing JavaScript payload is crucial.

  • Support: React has continuous development and backing from Meta, ensuring long-term improvements. Preact is community-driven and may not receive updates as frequently.

Conclusion

Preact is a fast and React-compatible framework, ideal for performance-sensitive applications. While it lacks some React features, it provides an excellent alternative where size and speed are priorities. Since the introduction of Preact, React has made significant improvements in performance and bundle size over the years. But still in terms of size Preact still remains the lightweight option.

The choice between React and Preact depends on your project’s requirements. If you need a lightweight, high-performance solution and are comfortable with a smaller ecosystem Preact is an excellent choice. However, if you prefer a mature library with extensive community support and a wide range of tools, React might be more suitable.

References