So preact is awesome, it's smaller and it has pretty much the same API,
so should we always reuse it is the question. And the answer as always is it depends,
let's find out what the differences are,
let's simply find this out on preactjs.com, to click on guide,
you can also click on differences to react there.
Now feel free to read through that article to learn more about the differences.
In the end you have a nice list here,
you see what's included
so what is exactly the same as react.
And these are things like higher order components, creating components, your functional components and
all that stuff,
you'll also see that for example react create element becomes h(), a function called h().
That is one of the small differences I mentioned, it's pretty much the same API but not entirely
but this page lists all the differences.
So what was added as I said, it even offers some new features
and for example, you get this.props and this.state passed as an argument to the render function
so that inside there, you can simply call props and state without the this keyword
but you can also still use the this keyword as it also mentions here.
Now that's a nice addition and that's generally the theme of the added
things,
nice additions.
For example, you can use the class keyword and don't have to use class name as in react,
these are all the tiny things preact added.
But of course there are also things missing,
for example prop type validation, though prop types
also were pulled into a separate library with the latest version of react to be honest.
So the what's missing part isn't that relevant here,
the most things that are missing are things behind the scenes. Here,
these are really mostly cosmetic things though they also strip out quite a lot of source code,
that certainly is something to consider and we can imagine that prop types were put into a separate
library by the react team to shrink the size of the react library and get closer to preact. Now
that's the differences on a screen here, on a page and this article should be helpful for you if you try to
switch from the react API to the preact one,
as I mentioned it's pretty much the same,
it's tiny things like the h() function instead of react create element
but you probably never called react create element manually anyways
and jsx of course is supported.
Now the biggest difference behind the scenes probably is how dom diffing works,
so how preact finds out whether it needs to update something and how react does that.
And we need a benchmark to find out what's better, if we want to measure it in better and worse, as categories.
To answer this question about what's better, you can search for a javascript framework benchmark and
you should find this github repository, there, a couple of different javascript frameworks are benchmarked
against each other,
you can also download this and run it on your machine
though I will warn you that this takes quite a lot of time but conveniently, you can find the latest
result of these benchmarks in the github repo
if you click on this image here. Then you get this table which is quite big where you can see a lot of
the different javascript frameworks benchmarked against each other,
you should always be careful when analyzing such numbers because the tests here might not be important for
the kind of app you're building.
In the end what is tested here are a couple of operations, like for example creating and removing 10000
rows of data
and there we can find react 16,
so the latest version of react which I used for recording this course and we also find preact here.
Now if we compare them, we see they're very close in performance terms but what we can also see for example
that for startup time which is the second lowest row here, react version 16 has 53 milliseconds and
preact has 36 which is quite a bit faster.
The reason for this of course is the smaller size,
we can also see that despite the smaller size, for operations like clearing a lot of rows, the third row
from the bottom, react is faster than preact because file size of the library doesn't matter for that,
what matters is how performant the diffing algorithm and the updating algorithm is.
And of course preact has to strip out some things, react on the other hand seems to be a bit more efficient
when we look at this benchmark.
So that is how you can look at it,
preact saves you a lot of time when you load your app, when you start it for the first time, it's much
smaller,
it doesn't take up as much space and if you have an application where the initial download time matters
a lot and where you want to send as little code as possible across the wire, preact might be an awesome
alternative to react.
If you're building a super big, performance heavy enterprise application, react especially in version 16
might still be the better choice.
But whatever you choose, feel free to play around with preact, read through the guide here to find out how
to use it,
use the preact-cli to create new projects with it easily and be aware that there is this great alternative
to react which is basically the same but much smaller
when we look at the library size.