Preact | Glossaire

Preact is an ultra-lightweight JavaScript library that replicates React's API in just 3KB (gzipped). Designed to deliver the same modern features as React with a minimal footprint, Preact positions itself as the ideal solution for projects requiring maximum performance and reduced loading times. Compatible with the React ecosystem, it enables progressive migration while ensuring a familiar developer experience.

Fundamentals of Preact

3KB library offering a nearly identical API to React with components, hooks, and Virtual DOM
Optimized architecture prioritizing runtime performance and fast execution across browsers
React ecosystem compatibility via preact/compat enabling use of most existing libraries
Pragmatic approach using native DOM events directly rather than a synthetic event system

Benefits of Preact

Tiny size (3KB) drastically reducing initial load time and improving Core Web Vitals
Superior performance through optimized Virtual DOM and efficient update management
React compatibility allowing reuse of skills, components, and ecosystem libraries
Low memory consumption ideal for mobile devices and limited connections
Modern API including hooks, fragments, portals, and all essential React features

Practical Preact Application Example

app.tsx

import { render } from 'preact';
import { useState, useEffect } from 'preact/hooks';
import { signal, computed } from '@preact/signals';

// Using Signals for optimal reactivity
const count = signal(0);
const doubled = computed(() => count.value * 2);

function Counter() {
  const [items, setItems] = useState<string[]>([]);

  useEffect(() => {
    // Fetch data with performance tracking
    const start = performance.now();
    fetch('/api/items')
      .then(res => res.json())
      .then(data => {
        setItems(data);
        console.log(`Loaded in ${performance.now() - start}ms`);
      });
  }, []);

  return (
    <div class="counter">
      <h1>Counter: {count.value}</h1>
      <p>Doubled: {doubled.value}</p>
      <button onClick={() => count.value++}>
        Increment
      </button>
      <ul>
        {items.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
}

render(<Counter />, document.getElementById('app')!);

This example demonstrates Preact usage with Signals for ultra-performant state management. Note the 'class' attribute instead of 'className', reflecting Preact's closer-to-native-DOM approach. Hooks work exactly like in React, ensuring zero learning curve for React developers.

Implementing Preact

Initialize a project with 'npm create preact@latest' or migrate from React using preact/compat
Configure bundler (Vite, Webpack) with appropriate aliases to replace React with Preact
Develop components using standard Preact API or Signals for optimal reactivity
Integrate preact/compat only for third-party dependencies requiring full React
Optimize with production mode and analyze final bundle to ensure minimal size
Test performance with Lighthouse and measure Time to Interactive improvements
Deploy with appropriate caching strategy to maximize benefits of small size

Pro Tip

Use @preact/signals instead of useState for complex state: this fine-grained reactivity primitive avoids unnecessary re-renders and can improve performance up to 70% on rich interfaces. Signals update automatically without going through the Virtual DOM, offering near-native reactivity.

Preact Tools and Ecosystem

Preact CLI: scaffolding tool with optimal configuration and PWA by default
preact/compat: compatibility layer enabling use of existing React libraries
@preact/signals: ultra-performant fine-grained reactivity system
Preact DevTools: browser extension for debugging components and performance
Fresh: full-stack framework based on Preact with islands architecture and zero JavaScript by default
WMR: lightweight bundler specially optimized for Preact with instant HMR

Preact represents the optimal choice for teams seeking to maximize performance while maintaining React's productivity. Its minimal footprint translates directly into measurable Core Web Vitals improvements, better SEO, and superior user experience, particularly on mobile. For Progressive Web Apps, performance-sensitive e-commerce sites, or any project where every kilobyte counts, Preact offers immediate ROI in terms of conversion and user engagement.