React 19 is here!

I don't know. Hybrid.

Svelte is in here. Preact.

run times. So the downside to making a React component is it can only be used in React.

it fails it. Oh, I did see, though, that if you wanna have, like, an on click, it's

That's that's good, actually. So there's this website, You wanna be able to build a very flexible component and have it work in anywhere. And it works server side now in

not that we need conspiracy thinking on this this podcast, but here's my conspiracy. They don't want you to use web components. They want you to use React components. And then the moment you start getting hooked on those dangerous web components, you're not gonna be able to to stop.

that you can be reused between

a, custom libraries

which is a test suite and then throws it into a variable the ability to have pending states, optimistic states, and error handling all in 1 Mhmm. With the use action state about a year now, they were even changing APIs Yep. For it. But I I think they're getting ready for, the React Conf, and they wanted sort of everything out the door JS well as, like, they need to get this thing out so that library maintainers can sort of make sure everything works with with it. And and some of the new APIs as well is, like, library maintainers can maybe roll out some new than what we had, but it's not as good as 10 stack query, you Node? And maybe you can call it programmatically and pass any data you want.

Right? And a web component and it will suspend that component from rendering. And in React, we have this thing called React suspense, for sure. And then the last thing here is just like upgrading in general. So like what what JS the React 19 upgrade look like? I personally Nice.

it will Now hit React.

or Wes talked to the folks from Wes Awesome, Shoelace.

to pop up there. I don't that's not a big deal. Next Node, the use API. This one is is pretty cool. So React roll out this new API. It's just a React actions that can be run client side and or server side, certainly check out that episode.

Riot JS, Lit, Hyperapp, action Hybrid HTML. Stencil. I heard of that one. Omi.

Yeah. And you know what too? Here's a here's my conspiracy theory about this. Not that I

So

This is the the advanced Wes of the basic test. There's 16 out of 16, and the score is 94% of that. So that's What is it failing on? until recently. So people are starting to use it, integrate it, and we'll see if any issues pop up. Sick. Well, that was really, really interesting. I think the the blog post I mean, I do feel positive about the future of React and where it's going, and I'm glad to see that, you know, it's not stagnating or anything. So, yeah, interesting stuff from the React world, and I I can't wait to see. It it does feel like we're still in a bit of limbo here with some things, and it'll be interesting to see where it all shakes out. Alright. Catch you later. Peace.

Yep. You can author web components with Svelte too. That's pretty cool.

Mithril, what framework support web components, and they give it, like, a score. Mhmm.

will pass object data to a camel case Node property. Oh, so it I always like when you can just use these things straight up without having to install a install a dependency.

whereas React has a 100% support.

React Scott into a web component. You can pass you have a component. You wanna we have asynchronous components already. Meaning, you can mark your component as a sync. You can await

that's to say, oh, Svelte, a, what's new, why is it useful, what pain does it solve, and I don't know why I said a, but and b, like, how do you how do you upgrade? You know? Like, if you're on React 18 right now, what does the upgrade path look like? Is this gonna be painful, or is it gonna be gonna be an easy one? Yeah. Sick. Cool. And before we get into this, you're gonna wanna make sure that you have some errant acceptant handling tools if you're doing any migration of any kind or even worse, checking out a beta in production. Who knows about if you're doing that or not? You're gonna wanna check out century.ioforward/ something that is in there. I kinda look at this and go, well, APIs now that things are a little bit easier in some regards.

Omi is Oscar. That's what we call

And,

This is kinda awkward. I know it's kinda weird. That's for sure. Yeah. Now I wanna, like, start getting into lit a little bit more. Yeah. That provides some of those niceties on top of it.

Which is that's what I call my like, our grandma in our house, Omi.

prop types and string graphs.

this is going to this is gonna be updating. This is gonna be breaking, and I don't I don't think unless you have, like, a very, very old code base, which is kind of sucks. We'll probably have to wait until can be asynchronous, which will set the stage for the finalizing the payment, the calculating of the amount, applying coupon codes, all of that stuff

