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

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 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.

Syncfusion React UI components are the developers’ choice to build user-friendly web applications. You deserve them too.

Explore Now

What is Preact?

Preact 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) 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

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

// 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.

// 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.

All Syncfusion’s 70+ React UI components are well-documented. Refer to them to get started quickly.

Read Now

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.

// 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.

// 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.

// 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.

// 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:

<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

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

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:

"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.

Be amazed exploring what kind of application you can develop using Syncfusion React components.

Try Now

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.

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

Available templates

Preact CLI includes multiple templates to suit different project needs:

Developer experience

Decision guide

Explore the endless possibilities with Syncfusion’s outstanding React UI components.

Try It Free

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 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, support portal, or feedback portal.