Preact
02 / 02

Preact: preact/compat, Trade-offs & Migration

Preact: preact/compat, Trade-offs & Migration

preact/compat

preact/compat is a compatibility layer letting many existing React libraries/components run on Preact's core with minimal or no changes -- shims React-specific APIs onto Preact's leaner implementation, easing migration from an existing React codebase.

Migrating a Bundler Config

// webpack/vite resolve alias
resolve: {
  alias: {
    react: 'preact/compat',
    'react-dom': 'preact/compat',
  },
}

// Often lets an existing React app run on Preact's smaller
// runtime with comparatively few code changes

Preact Signals: Fine-Grained Reactivity

Preact Signals, from the Preact team, offers a state primitive with fine-grained reactive updates -- updating only the specific DOM parts that depend on a changed signal -- as a complementary option alongside traditional hooks-based state.

When React Might Still Be the Better Choice

For a large app where bundle size isn't the binding constraint, and dependencies lean heavily on React-only behaviors not fully covered by preact/compat, React's broader ecosystem maturity can be the more pragmatic choice -- the trade-off is deliberate, not automatic.

Evaluating the Actual Benefit

If the React runtime itself is only a small fraction of a large app's overall bundle (dominated by business logic and other dependencies), switching to Preact may yield a smaller relative improvement than it would for a genuinely small, focused widget.

Keep your own version of these notes — editable, searchable, and organised by your stack.

Start free