Preact vs React
Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.
Open source · MIT
A small (about 4kB) React-style library for building user interfaces in JavaScript.
Open source · MIT
A JavaScript library for building interactive user interfaces out of reusable components.
The short answer
Choose Preact if you need…
- Web developers who already know React and want a lighter library
- Projects where small bundle size matters, such as pages loaded over slow connections
- Teams that want an optional compatibility alias (preact/compat) to reuse React-based code
- Developers building apps that need server-side rendering with hydration
Choose React if you need…
- Developers building interactive web interfaces with JavaScript
- Teams adding React gradually to an existing project, as the README describes
- Developers who want to reuse the same component model for mobile apps via React Native
- Students learning how modern front-end UIs are structured
Side-by-side
| Preact | React | |
|---|---|---|
| Type | Library | Library |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 39k | 252k |
| Setup difficulty | Intermediate | Intermediate |
| How you get it | Install with a package manager | Install with a package manager |
| Main language | JavaScript | JavaScript |
| Last code update | 4 days ago | 6 days ago |
What each one is
Preact
Preact is a JavaScript library for building user interfaces out of reusable components, using an API that closely follows React. The README describes it as a fast, roughly 4kB alternative to React with a similar modern API, covering components, hooks, JSX, and a virtual DOM. Developers use it when they want React-style code with a much smaller download size.
React
React is a JavaScript library for building user interfaces. You describe what the screen should look like for each state of your data, and React updates and redraws only the parts that change. It is built around components, small self-contained pieces of UI that you combine into larger screens. The README also says React can render on the server with Node and power mobile apps through React Native.
Best for
Preact
- Web developers who already know React and want a lighter library
- Projects where small bundle size matters, such as pages loaded over slow connections
- Teams that want an optional compatibility alias (preact/compat) to reuse React-based code
- Developers building apps that need server-side rendering with hydration
React
- Developers building interactive web interfaces with JavaScript
- Teams adding React gradually to an existing project, as the README describes
- Developers who want to reuse the same component model for mobile apps via React Native
- Students learning how modern front-end UIs are structured
Strengths
Preact
- Very small size (the README states about 4kB), which helps page load time
- Familiar React API, including class components, hooks, and functional components
- MIT licensed with a large community and many stars on GitHub
React
- Declarative views make code easier to predict and debug, according to the README
- Adopts incrementally, so it can be added to an existing project without rewriting it
- Large, active project with an MIT license and a documented site at react.dev
Not ideal for
Preact
- Complete beginners who have never written JavaScript; the README assumes familiarity with components and modern JS syntax
- Projects that depend on React-only libraries without testing compatibility, since the README only describes compatibility as 'extensive' via an alias and does not list limits
- Native mobile app development, which the README does not mention
React
- People who want a complete, opinionated framework with routing and data fetching built in, since the README says React makes no assumptions about the rest of your stack and points to a separate toolchain for new projects
- Non-programmers looking for a no-code website builder
Trade-offs
Preact
- The README is truncated and gives limited detail on edge-case React compatibility
- Some React ecosystem libraries may need the compat layer or may not work fully
- Tooling such as DevTools and HMR depends on additional setup that the README only briefly mentions
React
- It is a UI library only, so you must choose and add other tools for routing, data, and build setup
- The README's examples use JSX, a syntax extension that adds a learning step, though the README notes JSX is not strictly required
Getting started
React
Install React and React DOM from npm
npm install react react-domFrequently asked questions
What is the difference between Preact and React?
Preact: A small (about 4kB) React-style library for building user interfaces in JavaScript. React: A JavaScript library for building interactive user interfaces out of reusable components. Preact suits web developers who already know react and want a lighter library, while React suits developers building interactive web interfaces with javascript.
Are Preact and React free?
Preact: Free and open source. React: Free and open source.
Is Preact or React more popular?
React has more GitHub stars (252k) than Preact (39k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to Preact and React?
Other options people compare them with include Inferno, Million.js, Mithril, MDX, reactstrap.
Keep comparing
Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.