Preact Islands

React-kompatible Library mit 10x kleinerer Bundle-Größe.

Überblick

Bundle-Größe: 4kb (Preact Runtime)

Preact bietet die gleiche API wie React, aber mit einem winzigen Footprint. Perfekt für Islands!

Grundstruktur

// islands/counter.jsx
import { render } from 'preact';
import { useState } from 'preact/hooks';

function CounterComponent({ title = 'Counter' }) {
  const [count, setCount] = useState(0);

  return (
    <div className="p-6 bg-white rounded-lg border">
      <h3 className="text-lg font-semibold mb-4">{title}</h3>
      <p className="mb-2">Count: {count}</p>
      <div className="flex gap-2">
        <button
          onClick={() => setCount(count - 1)}
          className="px-4 py-2 bg-gray-600 text-white rounded"
        >
          -
        </button>
        <button
          onClick={() => setCount(count + 1)}
          className="px-4 py-2 bg-blue-600 text-white rounded"
        >
          +
        </button>
      </div>
    </div>
  );
}

export default class CounterIsland {
  constructor(element, props = {}) {
    this.element = element;
    const initialData = JSON.parse(element.dataset.initialData || '{}');
    render(<CounterComponent {...initialData} {...props} />, element);
  }

  destroy() {
    render(null, this.element);
  }
}

Kernkonzepte

React-kompatible API

Preact unterstützt alle React Hooks:

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

function MyComponent() {
  const [state, setState] = useState(0);

  useEffect(() => {
    console.log('Mounted');
    return () => console.log('Cleanup');
  }, []);

  return <div>{state}</div>;
}

Hooks-Verwendung

Identisch zu React - siehe React Hooks für Details.

Vorteile

• ✅ 10x kleiner als React - 4kb vs 44kb
• ✅ Schneller - Weniger Code zum Parsen
• ✅ React API - Kein Umlernen erforderlich
• ✅ Perfekt für Islands - Kleine Bundles

Nachteile

• ❌ Einige React-Libraries - Funktionieren nicht mit Preact
• ❌ Kleine Unterschiede - Manche Edge Cases

Empfehlung

Preact ist die beste Wahl für die meisten Islands - gleiche API wie React, aber 10x kleinere Bundles.

Vollständige Beispiele

Siehe Beispiele mit Islands für vollständige Implementierungen:

• Counter - State Management
• Contact Form - Formulare mit Validierung
• Image Carousel - Intervals & Lifecycle
• Search Filter - Live Search & Filtering