React is not the only library that implements a virtual DOM to solve the problem of updating the browser DOM (as it is theoretically slower than the virtual one), however is by far the most popular. Being the most popular means that a lot of open source contributors work in the project and there are more public components that can be implemented inside your application. This is clearly a reason why you should use React instead of another library of this type, however what if I told you that you can still use most of the react components with another library, that works the same and it's extremely lightweight in comparison with React? It exists, and the project name is Preact.
What is Preact?
Preact is a very fast React alternative with the same ES6 API, handles Components, Virtual DOM and only weighs 3KB. If you are worried about the React's size and performance, you should consider using a Preact as a "clone library", that claims to have a better performance and besides, it's extremely lightweight.
Preact exports a generic Component class, which can be extended to build encapsulated, self-updating pieces of a User Interface. Components support all of the standard React lifecycle methods, like shouldComponentUpdate() and componentWillReceiveProps(). Providing specific implementations of these methods is the preferred mechanism for controlling when and how components update.
Moving from React to Preact
The most important point of React is the awesome Job that a component does. You can use it from anyone everywhere and whenever you want inside your project. Although not all the React components are compatible with Preact, it's possible to make it compatible using a React Compatibility Layer. It is surprising that all that you need to do is to install preact and preact-compat, remove react and add is an alias in Webpack and that's it.
That's one of the most awesome features of Preact, because as mentioned, here's an example project that uses preact-compat to work with an existing React library unmodified, achieving more than 95% reduction in size (that's a lot buddy). We're sure that if you really care about your application bundle size, preact will be now your BFF. It's worth to say that if you are willing to move to Preact from an existent React project, you need to make sure to test your app thoroughly before switching, as you may lose some features of React (that can be compensated with the performance of the app itself). The reason Preact does not attempt to include every single feature of React is in order to remain small and focused - otherwise it would make more sense to simply submit optimizations to the React project, which is already a very complex and well-architected codebase.
Debugging with Preact
You can inspect and modify the state of your Preact UI components at runtime using the React Developer Tools browser extension.
- Install the React Developer Tools extension
- Import the "
preact/devtools" module in your app - Reload and go to the 'React' tab in the browser's development tools
Contributing to Preact
Preact is open to pull-request and any kind of support. You can support the project with a monthly donation and help them to continue with their activities. Don't forget to visit the official repository at Github for more information about the library.
