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
Can I use React libraries with Preact?
Yes, via preact/compat most React libraries are compatible with Preact. Popular libraries like React Router, Redux, Zustand, and TanStack Query generally work without issues. Some libraries that use concurrent features, Server Components, or internal React APIs are not compatible, however. Always test thoroughly before depending on a library in a Preact context to avoid silent failures.
Is Preact faster than React?
Preact has a faster initial load time thanks to its dramatically smaller bundle size of 3 kilobytes versus approximately 40 kilobytes. Runtime performance is comparable for most tasks, though React with concurrent rendering can better prioritize complex UI updates and split long tasks. Preact's Signals offer finer-grained updates without re-rendering entire component trees, providing a different performance advantage.
Can I migrate an existing React project to Preact?
Yes, migration is relatively straightforward by installing preact/compat and configuring bundler aliases so react points to preact. Most code works unchanged, but test thoroughly for incompatibilities with advanced React features like Suspense, concurrent mode, and Server Components. Plan one to two weeks for validation and edge case testing across your full application.
What are Preact Signals?
Signals are a reactive state management primitive in Preact that enables fine-grained updates without needing to diff the virtual DOM. When a Signal changes, only the components that use that Signal are re-rendered. This is more efficient than React's model where state changes by default re-evaluate the entire component tree. Signals are a distinguishing advantage of Preact over React for reactive patterns.
How much smaller is Preact than React exactly?
Preact is approximately 3 kilobytes gzipped compared to React's approximately 40 kilobytes gzipped for React and ReactDOM together. That is a factor of roughly 13 times smaller. For regular web applications this difference is negligible, but for embedded widgets, third-party scripts, and mobile sites where every kilobyte counts, it is significant. Modern bundlers and tree-shaking reduce the practical difference.
Does Preact support TypeScript?
Yes, Preact offers full TypeScript support with included type definitions. The API is nearly identical to React so TypeScript code is largely interchangeable between the two. Some React-specific types like ConcurrentMode or ServerComponent are not available in Preact. The developer experience with TypeScript in Preact is good but slightly less polished than React's TypeScript integration.
Is Preact suitable for a production application?
Yes, Preact is used in production by companies including Etsy, Uber, and other major organizations for specific use cases. It is a stable and mature library with active maintenance and regular releases. For embedded widgets and performance-critical applications it is an excellent choice. For full web applications where you want the complete React ecosystem, however, React remains the safer and more comprehensive option.
We build production software with this stack
Our developers work with these tools daily for clients across Europe. Price estimate within 24 hours.
Discuss your project