Reactland. I used to have a decorator that loaded scripts before you loaded a component, and then yeah. Oh, you know what?

Yeah. Right. Yeah. A lot of the stuff they they tend to put out to pasture long before you have to remove it from your your code base. Alright. So that's React 19. Pretty excited about it. I have no idea when it will be released as, like, stable, but I imagine

string refs, forward slash API forward slash latest. It grabbed the latest episode into the use, attribute. And when you when you hit submit the whole form data object, all the inputs, It simply just knows that a component inside of me

in React world.

this is way even back,

Honestly, not that I, like, went through the list, and I was like, this is not gonna be a big deal. You can upgrade to React 18.3,

I do need this. Yeah. Millennia. It's good. So Stripe has components

that is a a a big big win for me. These are things that I really like doing in Svelte, so I'm happy to see them,

looking at all of the breaking changes, everything that is below that will will rerender Yeah. Because everything else. We did a whole show on them. There is actions themselves, and then there is Like, for example, you wanna remove an event listener. You might want to take something out of an intersection observer.

in your document or you use, like, the load they have, like, this load Stripe method, and it will inject it in. So, yeah, sometimes you need to load a script tag.

you wanna add preload attributes to the head of your document for CSS, for fonts, Like, why can't we just import it from a file? Like, would that be nice? Yeah. You where your state has its own tree. Yeah. Yeah. I Yeah. Okay. Yeah. So that's that's what I want.

prop types, and default props for function components.

which you might, but you've probably been seeing warnings for for quite a while about things like

I'll tell you when it's good. Here. I'll tell you when it's good. Web components. Let's say you have a web component that needs to load a specific script instead of having that script load for your entire app. You could have that script just load for the component. In fact, when I was in Reactland, I

when I used decorators

either go get these for me now or, like, just do, like, the network overhead so that when I do request it, it is nice and fast where the data needs to go. And it will when the data changes, And React is now a 100%.

methods in React DOM for adding preload attributes as well, which could be interesting if you need to

That

in my component and have it hoisted right up. You could put a you could change the title tag from inside of that.

is because that's where your data is. Yeah. And it hook. And then you can Node a bit once that further, there's also server actions.

the head of your document, and you need to be able to hoist it up from that. And and now React does it both server side rendering and on client side. But the style sheets Node That's wild. Yeah. Freaking love that Yeah. Because you could just pop a style tag. You can use scope styles unsuspended for images, and say, hey.

and whatnot. But the we will get a sync components in the client. I asked the data has changed and it it sends it down. And and the answer to that is no. You still have to use use memo, but React is working on this thing, a compiler, which is

I want I wonder how you know if the script tag has been loaded. There are also a whole bunch of reference the dom element to get some of its native properties or methods off of it. So you have a video element you want to get current time. Right? Or you have a dialog where you need to call, like, the open method on it. Previously while there's no code out there. I've Vercel stumbled upon, like, 80 blog posts being, like, React now supports Wes components, but nobody showed it actually working. So I went ahead and I made it work, and I figured out how it works. And this is awesome. So Scott and I, big proponent of web components because it allows you to create

in in CSS if you want. There's so, like, it doesn't do any processing of your CSS or you'll probably still want some something Now the context is both a provider The 3rd iteration of it's it's not a different context. Still works the same as JS you'd expect in the last couple of years. But now you no longer need it does not currently do caching, is because you shouldn't have to think about or have been fulfilled. So has something that is loading. And that's kind of nice because you can put multiple components not camel case properly. There's some oddities So not classes.

It's a really, really amazing tool, and it's so Deno. We we use just an endless amount of tools in Sanity ourselves. So check it out, Sentry Scott I o.

And if you sign up, you go 2 months for free. It's a great place to track all of your errors and exceptions, to track all of your performance, to even track metrics.

syntax.

but now it has fully dropped Attributes and properties a server action is that you can hook it up to a form

This post came out April 25th

Alright. React nineteen.

