Overview

Preact implements the same component model and hooks API as React in roughly 3kB (minified + gzipped), against React+ReactDOM's ~40kB+. It ships its own virtual DOM diffing, so most React code — useState, useEffect, useRef, useMemo, JSX — runs unchanged. On top of that, @preact/signals adds fine-grained reactive state: a signal's value can be read directly in JSX, and only the DOM text node that depends on it updates, skipping Preact's own diffing for that subtree. preact/compat is a shim that maps react and react-dom imports onto Preact, so most React component libraries (synthetic-event quirks aside) work without modification.

Instructions

Install

bash

npm init preact my-app        # scaffold a new Vite + Preact project (TS/router/ESLint prompts)
cd my-app && npm install
npm run dev

To add Preact to an existing Vite project instead:

bash

npm install preact
npm install -D @preact/preset-vite

// vite.config.js
import { defineConfig } from "vite";
import preact from "@preact/preset-vite";

export default defineConfig({
  plugins: [preact()],
});

@preact/preset-vite configures the JSX pragma and automatically aliases react/react-dom to preact/compat, so React libraries work without a manual alias entry. Other bundlers (webpack, Rollup, Parcel, Jest) need the alias set by hand in their own config (resolve.alias, moduleNameMapper, etc.) pointing react and react-dom at preact/compat.

Components and Hooks

tsx

import { render } from "preact";
import { useState, useRef, useMemo } from "preact/hooks";

function TodoApp() {
  const [todos, setTodos] = useState<{ id: number; text: string; done: boolean }[]>([]);
  const [input, setInput] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

  const remaining = useMemo(() => todos.filter((t) => !t.done).length, [todos]);

  const addTodo = () => {
    if (!input.trim()) return;
    setTodos([...todos, { id: Date.now(), text: input, done: false }]);
    setInput("");
    inputRef.current?.focus();
  };

  const toggle = (id: number) =>
    setTodos(todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));

  return (
    <div>
      <h1>Todos ({remaining} remaining)</h1>
      <input
        ref={inputRef}
        value={input}
        onInput={(e) => setInput((e.target as HTMLInputElement).value)}
        onKeyDown={(e) => e.key === "Enter" && addTodo()}
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((t) => (
          <li
            key={t.id}
            style={{ textDecoration: t.done ? "line-through" : "none" }}
            onClick={() => toggle(t.id)}
          >
            {t.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

render(<TodoApp />, document.getElementById("app")!);

Signals

bash

npm install @preact/signals

tsx

import { signal, computed, effect, batch } from "@preact/signals";

// Global reactive state — no context provider needed
const count = signal(0);
const doubled = computed(() => count.value * 2);

effect(() => {
  document.title = `Count: ${count.value}`;
});

function Counter() {
  // Pass the signal itself in JSX: only this text node updates, the
  // Counter component never re-renders on count changes.
  return (
    <div>
      <p>Count: {count}</p>
      <p>Doubled: {doubled}</p>
      <button
        onClick={() =>
          batch(() => {
            count.value++;
          })
        }
      >
        +
      </button>
    </div>
  );
}

Inside a component, useSignal, useComputed, and useSignalEffect (from @preact/signals) create component-scoped equivalents of signal, computed, and effect.

Examples

Example 1: "Add a fine-grained reactive counter without re-rendering the whole app"

tsx

import { signal } from "@preact/signals";
import { render } from "preact";

const seconds = signal(0);
setInterval(() => seconds.value++, 1000);

function Clock() {
  return <p>Elapsed: {seconds}s</p>;
}

render(<Clock />, document.getElementById("app")!);

The <Clock> component itself never re-renders; Preact's signals binding patches only the text node inside the <p>.

Example 2: "Use a React charting library (Recharts) inside a Preact app"

// vite.config.js — alias is automatic with @preact/preset-vite
import { defineConfig } from "vite";
import preact from "@preact/preset-vite";

export default defineConfig({
  plugins: [preact()],
});

tsx

import { LineChart, Line, XAxis, YAxis } from "recharts";

const data = [
  { month: "Jan", revenue: 4200 },
  { month: "Feb", revenue: 5100 },
  { month: "Mar", revenue: 4800 },
];

function RevenueChart() {
  return (
    <LineChart width={400} height={240} data={data}>
      <XAxis dataKey="month" />
      <YAxis />
      <Line type="monotone" dataKey="revenue" stroke="#22c55e" />
    </LineChart>
  );
}

Recharts imports react/react-dom; with the Vite preset's automatic preact/compat alias it renders through Preact's DOM diffing with no code changes.

Guidelines

Preact dispatches native DOM events, not React's synthetic event system — event objects and a few event-timing edge cases differ from React.
Reading signal.value inside JSX text content avoids a full component re-render; destructuring a signal's .value into a local variable first loses that benefit and re-renders normally.
preact/compat covers most React libraries but not all — anything relying on React internals (react-reconciler, legacy context, some portals/suspense edge cases) may still break.
For server-side rendering, use preact-render-to-string, or a Preact-based meta-framework; don't assume a Node.js SSR setup built for React works unchanged.
Don't add @preact/signals to a project that only needs plain hooks — it's an additional dependency and mental model; reach for it when cross-component reactive state or avoiding re-renders is the actual problem.

Preact

Validation

Getting Started

Example Prompts

Documentation

Overview

Instructions

Install

Components and Hooks

Signals

Examples

Example 1: "Add a fine-grained reactive counter without re-rendering the whole app"

Example 2: "Use a React charting library (Recharts) inside a Preact app"

Guidelines

Information

Related Skills