Introduction to Preact
Hello everybody and welcome back to my channel. My name is Harry Wolf and I'd like to talk about coding. In today's episode, we're going to be talking about an alternative to React. God forbid you use anything but React nowadays, but this is a worthy alternative. I, of course, am talking about Preact.
That's the full name as it says on its website: Preact. I'm kidding. Preact is a fast, small alternative to React, something that is good to be aware of because it is tailor-made for certain applications that React actually doesn't excel at. So let me kind of give you a little tour of the pretty powerful, playful world of Preact.
The Core Goals of Preact
So as mentioned, Preact is a fast alternative to React with the same API, and that is one of the crucial points about Preact. I don't actually know the meaning behind the name; I always think that it's pretending to be Preact, which it is in many ways. Their homepage kind of gives you a nice overview about what it does, but I actually thought it'd be most important to kind of go through the goals of Preact to kind of give the focused intent of why and how features are added to Preact core.
A big, big feature of Preact, a big goal of theirs, is to remain small. They all actually take code freeze times to actually get the code size back down underneath their threshold so that it doesn't actually cause any bloat. Which means that Preact is actually great for embedded situations. So if you are actually in the ad industry, you need to embed some ad widget across millions of pages, Preact is a great solution for you because it's nice and small but gives you all the flexibility of React. If you were to try to load React in every ad, you'd get a lot of angry people after you.
It's supposed to be performant, efficient, understandable, and it aims to be largely compatible, not fully compatible, but largely compatible. I'm going to get to that in just a moment. But that's kind of the high-level goals of Preact. It wants to be small, performant, and embeddable.
Understanding Preact's Trade-Offs
And it's kind of taking the best of both worlds with the API of React that you know and love, but also making it super small and tiny, such that if you have to embed some project code in a large application, it becomes very easy to do because its footprint is so small.
So as I mentioned, Preact tries to be largely compatible with React, and they actually have a whole page that highlights how it's different from React. Because it's important to know the trade-offs that you're getting here. It's almost more frustrating, I always like to say, no Wi-Fi is better than spotty Wi-Fi. So in that sense, it's better to know what Preact doesn't do than what it kind of does, so you're not confused when things seem to work like React and they don't.
Key Difference: The Event System
The difference to React is the big one, the main difference that makes Preact so much smaller than React is that it doesn't ship their own synthetic event system. Now, this is a big feature of React where they actually have an entire wrapper over the DOM event system, and it actually adds a lot of weight into the React code base. I remember hearing that they might be trying to fix that in the future, but it's kind of what lets React be compatible down to IE11 is this synthetic event system.
But instead, Preact uses the native add event listener, which is a big change. Rather than having to bundle all this synthetic events, you just use the browser, and that cuts down the size immensely. There are some subtle differences with that which you'll probably not realize until they bite you and you lose a day debugging. They kind of list out a few of the highlights here. For example, events don't bubble through portal components. You have to use onInput for onChange, things like that that are slightly different because the event system is different.
Other Notable Differences
Past that, there's another big difference which is interesting is how Preact components... so if you use Preact class components like React class components, you have the render function here where you can just render the code just like React. You can do that in Preact.
In Preact, the arguments are actually given—this.props and this.state—into the render function, so you can write things like this. Why do they decide to do this? I think just for size efficiency's sake, or just for stylistic preference, which is fine, you have that flexibility if you want. So that's also really cool.
Because Preact is closer to just raw browser, you can actually use class as a prop on your JSX instead of className. That is super cool. Now there's a bunch of other differences, I'm not going to go through the entire page, but that's largely the high-level things. There's no synthetic event system, the class components render function takes an optional arguments, and that's kind of it. Like, it's not that different.
Migrating with Preact Compat
With that being said, if you want to switch to Preact from React, there is actually a way to do that. Preact makes it easy for you to actually have a standalone, a separate bundle called preact-compat for compatibility that will actually shim some additional React features into Preact that Preact, according to its goals—because it has to be efficient and largely compatible—by default, Preact doesn't think these things are necessary in core.
So some of the things that Preact compat adds to make it easier for you to migrate from React to Preact are things like PureComponent is not by default included in Preact, memo, forwardRef, portals—these things that you could probably build most applications without, but if you're pretty intentioned to React, this makes this migration easier to do.
Configuring Your Bundler for Migration
I think that's even more interesting though when you're switching from React to Preact is here, this setting up compatibility. When we actually are migrating from React to Preact, you actually have to alias the React library to Preact. So where is that aliasing? Integrating to an existing pipeline.
There's two things you have to do. One is you actually have to override the JSX pragma, which means that instead of the JSX converting to React.createElement, it actually switches to h. And you do that via configuring the Babel plugin to do that. So you can actually see from here, you have importing h, you can actually write things like this that otherwise you could write with JSX.
And additionally, you actually have to alias your libraries. So for example, here, this is an example in webpack, what you're saying here is that for every library in your webpack bundle, wherever it sees react, like wherever it sees import React, to switch it to preact/compat, likewise with react-dom. And the reason why you're doing that is that your core application and then all the pending third-party libraries will actually be using Preact in the background instead of React, which means that your entire application is then a Preact library. I'm sure there's some gotchas for doing that, but Preact aims to be largely compatible, which is really awesome. They have all these examples in all these other bundlers as well.
Preact 10: Closing the Gap with Hooks
Going back to the goals for a second, again, this whole 'largely compatible' thing right here I found interesting is that Preact 10 was recently released, probably a couple of months now, and the big thing that Preact 10 did, it was a huge rewrite of Preact to kind of bring parity of functionality of Preact to React, because React had been kind of sprinting ahead with all these features such as hooks, which Preact didn't support until Preact 10, and they now do. Which means that Preact is even closer to parity with React.
Exploring Preact's Readable Source Code
One of the last things that I love about Preact is how small and readable the entire library is. This is the entire API for Preact, which is just beautiful how small it is. It kind of gives you a stripped-down, more base-level implementation of React in some ways, just showing all the things that are exposed. This is the ReactDOM.render equivalent, hydrate for server-side, and this is the equivalent to React.createElement.
But even more exciting, reading the source code for Preact is actually doable. I have tried to read the React source code many times and just fail. It is a large, complex code base by necessity, but also that necessity makes it very hard; the barrier to entry is very high. However, I can go into the Preact source code and there it is, which is just lovely.
What's also great is that it's actually raw JavaScript. What they actually do, so I go into createElement here, rather than using TypeScript, they actually use the ability of TypeScript to type-check JavaScript files annotated with JSDoc like here. So it actually is all type-safe, it's typed with TypeScript but via JSDocs instead of TypeScript itself, which is neat and a nice alternative way to do things. We actually can read this code largely.
What I find most funny is that there is a whole folder called diff which is exclusively focused on the diffing algorithm that is the pride and joy of React and Preact, is being able to efficiently update the DOM. And this is 'diff two virtual nodes and apply proper changes to the DOM'. And this is the algorithm which, if you sat down over a couple of nights, you probably could read and not have an issue at all. Which is awesome that it's possible to do that, which makes it easier to understand what's going on.
Conclusion & Final Thoughts
So that is Preact in a nutshell. A fast, small alternative to React where the use cases are great for embedding it inside of other applications, or just wanting to have a mobile application is a great use case as well to be small and efficient there. It's a great tool to have in your toolbox if you need and I just want you to know about it because I think it's a thing that's been around for a long time. It's a very cool library. I have never tried using it because I use React and it's essentially the same, but I mean if you just navigate around the website you can just see how fast it is. It's lovely to play around with.
That is my video for this week. If you enjoyed it, let me know down below. If you use Preact or have used Preact, let me know as well. I'd be curious to hear about your experiences either trying Preact from the ground up or switching from React to Preact. If you enjoy this video, become a subscriber with the subscribe button down there. And if you really want to see me every week, hit that notification bell button as well so you get notified when I'm here. That's the video. Thanks for watching. Stay happy, stay good. See you next week.