use fetch syntax.fm the Stripe intent API, and putting out their own things that can simply just be used.

But then sometimes they're just like, well, it's it's a primitive. You know? It's primitive for for library authors. But the other use case for the use function is with react context. So couple updates to react context, which is now the new new component, then you have to use this, like, bizarre forward ref API.

meaning that Excited to talk about React nineteen. The beta just dropped. As as of recording, the beta dropped last week. You're probably listening to this a week or two after.

are these problems that are real problems or these problems that that we invented and and, like, why is it so complex to do things that should be as simple as just a way to function or something. You know? Because because on the server, confusion and more complexity even though I get that it solves these following problems and is probably a bit cleaner than what we were doing before. I I just wonder if, like I don't know. There's a lot of new APIs, and and that's Scott, like, a huge problem. I like a lot of new APIs, but it does feel like it's all getting a bit muddier to me. Yeah. I don't know. I I don't know if it's necessarily muddier. Like, it's it's better Oh, yes. Yes. Yes. Sorry. You're right. Use action state, which to me tell tells me that, like, at some point, they're like, wait a second. This isn't always about forms. Right? Exactly. Because

is, like,

before the render, and it will just work like every other thing in JavaScript.

I also would just like await.

why can't we just await a promise inside of a component? You know? There's so many things I look at this, and I say, and then you get the the DOM values off of it.

something is is fetching data or while something is happening. And you can wrap it in a suspense component, and you can show some, like, loading state.

weird like, if there is a podcast, you know, there's no initial state of, like, an empty array of podcasts. You simply just use it. Downside to that is you can

the, like, sync local storage API to hit,

inside of a suspense boundary, function calls like a like a set state function into the web component. So it's pretty exciting to to see this finally Oh, yeah. I don't I don't know how how Zestan works. Yeah. Yeah.

you can pass a promise can be used in all of the frameworks. And this is really, really popular for people who have design systems It does make me now like, I wrote a web component, and I was like, oh, yeah.

will do fur first with promises. The way that it works is that on Twitter the other day, one of the React devs, and he said they're waiting on before.

know ahead of time with these types of things. So hopefully that this this use API is is really cool. I like it, but thing and and pull all the values out of there. But, yeah, it was a bit weird that it it was used form state when it was not always used on a form that can be called programmatically. So I I'm rewriting my checkout right now, and I was like, oh, I'll I'll use server actions for this. And it's so good because you can simply just import

Yeah. It it feels hard for me because at one point, it does feel like, hey. This is useful. This is great. In another point, it's like, this is adding Monday, hasty treat, we're gonna be talking about React

this is great, but it it's solving problems that ultimately React created for itself. And Yeah. That's, like, my big concern with it is

with the use API, it will take a promise, and it let's say you wanna fetch some podcasts. I did this. I hit the syntax API. So I said Function components are are being removed.

meaning that you can't, like, It's it's so nice to be able to do that. There's no there's no API endpoints. There's no route handlers.

Mr. 10 Stack or something rolls out a component can be suspended, sort of paused from rendering it's kinda useless because only getting 14 out of 16 function called use. And right now, it does 2 different things. And I think the idea with the use API in React is that Previously, we've just used a useEffect for that because a use effect has a cleanup function where you can sort of clean up. Right? Now refs have a cleanup. You can from the ref, you can return Totally. And script tags. Like, I don't know if I've done that Node We'll talk about that in just a second. We're not gonna dive too deep into it because that in itself was a whole hour long show. So if you're interested a little bit more on

more

it to work. I I think it's because if if you want suspense to work, it has to have some way to know if it's currently fetching data. And a lot of this also boils down to React doesn't have a compiler, wrapping your application in it, and it is a consumer by simply passing that value to use, and you can access the context from within your your components.

b, I think maybe some of these hooks advanced pass pass. So Svelte has very poor support,

And You use it as a hook. You use it as a hook. Okay.

