Preact vs React: 3KB Alternative With the Same API?
3kb versus 40kb+ - Preact offers the same React API at a fraction of the size. But when is the lightweight alternative truly the better choice?
Preact is an impressive technical achievement: it offers approximately 95 percent of the React experience in just 3 kilobytes gzipped. For projects where bundle size is the decisive factor, such as embedded widgets, third-party scripts, and mobile sites for slow connections, Preact is the logical and attractive choice. React, however, is the complete package with Server Components, concurrent rendering, Suspense, and the largest ecosystem in the world. Most React libraries work via preact/compat, but edge cases and advanced features like concurrent mode and Server Components are not supported. Choose Preact when every kilobyte counts, and React when you need the full feature arsenal and ecosystem.
Background
Preact and React offer nearly identical APIs, but Preact is just 3 kilobytes gzipped compared to React's roughly 40 kilobytes. Preact achieves this by implementing a subset of React's features and using a simpler diffing algorithm. For most applications the runtime performance difference is negligible, but for embedded widgets and scripts loaded on external websites, the bundle size gap is significant. The introduction of Signals in Preact also provides a more modern state management model that enables finer-grained updates than React's standard re-render cycle with hooks.
Preact
A lightweight alternative to React at just 3 kilobytes gzipped, making it approximately 13 times smaller than React. Preact offers the same modern API as React including hooks, context, and refs, but with a dramatically smaller footprint. Via the preact/compat compatibility layer it is largely API-compatible with React, allowing many existing React libraries to be used directly without code changes. Preact also supports Signals as a modern state management primitive that enables fine-grained reactive updates without the overhead of virtual DOM diffing.
React
The most popular JavaScript library for UI development with over 40 percent market share in 2026. React 19 provides a full-featured ecosystem, concurrent features including Suspense and transitions, Server Components, and the best tooling support in the industry. The library is developed by Meta and forms the foundation for meta-frameworks like Next.js and Remix. With millions of developers worldwide, React offers the largest talent pool, the most tutorials, and the broadest selection of third-party libraries of any frontend framework.
What are the key differences between Preact and React?
| Feature | Preact | React |
|---|---|---|
| Bundle size | 3 kilobytes gzipped, making it approximately 13 times smaller than React | Approximately 40 kilobytes gzipped for React and ReactDOM together as a baseline |
| API compatibility | Largely compatible via preact/compat including hooks, context, refs, and portals | The reference API for which all React libraries and tools are built and tested |
| Concurrent features | Not supported with no concurrent mode, Suspense integration, or transitions available | Fully supported with concurrent rendering, Suspense, transitions, and streaming SSR |
| Server Components | Not supported and there is no RSC equivalent available in the Preact ecosystem | Fully supported via Next.js App Router with server and client component separation |
| Performance | Fast initial load thanks to small bundle and good runtime performance for most tasks | Heavier initial load but optimized with concurrent rendering for complex UI update scheduling |
| Signals | Native Signals support for fine-grained reactive updates without virtual DOM overhead | No native Signals, state management through hooks and external libraries like Zustand |
| Tooling | Basic support in VS Code and Cursor with more limited devtools and debugging experience | Excellent tooling including React DevTools, Profiler, and deep IDE integration everywhere |
| Community | Smaller but active community with a niche focus on performance-critical applications | The largest frontend community in the world with millions of developers and thousands of libraries |
When to choose which?
Choose Preact when...
Choose React when you need the full ecosystem including Server Components, Concurrent Mode, Suspense, transitions, and compatibility with all React libraries without limitations. React is the default choice for applications of any size where the extra 37 kilobytes of overhead is acceptable. Choose React when you are investing in long-term support, maximum community size, and the certainty that every library, tool, and tutorial works without compatibility issues or workarounds.
Choose React when...
Choose Preact when bundle size is a critical factor, particularly for embedded widgets loaded as third-party scripts on external websites. Preact's 3 kilobyte footprint matters when your code runs alongside other scripts on pages you do not control. It is also suitable for simple applications where React's advanced features like concurrent rendering and Server Components are unnecessary, and the smaller bundle directly contributes to better Core Web Vitals scores.
What is the verdict on Preact vs React?
Preact is an impressive technical achievement: it offers approximately 95 percent of the React experience in just 3 kilobytes gzipped. For projects where bundle size is the decisive factor, such as embedded widgets, third-party scripts, and mobile sites for slow connections, Preact is the logical and attractive choice. React, however, is the complete package with Server Components, concurrent rendering, Suspense, and the largest ecosystem in the world. Most React libraries work via preact/compat, but edge cases and advanced features like concurrent mode and Server Components are not supported. Choose Preact when every kilobyte counts, and React when you need the full feature arsenal and ecosystem.
Which option does MG Software recommend?
At MG Software, we choose React 19 by default for its full feature set, seamless integration with Next.js, and the certainty that all libraries and tools are fully compatible. We recommend Preact specifically for embedded widgets and scenarios where the application is loaded as a third party on external websites you do not control. In that context, the 3 kilobyte footprint is a significant advantage that has direct impact on user experience. For all other projects, React provides more value through Server Components, concurrent rendering, and the broader ecosystem. The extra 37 kilobytes are negligible overhead for most production applications.
Migrating: what to consider?
Migrating from Preact to React is typically straightforward: replace preact imports with react imports and remove the preact/compat layer. Most Preact components work directly in React without modifications. Note that some Preact-specific optimizations like Signals need to be rewritten to React hooks or external state libraries like Zustand. The reverse migration from React to Preact requires more attention: configure bundler aliases, test all third-party libraries for compatibility, and remove usage of concurrent features. Plan one to three weeks for thorough validation.
Frequently asked questions
Related articles
React vs Angular: Which Framework Should You Choose?
React or Angular? The right choice depends on your team size, project complexity, and whether you need flexible or opinionated architecture.
Vue vs React: Learning Curve, Ecosystem and the Right Fit
Vue feels more intuitive, React has the largest ecosystem. Which frontend framework matches your team experience, learning curve, and project scope?
Svelte vs React: Compile-Time Magic or Runtime Flexibility?
Svelte compiles away, React runs in the browser. Less overhead or bigger ecosystem? The trade-off every frontend developer needs to consider.
We Built Production Apps in 7 Frameworks. Here's Our Ranking
React, Next.js, Vue, Nuxt, Svelte, Angular and Astro put to the test on bundle size, developer experience and ecosystem maturity. Our honest take after shipping real projects.