Preact: Bundle Size, JSX & Hooks

Preact is a fast, lightweight alternative to React with a nearly identical API -- same JSX, same hooks, same component model -- but a dramatically smaller runtime (roughly 3-4KB gzipped), aimed at performance-sensitive projects.

The Same JSX, a Different Target

// This JSX...
function Greeting({ name }) {
  return <p>Hello, {name}!</p>
}

// ...compiles to h("p", null, "Hello, ", name, "!") in Preact
// (versus React.createElement(...) in React) -- same syntax,
// build tooling just targets a different function

Hooks, Just Like React

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

function Counter() {
  const [count, setCount] = useState(0)
  useEffect(() => { document.title = `Count: ${count}` }, [count])
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

// preact/hooks matches React's hooks API intentionally --
// existing React knowledge transfers directly

Reconciliation

Like React, Preact maintains a virtual DOM and diffs successive renders, applying only the minimal necessary real DOM mutations -- avoiding costly full re-renders of unchanged content.

Where the Small Footprint Matters Most

A small interactive widget embedded on an otherwise mostly-static page (a comment box, a chat widget) benefits significantly from Preact's minimal footprint -- a full React runtime would be disproportionately heavy for that limited scope.