it will re fetch every single time it rerenders, I don't I'm not using these yet, but Like, people are asking, like, why would you ever want to do that? The reason you want to put title link and meta tags in your components and a lot of these other frameworks are so awesome a function that will be called when the component is unmounted.

your context is your context, meaning that in order to consume it, that was the word I was looking for. You have a a provider and a consumer.

your context too high because then you'll cause too many rerenders which they just released as well, and that will just give you any warnings. So just just upgrade to that. It's not gonna break your app, and then you'll get a bunch of warp. Say, hey. In the next version of React, And actions themselves are now name equals, and then they do, like, the arrow function. But then you put that inside of a forward ref, and it's like And then you toss TypeScript on that bad boy? Oh, yeah. Oh, yeah. Yeah. Default props and TypeScript holy hell. Yeah. Good luck reading that. Yeah.

we're so glad to to finally see this, that they're working on a compiler called React forget because the reason Svelte Next Node. This one is is very simple. No more forward ref. In React, you use a ref to reference the dom element. So Another huge one, which this was at the very end of the blog post. And when I was making the notes for the show, I was like, where's the code? Show me an example. How does it look? What? Show me the where's the cheese? And in maybe a month or 2, we'll we'll see it. But again, the reason of a beta is so that people can try it. And there may be some that they, like, broke in, like, 2018. So they've they've Yarn not broke, but they deprecated in 2018

if you have data in a context, And if you wanted to let me rattle through them. Solid? Surplus?

and then and it'll wait until all of its children have been big thing Wes some people say, oh, you know Node? You're optimistic. Doesn't make any sense. Like, we're already starting to see that people are saying, ah, this API doesn't make any sense and unless you're using a framework that is suspense ready, Thank you. Previously, when you create context, you have context itself and then you have a provider and you wrap the provider around your application.

to create a provider.

stores, especially the newer ones where Okay. You're creating a complex store. And you want that store

state machine Yeah. State management library. He called out my usage of a status,

would like that as well. That's actually what I have here is I posted this on a real or a TikTok or whatever, and a lot of people have said, oh, does this get around the issue with context Wes they are almost all changes from effects Scott. Maybe some of these hooks will be moved over to the use API. I don't know if that's actually the case. Don't quote me on that. But I imagine that now that they have this API in React, they're gonna say, alright. What else can we make into use? So the use API

Yep. It's a lot more like the Svelte

Yeah. Wes don't need to get in Deno into that. I I just wish React Context What is surplus? Deno.

a lower. And Svelte, you just import your state where you want it, and and you put your variables in the divs where you want them. And the Svelte compiler step will figure out and then that will allow of

Yeah. There you go. State machine light.

because I I really look up to you in terms of, not using Boolean props and status.

rerenders. You shouldn't have to think about, well, don't put your for me so I can go ahead and display it on. There's no loading states. There's no and it will then render the CSS out for you. It will also it will dedupe them. So if there's the same if you have, like, a link to a a CSS file a 1000000 times, it's not gonna link it up a 1000000 times. That'd be cool. That and then yeah. Puts better than a 1000000 CSS links.

in different components, you just import it in. Yep.

you don't. Yeah. That way.

it already knows ahead of time where where to update them, where to put the variables. Right? Yeah. And and React is a little bit funkier. So go ahead. I still understand why we need a compiler for that when Zusdan does it and Recoil does it. You know what I mean? So, like, to me, that that feels like something that they could have solved a different way.

That and it never made sense to me, the provider consumer thing. It always felt like too much. Even this new way of still needing a provider that is just your context now still feels like I don't get why we don't just pull, like, was it recoil or even Zoos stand Wes they pull the state outside of the component tree? I still don't understand why

variable as being a positive the other day on Twitter, and I wanna say thank you, David,

create a ref but still make, like, a custom component, like, make a custom video player component or custom data input sort of open up the gates for,

often you need to Oh, man. Especially custom elements everywhere,

Wes people use, like, the arrow function inside of an arrow function, you know, like, they'll use, like, the implicit return. Yeah. Like, it's real Sanity. Component SDK has to be hosted on Stripe. Right? And in order to get that into your page, you either put a script tag that are meant to be used with Node of the hooks called use transition, new context.

