This course has been updated! We now recommend you take the Intermediate React, v5 course.

Check out a free preview of the full Intermediate React course:
The "Preact" Lesson is part of the full, Intermediate React course featured in this preview video. Here's what you'd learn in this lesson:

Preact is a very small (3KB) alternative to React. It also has a lightweight compatibility layer for React called preact-compat (5KB) to make Preact compatible with all React code. Brian walks through replacing all of React with Preact.

Get Unlimited Access Now

Transcript from the "Preact" Lesson

>> Brian Holt: We're gonna talk about Preact. I'm a big Preact fan, so I get really excited about it. Preact is a extremely intelligent person named Jason Miller, decided I can do React, but instead of taking 45 kilobytes, which is what it was at the time. I can do it in three, and actually at the time, he did it in less than three.

[00:00:20] It's black magic. It's pure magician craziness. At the time Jason wasn't working at Google, but Google obviously hired him because why not. We tried at Microsoft. At least I tried. He told me-
>> Speaker 2: Is that why you almost said stole him?
>> Brian Holt: I wanted to steal him. But nonetheless, extremely nice guy.

[00:00:44] The Preact project is amazing. I'm sure every company in the valley tried to hire him as well. [COUGH] So what's cool about Preact, Preact does differ a little bit from React. They made some different design choices. Largely, it's the same. It still uses JSX, it's still components and life cycle methods.

[00:01:03] Today, even though we haven't really talked about Preact, you pretty much know 95% of how write for Preact, it's mostly the same. However, if you have an existing large React application, they ship something called preact-compact. That actually is a drop-in replacement for React. So it will make your entire React application work with Preact.

[00:01:27] So you can go from having, I think React now has 30, 32 kilobytes' worth of code, to down to 3, today. Even though, well, I guess that it would be about eight, because Preact compacts about five kilobytes. So the three kilobytes in the original library and then the five kilobytes of the compact layer.

[00:01:47] So pretty compelling. It's not always one to one, react is evolving and so it takes preact a bit of time to catch up. So at the moment of this filming, there's several features that React does that Preact doesn't quite do, and don't get there that they're building them.

[00:02:05] But a lot of the stuff that I showed you with Reach Router doesn't actually work with Preact. So I'm gonna show you how to swap out Reach Router for Preact Router, and it's largely the same thing. So not a big deal. So let's get through this pretty quickly.

[00:02:23] So you're here in the project, I'm just gonna reinstall my Node modules really quick. You probably shouldn't have to do this, but you might.
>> Speaker 3: I have a question.
>> Brian Holt: Yeah.
>> Speaker 3: Why isn't everybody using Preact over React then if it's so much smaller?
>> Brian Holt: It's a tradeoff.

[00:02:43] So in general, and I'm making generalizations, this is not gonna necessarily always be true, the runtime of React is faster. So once I've downloaded it, React tends to run faster. That's not true in every performance profile. Some places it's negligible and some places Preact is gonna be faster.

[00:03:05] The big thing that React does that Preact doesn't do, React has a synthetic DOM event system. So it's actually simulating events inside of itself and running events through its own process rather than letting the browser do it. And a big size win for [INAUDIBLE] because it uses the dom the ben system so it doesn't have to ship it's own copy of [INAUDIBLE] system.

[00:03:28] That's one of the bigger differences of the architectures.
>> Brian Holt: Beyond that react is supported by Facebook and has a core team of people working on react all the time and there's just a certain amount of trust that comes with that. Facebook's not gonna break their own stuff. Google as of this moment in time employs Jason but Jason doesn't work on Preact for his day job.

[00:03:53] His day job, he works on Chrome. A guy working on it and whatever contributors or an entire team at Facebook working on it. One's an easier sell internally, I assure you. [LAUGH] So reasons, I think is my answer to your question, there are reasons. I don't know. Yes, for some things, react is gonna be a little bit better, and with the new fiber architecture, there's really cool stuff coming, that preact is gonna have a hard time simulating.

[00:04:25] So I think as we go further into the future, they're gonna diverged more cuz they're making different design choices. Does that not answer your question? [LAUGH] Cool. So I want you to npm uninstall or npm un, if you're lazy like me, react react-dom and @reach/router.
>> Brian Holt: This is gonna uninstall those packages because we're going to install NPM installer and NPMI.

