---
title: "Preact vs React: Which Is Faster? A Practical Performance Guide"
published_at: "2022-11-29T11:58:13+00:00"
modified_at: "2026-03-31T12:09:58+00:00"
url: "https://www.syncfusion.com/blogs/post/preact-vs-react"
excerpt: "Preact is an enhanced version of React for developing faster, lightweight apps. Learn from this article the difference between Preact and React."
taxonomy_category:
  - "Development"
  - "Essential JS 2"
  - "React"
  - "Web"
taxonomy_post_tag:
  - "development"
  - "Essential JS 2"
  - "React"
  - "Web"
---

# Preact vs React: Which Is Faster? A Practical Performance Guide

[Prashant Yadav](https://www.syncfusion.com/blogs/author/prashant-yadav)

![Preact vs. React](https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Preact-vs.-React.png)


**TL;DR:** React vs Preact performance comes down to size vs capability. React is ideal for complex apps with advanced features and a rich ecosystem, while Preact delivers significantly smaller bundles (~3–4 KB) and faster load times, making it perfect for performance-critical apps, landing pages, and low-bandwidth users. Choose based on whether you need power or speed.

Choosing between Preact and React isn’t just a technical decision, it directly impacts your app’s performance, bundle size, and user experience.

If you’ve ever wondered:

- Is React too heavy for my project?
- Will Preact actually improve performance?
- Can I switch without breaking my app?

You’re not alone.

This guide breaks down the real differences between Preact and React, with a strong focus on performance, bundle size, and real-world impact, so you can confidently choose the right tool.

Preact vs React: Quick Answer

- Use React if you need advanced features like Server Components, Concurrent Rendering, and a large ecosystem
- Use Preact if you prioritize performance, smaller bundle size, and faster load times

**React** = ** ecosystem** + ** advanced capabilities**  
**Preact** = ** speed** + ** lightweight performance**

## What is React?

[React](https://react.dev/)
 is a JavaScript library for building user interfaces through composable, reusable components using JSX and Hooks.

**Where it’s used:** Single-page applications, complex dashboards, e-commerce platforms, social networks, enterprise software, and mobile apps via React Native.

### Why developers choose React

- Component composition with JSX.
- Hooks for state and side effects (`useState`, **`useEffect`**).
- Context API for dependency injection.
- Suspense for code-splitting and data fetching.
- Server Components for zero-bundle-impact server logic.
- Concurrent Rendering for prioritized updates.
- Comprehensive DevTools and profiler.


## What is Preact?

[Preact](https://preactjs.com/)
 is a 3 KB alternative to React that implements the same **component-based model**, ** JSX**, ** Hooks**, and Context while stripping away internal complexity to achieve a tiny footprint. It is not a reimplementation of React; it is a targeted fix for React’s performance and size bottlenecks. A compatibility layer ([preact/compat](https://www.npmjs.com/package/@preact/compat)
) lets you use most React libraries by aliasing imports in your bundler.

**Where it’s used:** Landing pages, marketing sites, progressive web apps, embeddable widgets, micro frontends, and any project where first-load performance is critical.

### Why developers choose Preact

- Components and JSX (identical API)
- All common Hooks (via **preact**/** hooks**)
- Context API
- Lazy loading and code-splitting
- Server-side rendering
- **preact/compat** for React ecosystem compatibility
- Preact DevTools

## React vs Preact performance: What really matters?

When comparing Preact vs React performance, the key factors are bundle size, rendering strategy, and runtime overhead.

In real-world applications, this affects:

- First load time
- JavaScript execution cost
- Core Web Vitals (**LCP**, ** TTI**)
- Performance on low-end devices

## Key differences between Preact and React

Each difference below follows the same structure: what React does, what Preact does, and the practical impact

### 1. Bundle size

- **React:** ~42 KB (** minified + gzipped**)
- **Preact:** ~3–4 KB (** minified + gzipped**)
- **Impact:** Preact is ~10× smaller, resulting in faster load times, lower parse cost, and better Core Web Vitals scores, especially on slow networks and low-end devices.

### 2. Events

- **React:** Uses a synthetic event system that wraps native browser events to normalize behavior across all browsers.
- **Preact:** Uses the browser’s native addEventListener directly, no synthetic wrapper.
- **Impact:** Preact is closer to vanilla JS behavior. Some React libraries that depend on synthetic events may behave differently.

#### Key behavioral differences in Preact:

- Use onInput instead of `onChange` on form elements
- Use `onDblClick` (standard DOM) instead of **`onDoubleClick`**
- Events do not bubble up through components

XMAL

```
// React
<input onChange={e => console.log(e.target.value)} />

// Preact
<input onInput={e => console.log(e.target.value)} />
```

### 3. Hooks

- **React:** Hooks are part of the core bundle.
- **Preact:** Hooks are separated into ** preact/hooks** to keep the core bundle minimal. Import them explicitly.
- **Impact:** No API difference, the same Hooks work the same way. Only the import path changes.

JavaScript

```
// React
import { useState, useEffect } from 'react';

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

### 4. Rendering architecture

- **React:** Uses Fiber architecture with work prioritization, can pause, resume, and interrupt renders.
- **Preact:** Uses a simple, synchronous virtual DOM diff optimized for size and speed.
- **Impact:** React handles complex, high-frequency UI updates better. Preact is faster for typical workloads that do not require Concurrent Rendering.


### 5. Native HTML attribute names

- **React:** Requires `className` instead of class, and `camelCased` attribute names to match JavaScript conventions.
- **Preact:** Follows the DOM specification, accepts class, for, and other native HTML attribute names directly in JSX.
- **Impact:** Preact lets you copy HTML from designs or mockups without converting attribute names.

XAML

```
// React
<div className="foo" />

// Preact
<div class="foo" />
```

### 6. SVG inside JSX

- **React:** SVG attributes must be `camelCased` (e.g., `strokeWidth`, `strokeLinejoin`).
- **Preact:** SVG attributes use their native names, kebab-case is supported as-is.
- **Impact:** Preact lets developers copy SVG snippets directly from design tools without manual conversion.

XMAL

```
// React
<circle fill="none" strokeWidth="2" strokeLinejoin="round" />

// Preact
<circle fill="none" stroke-width="2" stroke-linejoin="round" />
```

### 7. render() method arguments

- **React:** Class components access state and props via `this.props` and `this.state`.
- **Preact (without compat):** The `render()` method receives props and state as direct arguments.
- **Impact:** Minor convenience in Preact for class components. No difference when using ** preact/compat**.

JavaScript

```
// React (and Preact with compat)
render() {
  return <div>
    Name: {this.props.name}, Count: {this.state.count}
  </div>;
}

// Preact without compat
render({ name }, { count }) {
  return <div>
    Name: {name}, Count: {count}
  </div>;
}
```

### 8. Children API

- **React:** Provides a Children API (`Children.count`, `Children.only`, etc.) for interacting with `props.children`.
- **Preact:** Uses built-in array methods and the `toChildArray()` utility instead.
- **Impact:** No functional difference for most use cases. Libraries that use React’s Children API directly may need ** preact/compat**.

JavaScript

```
// React
const cols = Children.count(props.children);

// Preact
const cols = toChildArray(props.children).length;
```

### 9. ES module support

- **React:** Requires a bundler (** Webpack**, ** Vite**, etc.) to use in a browser.
- **Preact:** Designed with the ES module system in mind, it can be imported directly in the browser without a bundler.
- **Impact:** Preact is usable in lightweight, no-build environments.

Refer to the code example:

XAML

```
<script type="module">
  import { h, render } from 'https://unpkg.com/preact?module';
  import htm from 'https://unpkg.com/htm?module';

  const html = htm.bind(h);

  render(
    html`<h1>Hello World!</h1>`,
    document.body
  );
</script>
```

### 10. Advanced features

- **React:** Ships Server Components, Concurrent Rendering (`useTransition`, `startTransition`), advanced Suspense for data fetching, and React Native support.
- **Preact:** Does not support any of these. Suspense is limited to lazy component loading only.
- **Impact:** If your project requires any of these features, React is the only option.

## Feature comparison table

| Feature | React | Preact |
| --- | --- | --- |
| Components & JSX | ✅ Full | ✅ Full |
| Hooks | ✅ Core bundle | ✅ preact/hooks |
| Context API | ✅ Full | ✅ Full |
| Lazy loading / code-splitting | ✅ | ✅ |
| Suspense for data fetching | ✅ React 18+ | ⚠️ Limited |
| Concurrent Rendering | ✅ React 18+ | ❌ |
| Server Components | ✅ React 18+ | ❌ |
| React Native | ✅ | ❌ |
| Server-Side Rendering | ✅ | ✅ |
| TypeScript | ✅ | ✅ |
| Native HTML attributes (class) | ❌ | ✅ |
| Native SVG attributes (kebab-case) | ❌ | ✅ |
| ES modules (no bundler) | ❌ | ✅ |
| React library compatibility | ✅ Native | ✅ Via preact/compat |
| Bundle size (min+gzip) | ~42 KB | ~3–4 KB |
| DevTools | React DevTools | Preact DevTools |

## Migrating an existing React app to Preact

If you’re considering Preact for performance reasons, the good news is that migrating from React is often straightforward, especially for standard applications.

Thanks to **preact/compat**, many React apps can run with minimal changes.

### Step 1: Install Preact

npm install preact

BASH

```
npm install --save-dev @preact/preset-vite  # if using Vite
```

### Step 2: Configure bundler aliases

For Webpack, update your **`resolve.alias`** section as shown in the code example below:

JavaScript

```
"resolve": {
  "alias": {
    "react": "preact/compat",
    "react-dom/test-utils": "preact/test-utils",
    "react-dom": "preact/compat",
    "react/jsx-runtime": "preact/jsx-runtime"
  }
}
```

### Step 3: Test thoroughly

- Run your full test suite; update test setup if needed
- Test all user flows in the browser
- Check for libraries that access React internals
- Verify third-party components work correctly

### Step 4: Watch for edge cases

- **Events:** Synthetic event assumptions may need updates
- **Portals:** Mostly compatible; verify usage
- **Refs:** Should work; test forwarded refs
- **React-specific APIs:** Not all are available in Preact

### Step 5: Measure performance

Use Lighthouse, `WebPageTest`, or Core Web Vitals tools to verify bundle size reduction and performance improvements.


## Creating a fresh Preact app

If you’re starting a new project and want to take advantage of Preact’s performance benefits from the beginning, setting up a new app is quick and straightforward.

Preact provides an official CLI that helps you scaffold projects with minimal setup.

BASH

```
npm install -g preact-cli
preact create default my-project
```

### Available templates

Preact CLI includes multiple templates to suit different project needs:

| Template | Description |
| --- | --- |
| default | Standard Preact setup |
| simple | Blank setup with vanilla JS |
| typescript | Setup with TypeScript |
| material | Material Design template |
| netlify | Netlify CMS template |
| widget | Embeddable widget setup |

## Developer experience

|  | Strengths | Challenges |
| --- | --- | --- |
| React | Comprehensive docs with interactive examples.Excellent error messages with actionable guidance.React DevTools: component tree, props, profiler.First-class framework support (Next.js, Remix).Large community: tutorials, courses, Stack Overflow. | Larger bundle requires careful code-splittingMore concepts to learn (RSC, Concurrent patterns)Can be overkill for simple projects |
| Preact | Familiar API if you know ReactFast dev builds and HMR due to tiny coreLess abstraction makes debugging simplerWell-documented with a built-in CLI | Smaller community — fewer tutorials and examplesSome React libraries have compatibility quirksMissing advanced React features may need workaroundsPreact DevTools less polished than React DevTools |

|  | Pros | Cons |
| --- | --- | --- |
| React | Massive ecosystem and communityAdvanced features (RSC, Concurrent Mode)Best-in-class framework integrationReact Native for mobile developmentExcellent documentation and error messagesLarge talent pool and hiring market | Larger bundle (slower first load)More complex mental modelSteeper learning curve for advanced patternsCan be overkill for simple projects |
| Preact | Tiny bundle (~3 KB vs ~42 KB)Faster loading, parsing, and renderingReact-like API — minimal relearningWorks with most React libraries via compatExcellent for performance-critical appsSimple mental model | No Server Components or Concurrent featuresNo React Native supportSmaller community and ecosystemOccasional compatibility quirksLess advanced tooling and framework support |

## Decision guide

| Use case | Recommended | Reason |
| --- | --- | --- |
| Large enterprise application | React | Advanced features, ecosystem, long-term support |
| Landing page or marketing site | Preact | Fast load times critical for conversion |
| Complex dashboard with real-time updates | React | Concurrent Rendering handles complexity better |
| Blog or documentation site | Preact | Simple architecture; speed matters for SEO |
| E-commerce product page | Preact | LCP and Core Web Vitals directly impact sales |
| Social media platform | React | Scale, ecosystem, potential React Native mobile app |
| Embeddable widget | Preact | Must be tiny to avoid slowing down the host page |
| Progressive Web App (PWA) | Preact | Bundle size critical for offline caching |
| Mobile app with React Native | React | Only React supports React Native |
| Server-rendered app with RSC | React | Server Components are React-only |
| Targeting slow networks / low-end devices | Preact | Every kilobyte matters |
| Team with deep React expertise | React | Leverage existing knowledge and hiring pool |

## Frequently Asked Questions

Can I switch from React to Preact later?Yes. Add bundler aliases pointing to preact/compat and test your application. Many projects migrate with minimal code changes. Complex apps using React internals may require more work.

Do all React libraries work with Preact?Most do via preact/compat, but not all. Libraries that access React internals, depend on synthetic events, or use experimental features may need adjustments. Test critical dependencies before committing to migration.

Is Preact production-ready?Yes. Preact is mature, stable, and used in production by companies prioritizing performance. Uber is a notable example. It is well-maintained despite having a smaller community than React.

Does bundle size really matter?Yes, especially for users on slow networks, low-end devices, emerging markets, and projects where Core Web Vitals are SEO ranking factors. Speed directly impacts conversion rates and business metrics.

Can I use Next.js with Preact?Not directly. Next.js is built for React and uses React-specific features. For Preact SSR, use Preact CLI, Vite SSR, or a custom server-rendering setup.


## Conclusion

When comparing React vs Preact performance, the right choice ultimately depends on your project’s priorities.

Both libraries share the same core principles, component-based architecture, and Hooks, but they optimize for different goals:

- Choose React for large-scale applications, advanced rendering capabilities, and access to a vast ecosystem
- Choose Preact for performance-critical applications, faster load times, and smaller bundle sizes

In short, React offers flexibility and scalability, while Preact delivers speed and efficiency.

Instead of choosing based on popularity, focus on what your application truly needs, performance, features, or long-term scalability.

If you’re building modern web applications with React, [Syncfusion Essential Studio® for React](https://www.syncfusion.com/react-ui-components)
 provides a comprehensive suite of high-performance, lightweight, and production-ready UI components to accelerate development.

Explore Syncfusion React components to build faster, more efficient applications.

For questions or support, feel free to connect with us through our [support forum](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com/)
, or [feedback portal](https://www.syncfusion.com/feedback)
.