There's also a ref cleanup callback

with React, you have to you well, you create a ref for it, and then you can access the dom Node, and you can say ref.current.,

now, which is kind of cool. So if you need to do something when a component is unmounted,

And now you can simply just pass the ref in via a prop like you kind of expect it would be. So no more forward ref. Very happy about that. Yeah. That's great. In fact, I use the, the forward ref as a smokescreen for one of the stumping code examples I did to Wes during the React Live because I knew that the the forward ref API is such a pain to look at. I was like, he's never gonna see that I didn't spell class name class name.

Yep. And to clarify, what I was referring to was that the hook used to be called use form state.

Yeah. I like that. And and and speaking of, this is not super duper related, but, you know, sometimes you you go on tangents here. I've been working in some client side only components lately using pocket base.

function to do the server side processing, Not really. It's it's it's kind of a complex thing because, like, we we have actions which Yarn, like, a sync functions

validation happens server Node, but then, like, the function call is just inside of, like, an on click handler or on submit handler, the very last framework out of just pop a style tag inside of a component

It's just a functioning import, and, and it runs.

the server side

programmatically. They can be called on the the benefit to often, your data is at a component level that is not You've been able to kind of use the beta in Next. Js for that that does a lot of your processing and deduping and As someone who makes a lot of demos, I was very happy to finally be able to just put a fav Scott

man, there is something so nice about not having the hot potato data from the client to the server. And I know that it some of this is happening behind the scenes, and it's not the same thing. But there is something so nice about just being in your component,

and React. It works client side in React. It I don't I I did a whole bunch of examples with it, and it I I hooked up a on click handler to some of them. I passed state into all their names, all the values are available to you without having to do some weird state and

Exactly.

they can be called like, Stripe's

And,

being able to execute the thing you wanna execute right then and there regardless of where it actually goes behind the scenes.

Yeah. Sick. I I'm I'm stoked to hear your thoughts on it. I I read the blog post like everybody else, and some of it I looked at like, alright. Yes. Awesome. And some of it, I I definitely was a little bit maybe a little bit more confused about why we need, some of this stuff. But maybe let's start off with the 1st and foremost actions,

which

is really you know, at one point, they were called form actions, I believe. Right? Were they?

kind of out of nowhere. Right? Did did this did this surprise you when this post dropped? Because it definitely I was not expecting this. Yeah. I didn't I didn't hear any rumblings. And, like like, even, like, a, like, a week or two before, it was would would work more that way just given that that I I feel like personally, it resonates with me a little bit more. I'd you know, like the whole having to wrap and worrying about the rerenders biz. But yeah. Oh, yeah. I get Wes. How does how does zoos stand work? You you create a store,

and that is used for having loading states and whatnot.

metadata in. And I really do think that's a good way of doing it, having it override.

It's again, just nice nice clean way to to handle that.

Yeah. The the fact that you can put now document metadata anywhere and have it be you don't have to use what React Helmet is what everybody was using before. Yeah. That's what you always use. Yeah. That's a feature that I I really enjoyed in Svelte. Any component, you can put, you know,

So yeah. Now you can put your metadata, the title link, meta tags anywhere. They're gonna be hoisted up to the top. Style sheets and script tags inside components.

So nineteen.

realization here. Either way, with me JS always is Wes Bos.

React nineteen is,

Hey.

it's here. It's in Node enough to drink in Canada. It's old enough to drink in Canada. We we just zoomed on up to React 19, it seems. And there's a lot of really cool new features, a lot of cool stuff, and we're gonna be breaking down everything that is new and improved within React nineteen.

just just coming to that,

Welcome to Syntax. On this So they don't want you to see the code. They don't want you to use them.

good. Like, it's it's been there for a while, but no one was really using it, with all of the different features. So we're gonna do a quick rundown of, And it's the 1st major React release in almost 2 years.