Using Preact Instead Of React

If you are concerned about React’s size and performance (especially for mobile-web apps), there are several React clone libraries that have exact same APIs as React but with tiny size and claim to perform better than React. Preact is one such library.

As for as the performance goes (for a Todo app), it looks pretty AMAZING! Almost same as Mithril is just incredible!

https://developit.github.io/preact-perf/

You can run the perf test in your own browser by going here

So I was curious to see how well it worked for my demo app (live). Mainly I wanted to see:

1. How easy it was to swap React w/ Preact.
2. If it all the features in my app that use other libs like redux, redux-forms and so on, still work.
3. How much smaller the overall size reduces.
4. How much better it performs

Here are the results:

1. How easy it was to swap React w/ Preact.

It was surprising to see that all I had to do was to install preact and preact-compat. Then simply add preact-compat as an alias to React and React-DOM in Webpack!

Note preact-compat is a 2kb layer on top of preact (3kb) that makes Preact a drop-in replacement.

1. npm install -save preact preact-compat
2. Add alias like below:

2. If all the features in my app still work

I don’t have tests in my app but since my app is small, I manually tested it and everything worked!

I also tried react-lite but it threw bunch of errors for my app. So I won’t recommend it.

3. How much smaller the app became?

The gzip size went down from 91.8kb(React) to 58.2kb(Preact). Actual code went down from 379kb(React) to 263kb(Preact).

React

Preact

4. How much better my app performs

I couldn’t tell the difference because my app is so tiny. I’d imagine it would probably be similar to Todo app.

BONUS:

1. Preact is so small, you can actually read its code much more easily than React’s! It’s pretty cool!
2. Preact comes with some nifty features like Linked State and so on.

CAUTION:

1. Make sure to test your app thoroughly before switching over.

2. You may lose some capabilities of React.

But if your app works better with Preact, then why not?

🎉🎉🎉 If you like this post, please 1. 💚 it on Medium and 2. please share it on Twitter🎉🎉🎉

My Other Posts

LATEST: The Inner workings of the Browser — for JavaScript & Web Developers Use code: INNER15 and get 50% off!

React Performance:

1. Two Quick Ways To Reduce React App’s Size In Production
2. Using Preact Instead Of React
3. The Inner Workings Of Virtual DOM (With Lots Of Pictures)

Functional Programming

1. JavaScript Is Turing Complete — Explained
2. Functional Programming In JS — With Practical Examples (Part 1)
3. Functional Programming In JS — With Practical Examples (Part 2)
4. Why Redux Need Reducers To Be “Pure Functions”

ES6

1. 5 JavaScript “Bad” Parts That Are Fixed In ES6
2. Is “Class” In ES6 The New “Bad” Part?

WebPack

1. Webpack — The Confusing Parts
2. Webpack & Hot Module Replacement [HMR] (under-the-hood)
3. Webpack’s HMR And React-Hot-Loader — The Missing Manual

Draft.js

1. Why Draft.js And Why You Should Contribute
2. How Draft.js Represents Rich Text Data

React And Redux :

1. Step by Step Guide To Building React Redux Apps
2. A Guide For Building A React Redux CRUD App (3-page app)
3. Using Middlewares In React Redux Apps
4. Adding A Robust Form Validation To React Redux Apps
5. Securing React Redux Apps With JWT Tokens
6. Handling Transactional Emails In React Redux Apps
7. The Anatomy Of A React Redux App
8. Why Redux Need Reducers To Be “Pure Functions”
9. Two Quick Ways To Reduce React App’s Size In Production

Salesforce

1. Developing React Redux Apps In Salesforce’s Visualforce