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!

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).

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?