Preact Technology Intelligence

What is Preact?

Preact is a fast 3KB alternative to React with the same modern API. It provides the thinnest possible Virtual DOM abstraction on top of the DOM, achieving maximum performance while remaining compatible with React's ecosystem through a compatibility layer.

Created by Jason Miller in 2015, Preact was designed to deliver React's component model without the file size overhead. At just 3KB gzipped compared to React's 40KB+, Preact excels in performance-critical scenarios and resource-constrained environments. Companies including Uber, Lyft, and Pepsi use Preact in production, often as a React replacement for better Core Web Vitals scores.

Key Features

Size and Performance

• 3KB Size: Minimal bundle impact
• Fast Diff: Efficient Virtual DOM algorithm
• Direct DOM: Closer to the metal
• Memory Efficient: Less runtime overhead

React Compatibility

• preact/compat: React API compatibility layer
• Alias React: Use React libraries directly
• Hooks: Full hooks support
• Context: Context API included

Modern Features

• Signals: Fine-grained reactivity (@preact/signals)
• Fragment: Multiple root elements
• Error Boundaries: Component error handling
• Refs: DOM and component references

Developer Experience

• Preact DevTools extension
• TypeScript support
• Hot Module Replacement
• Create Preact App CLI

Use Cases

Embedded Widgets

Third-party widgets embedded on customer sites use Preact for minimal footprint. The small bundle size means widgets don't significantly impact host page performance.

Mobile Web Performance

Mobile-first websites replace React with Preact for faster loading on constrained networks. The reduced JavaScript size improves Time to Interactive metrics.

Progressive Web Apps

PWAs targeting low-end devices and emerging markets use Preact. The performance characteristics suit environments where every kilobyte matters.

React Project Migration

Existing React projects migrate to Preact for performance gains. The compatibility layer allows gradual migration while maintaining existing component libraries.

Advertising and Marketing

Ad tech and marketing platforms use Preact for interactive ad units. Size constraints for ad delivery make Preact's footprint essential.

IoT Dashboards

Interfaces running on embedded browsers and IoT devices choose Preact. Limited memory and processing power suit Preact's efficiency.

Code Examples

Basic Component

import { h, render } from 'preact';
import { useState } from 'preact/hooks';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(c => c + 1)}>
            Count: {count}
        </button>
    );
}

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

With Signals

import { signal, computed } from '@preact/signals';

const count = signal(0);
const double = computed(() => count.value * 2);

function Counter() {
    return (
        <div>
            <p>Count: {count}</p>
            <p>Double: {double}</p>
            <button onClick={() => count.value++}>Increment</button>
        </div>
    );
}

React Compatibility

// vite.config.js or webpack alias
{
    resolve: {
        alias: {
            'react': 'preact/compat',
            'react-dom': 'preact/compat',
            'react-dom/test-utils': 'preact/test-utils',
            'react/jsx-runtime': 'preact/jsx-runtime'
        }
    }
}

// Now React libraries work with Preact
import { useState } from 'react'; // Actually imports from Preact

Custom Hook

import { useState, useEffect } from 'preact/hooks';

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch(url)
            .then(r => r.json())
            .then(data => {
                setData(data);
                setLoading(false);
            });
    }, [url]);

    return { data, loading };
}

Comparison and Ecosystem

Preact vs React

• Size: Preact 3KB, React 40KB+
• Performance: Preact faster in benchmarks
• API: Nearly identical with compat layer
• Ecosystem: React larger, Preact compatible
• Synthetic Events: React yes, Preact no

Differences from React

• No synthetic event system
• class instead of className works
• Props spread directly to DOM
• Some lifecycle differences

Ecosystem

• Preact CLI: Project scaffolding
• @preact/signals: Fine-grained reactivity
• preact-router: Simple routing
• wmr: Development tool

When to Choose Preact

• Bundle size critical
• Performance-sensitive applications
• Embedded widgets
• React compatibility needed

When to Use React Instead

• Complex synthetic event needs
• Maximum ecosystem compatibility
• Team expertise in React
• React Native targets