[00:04:58] Preact, preact dash compat, preact dash context because right now preact does not have context. But there is a little library called preact context that does it for us, and then preact-router.
>> Brian Holt: A caution to future video listeners, by the time that you watch this video preact context may be built into preact or preact compact.

[00:05:24] They're going to include that in there. But as of today's writing, this is a separate library. So you might want to just check that out. And I'm sure we will add an annotation that says this is or not, or it is or is not.
>> Brian Holt: Okay, so we're gonna come over to your editor right now.

[00:05:46] There's a couple ways you can do this. You can go in an alias anytime that using a parcel or web app to say that anytime I request a react give me preact compat instead. Right now I'm just going to do a giant find and replace. I think that's going to be the easiest way for me to do it.

[00:06:03] Any time I ask for React replace that with preact compat so let's see what that does and,
>> Brian Holt: I need to do that inside of anything that's a js file Files to include, anything that's a JS file. So this is gonna go in and do a find and replace.

[00:06:32] Do find and replace in your favorite way possible, or that you know how to. I'm doing it with VScode here, so I just clicked on the magnifying glass here. And I'm doing a find and replace here so, you need to search for, in quotes React. And replace that with preax compat.

[00:06:54] Very key here, to put the quotes because I only want to replace this, I want to leave React the way it is. But I want to replace which package it's coming from
>> Brian Holt: So again, make sure quotes are there, double quotes. Cuz we're using pretty and pretty amazing double quotes, okay?

[00:07:13] And I only wanna get there from asterisk.js.
>> Brian Holt: So let's find all those files
>> Brian Holt: So there we go. Cuz you should only be importing react at the top, so it should only come from all of our component files. Here I'm gonna do replace all. Okay, and I'm gonna do the same for react-dom.

[00:07:39] So that's just only an app.js and modal.js, so that's good. Replace that, okay.
>> Brian Holt: Then anywhere that it says at reach router at react slash router, replace that with preact dash router, so that's an app.js, pet.js and search params, right? There's a link or a router, so we'll replace all of those.

>> Brian Holt: Okay, so anywhere there is a link which will be in search params, I think, right?
>> Brian Holt: Where is there a link?
>> Brian Holt: So in App.js,
>> Brian Holt: What are you doing here?
>> Brian Holt: There is a difference between Reach router and React router. This says to right here. So both these times are those too, just make that an href.

[00:08:59] They just had different design choices there, so that's what that does. And then we also have to do it in pet.js. So in pet.js, change this to href.
>> Brian Holt: And search context, so open Search context, here we have reacts.create context here. Reacts doesn't, our pre act doesn't have create context on it, so we're gonna have to do here is we're gonna have to import create context

>> Brian Holt: From pre act -context and then just change this to be context like that okay? Now preact-context will work.
>> Brian Holt: In search params here. Where I have navigate. It's actually called route inside of preact-router so change that to route. Again, search params. This was navigate, but we changed this and this to be net route instead of navigate.

>> Brian Holt: Lastly, in details.js.
>> Brian Holt: For whatever reason, there's a, you have to wrap this in a div.
>> Brian Holt: Inside of the modal, so you need to add an extra div here cuz that didn't work in preact. So I'm demonstrating to you there are tiny, tiny differences here that you kinda just have to worry about.

[00:10:50] But in my opinion, they're not that big of a deal. So now, if I come over here and run dev again. You might have to remove the cache, -rf .cache/ and dist/. These are the generated files from Parsel So I'm gonna say npm run dev. It'll take a little bit longer to start up, because he killed the cache.

>> Brian Holt: Okay, up and running. And now it works. But the cool thing is, now this is running with Preact, which is pretty cool, right? Our entire application, we can search. Cats, American Curl, submit. Working with a Preact, so just fathom for a second that you replaced the entire core library with a different library.

[00:11:42] To me that's fascinating. I think that's really cool. You couldn't really do that with Angular, right? You can't just drop in something else for Angular, it's Angular, right? But we were able to save quite a bit of space by doing that.