React 19

[00:00:00]
>> Brian Holt: So we've been centered on 18.3 so far, and we're gonna be talking about 19.0.
>> Brian Holt: Some of the stuff has been coming for a long time, and some of the stuff is fairly recent. So the first thing I'm gonna call out is keep an eye out for version 6 of my intermediate React course.

[00:00:20]
That should be the first time that I talk about React 19. I'm imagining that it's gonna be out by that point. And if it's not, we'll probably push the date further so it can be out before I go teach it. But I just wanna really emphasize that what you've learned today, I am confident in asserting that it will be still useful five years from now, because React doesn't change that quickly.

[00:00:44]
The core model, of which is what I taught you today, doesn't change very much. So there's no reason to wait to take courses or anything like that, it's all React at the end of the day. Most of the stuff that's in React V8 of this course still applies, right?

[00:01:02]
Most of the modifications here were fairly minor.
>> Brian Holt: So, it's about to be out. They've been talking about it for probably about a year now, and I'm gonna say 95% of what I show you, I'm pretty confident saying it's gonna be unchanged. And there might be some corners around the edges of maybe some slide API changes or something like that, but I think the core concepts are gonna be the same.

[00:01:24]
It's in release candidate right now and has been for some time, so they don't anticipate that it's gonna change very much.
>> Brian Holt: One of the things is use client and use server. You'll notice today I did not talk about these and I did not want to, because I don't think it's useful for you today.

[00:01:46]
React is now being bundled into more of a meta framework, so things like Next.js and remix and all of those things. And one of the cool features that those things allow you is they allow you to say, run this component on the server only, or run this component on the browser only.

[00:02:05]
>> Brian Holt: We were just doing client side React today, so that was nonsensical for us to talk about, but this is kind of cool for the future. Imagine that you can do things like run database queries directly from your React component. If you're using a server component, you can do that, and it's totally safe, right?

[00:02:21]
And by the same token, if you're writing a, if you're writing Figma, right, a very client heavy application, you don't want that stuff to run in the server. That doesn't make a lot of sense to render that stuff in the server. You're gonna render that in the browser.

[00:02:34]
So you'd use client on that. So just to give you an example of what that API looks like. If we go to like, I don't know, header for whatever reason, you can put up here at the top, use client, and this is now going to be guaranteed to only run in the client.

[00:02:54]
And I think it works per block as well, you could do, if we didn't have this, right?
>> Brian Holt: Then you can do it here, and so on. And there's a bunch of different places you can use it called directives, right? Same thing you could say use server here.

[00:03:10]
And what's cool about use server in this particular case, it's just gonna send down the complete markup, it's not gonna send down the actual JavaScript to run it. It's just gonna run everything in the server first and then send it down to the client, which is kind of cool.

[00:03:22]
I think you can do it with like effects and stuff like that, so you can say, useEffect.
>> Brian Holt: And use server in here, right? And then you have a server side effect that you can run there, which is also kind of Interesting as well.
>> Brian Holt: But again, this only applies to like meta frameworks, like next, like remix.

[00:03:46]
You can build those meta frameworks yourself, but you have to get your hands pretty dirty with how React works. One of the things that I found interesting and useful, what happens if I have an API key that I'm using in a used server component? All it takes is one developer to go in there and say, I actually need this to run on the client too and just delete the directive.

[00:04:09]
And all of a sudden, you're sending your secret keys down to your clients, right? You're one line away from a data breach, which is very scary. So they have these things called taint unique value and taint object reference, it says, for these things that are running on the server, I don't care if something tells you to send this down, never send this down.

[00:04:28]
And that's what the taint unique value and taint object reference do, is they're just saying, I'm putting extra guard rails on this that this will never leak. And I thought that was a cool way of doing that
>> Brian Holt: Cool, so, any questions about that? You're just kind of adding a directive of where you want stuff to run.

[00:04:51]
>> Brian Holt: Which I thought was a cool idea.
>> Brian Holt: Something else that, for the longest time, we've had to use a thing called React Helmet. So if you wanna change the name of the document, right? So right here it says Padre Geno's, right? If you wanted to change that to order on the order page and contact on the contact page and stuff like that, you had to use something called React Helmet, which is the library from the NFL.

[00:05:17]
It's a fun fact. And you would render something into the helmet and then the helmet would put in the head for you. That's how it would work. And in React 19, they're just building that into React directly. So if you render something like title here, it's just gonna automatically put that in the head for you.

[00:05:34]
You don't have to do anything special. It just has to go, title, that goes in the head. Same thing with links, so adding CSS documents or meta tags or anything like that. All that stuff that we used to use React Helmet for is all just built into React 19 now.

[00:05:52]
We talked a little bit about preload and preconnect earlier in the course. If you need a, kind of more interesting introduction to this, I found this article, which is pretty cool. They're called browser hints, and they allow you to say, hey, predo all the HTTPS handshakes. That's what preconnect is for.

[00:06:17]
It's like, I might need this here in a second, and I want you to go as fast as possible. So preconnect is like, do the handshake, get ready for the secure connection, but don't download anything. And then preload is like, no, go ahead and download this. And it's done through browser hints, that's a very, built into the browser side of particular React kind of thing.

[00:06:37]
So you would do something like this in React. And it's like, okay, I know this is about to open a text editor, right? Cuz obviously this is links as I click here to open the text editor. So here it's like, get ahead of the user, download this first.

[00:06:51]
So that when they click this link we're immediately ready to go. It's kind of cool. Really interesting way of doing hinting. And the cool thing about this is, browsers can ignore it, right? If it's in low battery mode or something like that, the browser will just ignore it.

[00:07:06]
But it doesn't break it, right? They'll just have to wait longer. Web components, people have been clamoring for this for a long, long time. They've kind of been possible for a long time, but now that's kind of gotten first-class support. Why do you care about this? Probably, I'm not going to encourage you to write directly web components yourself if you're using React, just use React.

[00:07:28]
Why this is actually interesting is for library authors. So for an example, I was talking to Auth company D Scope. If you've heard of them, it's perfectly fine, auth provider, I quite like them. They get to build their auth components that you can import into your page once.

[00:07:45]
And then they get to ship that to Angular, to React, to View, and they all just render a web component at the end of the day. And it's all encapsulates the logic, the CSS, the HTML, the JavaScript. And they get it right at once, and it just works everywhere.

[00:07:59]
That's awesome for them, instead of having to maintain seven different SDKs for seven different frameworks, right? So it's awesome for providers and all that kind of stuff, that they can ship one component to multiple libraries. So they finally figured out how to do it really well with React, and so they're finally gonna ship that, which I think is really cool.

[00:08:23]
>> Brian Holt: More stuff, I linked the stuff here. You can see that they announced this on April 25th, so it's been some time since they announced all this stuff. There's more than what I talked about in here, but I think I kinda gave you the highlight.