Preact is an implementation of the virtual DOM component paradigm just like React and many other similar libraries. Unlike React, it's only 3KB in size, and it also outperforms it in terms of speed. It's created by Jason Miller and available under the well-known permissive and open-source MIT license.
Preact is a lightweight version of React. You may prefer to use Preact as a lightweight alternative if you like building views with React but performance, speed and size are a priority for you — for example, in the case of mobile web apps or progressive web apps.
Whether you're starting a new project or developing an existing one, Preact can save you a lot of time. You don't need to reinvent the wheel trying to learn a new library, since it's similar to, and compatible with, React — to the point that you can use existing React packages with it with only some aliasing, thanks to the compatibility layer preact-compat.
Features and API: Preact includes only a subset of the React API, and not all available features in React.
Size: Preact is much smaller than React.
Performance: Preact is faster than React.
Every library out there has its own set of pros and cons, and only your priorities can help you decide which library is a good fit for your next project. In this section, I'll try to list the pros and cons of the two libraries.
Preact is lightweight, smaller (only 3KB in size when gzipped) and faster than React (see these tests). You can also run performance tests in your browser via this link.
Preact is largely compatible with React, and has the same ES6 API as React, which makes it dead easy either to adopt Preact as a new library for building user interfaces in your project or to swap React with Preact for an existing project for performance reasons.
It has good documentation and examples available from the official website.
It has a powerful and official CLI for quickly creating new Preact projects, without the hassle of Webpack and Babel configuration.
Many features are inspired by all the work already done on React.
It has also its own set of advanced features independent from React, like Linked State.
React supports one-way data binding.
It's backed by a large company, Facebook.
Good documentation, examples, and tutorials on the official website and the web.
Used on Facebook's website, which has millions of visitors worldwide.
Has its own official developer debugging tools extension for Chrome.
It has the Create React App project boilerplate for quickly creating projects with zero configuration.
It has a well-architectured and complex codebase.
As a result of its complex codebase, it's harder for novice developers to contribute.
Note: Another con I listed while writing this article was that React had a grant patent clause paired with the BSD license, making it legally unsuitable for some use cases. However, in September 2017, the React license switched MIT, which resolved these license concerns.
Preact supports only stateless functional components and ES6 class-based component definition, so there's no createClass.
No support for React propTypes.
Preact CLI is a command line tool created by Preact's author, Jason Miller. It makes it very easy to create a new Preact project without getting bogged down with configuration complexities, so let's start by installing it.
This will install the latest version of Preact CLI, assuming you have Node and NPM installed on your local development machine.
This will start a live-reload development server.
After successfully installing the Preact CLI and generating an app, let's try to understand the simple app generated with the Preact CLI.
The components folder holds Preact components, and the routes folder holds the page components used for each app's route. You can use the lib folder for any external libraries, the style folder for CSS styles, and the assets for icons and other graphics.
Note the manifest.json file, which is like package.json but for PWAs (progressive web apps). Thanks to the Preact CLI, you can have a perfect-score PWA out of the box.
As you can see, index.js imports styles, and App component from ./components/app**, and then just exports it as the default.
This file exports a default class App which extends the Component class imported from the preact package. Every Preact component needs to extend the Component class.
App defines a render method, which returns a bunch of HTML elements and Preact components that render the app's main user interface.
Inside the div element, we have two Preact components, Header — which renders the app's header — and a Router component.
The Preact Router is similar to the latest version of React Router (version 4). You simply need to wrap the child components with a <Router> component, then specify the path prop for each component. Then, the router will take care of rendering the component, which has a path prop that matches the current browser's URL.
The preact-compat module allows developers to switch from React to Preact without changing imports from React and ReactDOM to Preact, or to use existing React packages with Preact.
Preact is a nice alternative to React. Its community is growing steadily, and more web apps are using it. So if you're building a web app with high-performance requirements, or a mobile app for slow 2G networks, then you should consider Preact — either as the first candidate view library for your project, or as a drop-in replacement for React.