React 18 - A Look Ahead

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss. Let's get ready to

send, Scott.

Let's get ready to let's get ready to send jacks. Just last week, React dropped

a massive rid set of what's going on with React, what's coming down the the pipe, how is everything gonna work. And it's like a breath of fresh air because there's a lot in React. We're like, what's status of all of this stuff. Like, I literally tweeted the week before this. Like, what's going on with the SSR and React and whatnot? There's, like, no details. And, now there's tons of details about what's coming down the pipe for React 18, some big changes, and some really exciting stuff. So we're gonna talk about rid. All of the features in React 18 that are to becoming and what you use them for.

We are sponsored by FreshBooks, Cloud accounting, Sentry, exception, and performance tracking, and revenue cat making it easy Meow.

Making it easy to build and manage.

IOS and Android in app purchases, all of them partway through the episode.

How are you doing today, Scott? Hey.

I was wondering, do you think the React team just, like, hadn't been working on this and then they saw your tweet and they're like, oh, shoot. I forgot about that. I They better start working on it. Oh, yeah. And then they just hustled and and got that that out real quick. No. It also it's funny because the, yeah, the React team dropped a huge dump On the, huge dump code and then subsequently on our episode of syntax that we had recorded talking about this very same thing And then had to delete that episode because it was made completely invalid

the moment that that was released because we were talking about all of these things, and then all of a sudden, it did not apply. It was hilarious. It was, like, an entire hour of Scott being like, well, what about this? This sucks. This is I can't do this. This is impossible, and I hate React. And then, Like, a day later. Yes.

That one's going in the vault. The controversial, syntax episode that no one will ever hear because it's re Completely invalidated immediately.

It's available only to our patrons.

Only other patrons, you can get The Scott director's cut of of that specific episode. I'm feeling good today because I got to use a new CSS property that I don't know if you know about As I dropped a little tidbit about assertion and imports in the last recording we did, I'm gonna drop another tidbit on you. So a CSS property, have you used the inset Property in CSS.

Yeah. On box shadow?

No. The inside Oh. Property itself.

No. No. I've only ever used it on box shadow. What what is it? So I saw a tweet from Adam Argyle a while ago about this. By a while ago, I mean a couple weeks, which is a while in web dev land. And this is a a shorthand for essentially assigning position values, and it comes in most useful. Like, you could think about here's the maybe most common use case. You're building an overlay, a model, or something like that. You say position fixed, and then you say top, rid Oh, 100, left 100, right 100, bottom 100. Right? Yeah. So you have it 100 pixels from each side. Well, you can get rid of that top left whatever just by saying inset 100.

So, basically, if you're making a modal, you'd say position fixed, rid. Inset 100 pixels, and then that's the equivalent of doing the top position, left position, right position, and bottom position.

And also, inset has a shorthand that's like margin where you could do inset 150, 150, and it would do, you know, top, Bottom left, right, whatever. Oh. So basically allows you it's a shorthand for setting position on things, and it's fantastic.

It's a Small little change. You know, it's easy to polyfill too, but it it's good in in even Safari. They it has support. So It's supported literally everywhere but IE and, like Like, way, way back at Chrome 37.

I I don't know how I never heard of this before, but, hey. That's great. Yeah. And the the The post CSS polyfill's easy, you know, super easy peasy because all it does is, you know, find that string and replace it. So Just trouble? Yeah. I just used it, and, I really was like, oh, man. This is great. This is fantastic. I don't know why we haven't been using this before. So Wow. I didn't know about that one. Yeah.

Little tasty treat there to kick off the show.

Boy.

Beautiful. Alright. So we're gonna go rid through each of the pieces of React and just sort of explain what it is and and why we need it and and why how we're gonna use it. Rid. So the first one is automatic batching. So, one kind of thing that React does right now is that If you've got multiple set states or lots of things going on in your app all at once, there's a possibility where you can rerender your application 4 or 5 times unnecessarily.

And I've always looked at that. Like, first, I don't really I I've never actually had that problem too too often Or I've had to, like, manually figure out how to batch them. And second, I've been like, well, why can't React just, like, do that for us? You know? Like, why do I have to worry about that? Well, that that is what we're getting here. So they are, going to automatically detect when you do things like that and then just batch them all into a single

rerender so we don't have to worry about it. Yeah. I'm gonna hold off on any sort of snark I might have for any of this stuff because it's all fantastic, and I'm happy that we're ready. But my my general thoughts with many of React's things are, like, why do I even have to think about that? Why is this something like, why Why, can I I trigger infinite rerenders with use effect? Yeah. Like, I get why I can. I get why it happens, but rid Why why why is that available? So, again, with this, we're not wanting to worry about rerenders and stuff. I'm I'm very glad that We won't have to worry about this, and this is just something that it does for you. I think that that's a that's a a place in my mind where React could be a better experience for the most part, where React could take rid of the things the foot guns for you more often and, you know, prevent that newbie issue of where you hit one of these foot guns and then you have to learn why you hit a gun where it would be better if he just did it for you. It's it's actually very funny. I I was doing some comparisons on Instagram, and I'm not going to I'm not gonna talk too much about Svelte in this episode. You've said that twice already, and we're 2 minutes in.

So I'm not gonna talk about It's about no. I'm just saying. But I was doing some some comparisons on on Instagram, and and somebody was like, you can't do these comparisons if your React code sucks. And I was just like, woah. Oh, come on. Come on. And so I was looking at the React code, and they were like, you're using this really bad practice of defining an inline function. Like, 1. Okay. Rid That's not that bad of a practice. Yes. It will cause slowdown in some situations.

But, like, situations like that, You should be able to use things like that without having like, that's that's part of the complaint is that, like, React is perfectly happy to have you do inline functions, but then it's also Perfectly happy to have your application be slow because of it. And so just like with this automatic batching and stuff like that, I would love, In the future of React 2, have less foot guns, less

possibilities for things like this to to slow you down. Yeah. You know, just just my general thoughts. Rid. Totally. And, like, there's, like, a certain kind of dev who loves to know about all these, like, gotchas of, like, rules of, like, you should never do this. You should never do that. And why would you do that? And, like, they think, like, there's some sort of amazing dev because they've memorized all of these, like, Waste like like, another example is in TypeScript.

Interfaces compile faster than types. Oh, yeah. Yeah. People walk around saying, like, you should always use interface they compile well, why? Like, why can't they just make it

compile faster? Like, why should I have to Like, the end user care about that type of thing, you know? Like, obviously, I get why. But But also, most of these people have have never benchmarked anything themselves, You know? No. Removing a 1 inline function from a 1 component that is used once and not today. Like, let's benchmark that, and you tell me just how bad that actually is in in that specific process. Show me the the data, brother. Yeah. Yeah. Let's let's see it because You're absolutely right that in in many situations like what you're saying. But I think there is a certain type of dev, you're right, who just Who heard it in, 1 person said at one time, they heard that it's a bad practice, and then they're gonna they're gonna hold on to that. So enough about, my Instagram stuff.

Let's talk about the new render API. Now this one is is pretty small for user facing, which I like small user facing as I just ranted about a 2nd ago. I like it when, we don't have to do too many changes for things. So this is just a slightly different API for the render.

If you've ever used any React platform that isn't maybe a do it all for you, you've probably written a React to dumb render, rid Ever so slightly different where you create a root itself using react dom dot create root, then you pass in the root in which it will be rendered to.

And then you say root dot render, and then you pass in your app. Now the reason why this has been instituted is most likely entirely behind the scenes, but one of the biggest things about this is now we no longer have 2 Separate or even multiple separate methods for hydrating data or working with server side rendering where you now have no more hydrate method. For those of you who never rolled your own server side rendering, what you did before is you for the server side rendered, you basically rendered your entire app to a string. You'd pass that string down the line. Then in the client side, instead of saying, you know, React dom render, you'd say dot hydrate, and you you would do it via hydration. And then it would compare The information from the server side with the information on the client side, and it was often, rather hairy process and never quite was a lot of fun to work in. So Now there's no more hydrate method, so hopefully this whole process becomes a little bit smoother. I have no idea what what this actually looks like in practice besides the fact that You're just using the slightly different syntax. But for the most part, it seems like it's a it's a big upgrade there. I also find feel like that is why it took so long for us to get a lot of details what was going on is that there's a lot of stuff that needed to be done before

the next level of SSR Animations, all these, like, amazing things that we want in React, they had to sort of rearchitect how some of these things work, and The rendering was just a small, aspect of that. Yeah. Totally.

Next is that React 18 will have suspense, rid Finally, which is really exciting. The biggest thing for me with suspense coming in is that we'll no longer have to deal with everybody making rid jokes about, I've been waiting into Spence for so long. Like, okay. We get it. Everybody's got the same joke. It's very funny. But now we can all move on from that joke, hopefully. I even wonder. I think we did a show on it.

React suspense, March 18, 2019.

So over 2 years ago, we did a rid. A show on this, and now we're finally getting it. So the idea is is that when you have a component that fetches data or or takes Time to do something.

Most likely, it's like a a promise based fetch. You generally need to implement the fetching of the data and the rid Showing, like, a loading screen or or whatever at the same level unless you get into, a whole bunch of, like, Like a framework or something like that or context where you're you're loading it at a higher level and passing the data down. But what suspense will allow you to do is that you can fetch your data where you need it. And then you can show a loading screen or show nothing at a much higher level. So you have this new suspense component that you can wrap 1 or or a 100 components that are fetching data, and then that suspense component will know when any of its children are requesting resources.

First of all, you can just show nothing for a certain amount of time, which is, in a lot of cases, that's what you want. Because how many times have you been to a website and you'd see, like, a 1,000 split second little spinners, and that it feels kinda janky. Right? Yes. No. Thank you. So you can just so you can show a couple blank screen, and then there is a fallback attribute to your suspense component where it says, alright. Well, if this thing doesn't come back in 3 seconds, then show a spinner, to the actual user. So really excited about that. That's gonna make, developing UIs and Being able to just, like, fetch the data in the component that you need it without having to worry about, like,

talking it's very hard to swim up stream in React, and this will allow you to do away with those issues. Yeah. Very tough to to swim upstream. Yeah. You know what? I I rid Like that suspense is here. You could think of it as just like an await component. Right? Like, let's await on some data.

So okay. Let's, actually take a quick break to talk about one of our sponsors today. And this sponsor is going to be one that will keep you happy when it comes to the finances in your business. I'm talking about FreshBooks.

FreshBooks is the cloud accounting software that is for developers. It's for freelancers. It's for businesses. It's for anybody. Wes, do you wanna talk about FreshBooks?

Yes. FreshBooks cloud accounting. Check it out at freshbooks.comforward/ syntax, and you'll be able Sign up for a 30 day unrestricted free trial, which is really exciting. So you can use it for doing your invoices, doing your expenses, Sending automated payment reminders, being able to, log different types of taxes and then request that later. Running a business is complicated, and FreshBooks makes that easy. It gets you paid faster. Check it out. Freshbooks.comforward/ syntax, and use syntax in the how did you hear about us section.

Back to suspense here. There's 1 more thing that is coming out with suspense, and that is suspense list, and that helps you coordinate.

If you have many components, many suspense components that have loaders, you can orchestrate in which order They show, which is kind of interesting. I'm not sure. Like, have you looked into this? Like, what what would your use case for this be?

My use case would be if I was Facebook and I wanted to show an ad before and I'm just, giving some crap there. You know what? Honestly, probably something like that where you you have some content that just is oh, no. Wait. Let's loading indicators show up. So just the loading indicators

rid. Themselves or the or the components as well? Oh, sorry. I think I I read that wrong. It's it's components that can suspend by orchestrating the order in which these components are revealed the user. Okay. So that's what I thought. Yeah. Yeah. If you've got, like, a a user component and then an edit user component, re If for some reason the edit user component, was done first before the user, and then you would be like, oh, like, this doesn't make sense. I have this, like, Half broken UI. Mhmm. So what you can do is you can wait and then show them to show up in whichever specific order that you want. Yeah. There's like a reveal order where you have forwards, backwards, together. There's,

tail, which rid Dictates how unloaded items in a suspense list will be shown by default. Suspense list will only show all fallbacks in the list. Collapse shows only the next fallback. Hidden doesn't show any unloaded items.

So they give you control over this stuff. And, again, I think it is going to be more useful for somebody like rid. Facebook who's dealing with those types of interfaces where they're trying to show you something first or something second, hold off on something, wait till that thing's all all available for us. Primarily, that seems like that's the type of thing that's gonna happen when you have a bunch of data coming in from a bunch of different locations and maybe the type of thing that rid really important once you have many many team like, imagine a team's working on 1 specific component, they just throw this thing in there. But that feels like that whole thing is very separate where where this allows you

to really orchestrate at a higher level the loading of this stuff. Yeah. Because, Like, nothing is worse than when you're, like, reading something or trying to edit something, and then the one above it loads and pushes you down. Yeah. Like, that happens with images. Right? So in this case, you'd be able to load them in order or backwards and maybe even, like, animate them on in. It's kind of suspense for suspense because rid The suspense component itself can have multiple resources inside of it. But like you're saying, if you're working on a team with a 1000 engineers, You can't all be on the same set. Suspense component. So Yep. Suspense for suspense? It's like a conductor

of suspense. Totally.

Next we have here is strict effects mode.

React announced a strict mode Mhmm. In React 16, And this is something they are adding to React 18, which is strict effects.

And from reading the overview of this, we'll link up to it. There's a really good repo of all of these new features, and people are talking about it and whatnot.

But, essentially, apparently, a lot of tooling And plug ins need the ability to mount, unmount, and remount very quickly.

And in order to get fast refresh working, Fast refresh is like the new HMR hot module reloading. Mhmm. And it's very, very fast. But, apparently, they need the ability to unmount and remount really quickly rid without having to do you know, like, when you mount a component and you maybe wanna, like, listen add some event listeners or do some setup, rid Unmounting and remounting really quickly is really frustrating in those cases because you you might accidentally destroy your work. Like, if you have a Canvas element, and you need to create the Canvas element. Rid. So this is just a new API that will allow you to, I guess, hang on to those types of things. I have an idea that this is probably not for just regular developers and rid More

for plug in authors. Yeah. I never even messed with strict mode too much because strict mode, like you said, is 1638. You know, whenever people talked about strict mode, they'd say, well, why is my stuff rendering twice? I have strict mode on. And that's like what strict mode does.

Strict mode intentionally double renders components to flush out Unsafe side effects, which honestly, I'd never really I never felt like I needed to use, although, you know, that might be something that people have an issue with, but I I personally never jumped in and was like, oh, yeah. I gotta run strict mode on this because if my stuff worked correctly, then I don't know. Maybe I just didn't deal enough with dom dom stuff. This is another one of those things that I'm just like, not sure I should care about this. You know, like, why doesn't it rid Work for me. Yeah. Why doesn't it just work for me? Yeah. So the next one is use transition hook, which I know a lot of people, They see used transition, and the first thing they think of is, like, animation. And there is some some relation to animation in some sense, but, like, If you had a React spring or something and you wanna do a use transition, that would feel like a very different functionality than what this is because This is not allowing you to toggle values between 2 component states or something like that. So this allows you to basically wrap something in a transition to prevent it from being unmounted while suspending.

Rid This lets React know that it should wait for updates to complete.

Some notes here from the React team is that we classify state updates in 2 categories. Urgent updates Reflect direct interaction like typing, hovering, and dragging, and so on. Transition updates to transition the UI from one to another.

The way that I understand this in some of the most plain English, and please tell me if I'm way off base here because, you know, some of this stuff definitely gets jargony really quickly. Rid. But the way I understand this is this will allow us to do things like, hey, you. Complete this animation before unmounting.

So while this isn't a direct animation, it does allow you to do things like delay the unmounting of a component, which has been rid difficult before, and someone like me has been, saying that they really wanted to do that for a long time. So I I think this opening the door to better animations in React, but it is not itself an animation

at all. You know? Yeah. Ready. I saw in the docs as they say, why did you call it Star Transition? And they said the idea is that eventually, hopefully, this will open the door for animations in the future.

If you take a look at the docs, they give a really good example of the difference between in. Urgent and unurgent or not urgent updates.

So it's the the urgent is if you have a search box and you're typing in the search box, Setting that input value is urgent because it you literally need to set that value to state before it shows up in the text box.

And and not urgent would be rid. Setting search query, setting off firing off a result. Like, that can happen a millisecond or 2 or however many after That has happened. So they allow you to specify the difference between the 2, and rid. It allows you just to mark any state updates inside of that, start transition. You can say it is not urgent, so you don't have to wait wait on this,

Which I think also will help for SSR as well. Let me just tell you. I'm not a fan of the name. I think,

No. It's rid Same thing as useEffect. It's same thing as useEffect, useTransition.

I think if there's one of the biggest weaknesses rid. In React is the, like, the obtuse naming of things. And and, honestly, the names make sense in context, but they don't make sense for people who, are coming at this from a different context or even, like, a web context, a non React specific context. And there are so many obtuse names in React. Like, use layout effect. Okay. Yeah. Okay. It's rid. Waiting on the DOM. Like, why couldn't it be used DOM effect or something? I I don't I don't know. Like, there's there's so many little things like that where the the naming just, like, really bugs me. But Even useEffect, man. UseEffect, I think Vue had a much better naming system, and I'm trying to remember what it was like, but it was something like On rerender or something. I don't I don't remember what it is or on property change or or something that makes way more sense than use effect, but that's always been a a grape of mine since, I don't know forever and ever in React. But what's not been a grape of mine is error and exceptional handling because I do it, rid Via Sentry at Sentry dot I o, and I've been doing it with Sentry for a long time. Sentry is the very best.

They give you the tools that you need to really, really uncover And log and categorize and solve the bugs in your applications.

You're gonna wanna head to century.i0 where you can use the coupon code tasty treat, all lowercase, all one word, and you will get the 2 months for free. Now Sentry's got some amazing features to work with any of this stuff. And if you are transitioning your code to be concurrent inside of React, rid. You're probably gonna hit some bugs, and you're probably gonna want to throw a century on that bad boy and really collect those errors and and see where the mistakes you made. Rid Were you trying to use use transition as an animation hook? Well, this is gonna fire the air off because it's gonna say, what are you doing? That's not right. So head on over to century.i0.

Use the coupon code tasty treat, all lowercase, 1 word, 2 months for free. Thank you so much for Century for sponsoring.

Alright. Next one is rid Probably the biggest one, and that is SSR improvements. But I think we should hear from Scott on what his issues were rid With SSR because Scott has hit literally every issue in React SSR because he's tried to build it himself.

Even if you are using a framework like Next. Js, there still is a lot of pains because you don't know, like like, what do I wait for? Can I wait for the data? Which data should I wait for? And they're just sort of, like, taking a fresh look at all of this and, some exciting stuff. But you tell us what your your issues are with it? Yeah. In a fresh look is very much needed, and I'm laughing only because, like, the entire episode that we tossed was, like, basically,

rants about React SSR and so many of the things that have been addressed in some of this. Like, for instance and I I actually kinda you know, I kinda feel seen a little bit because In the blog post where it says react out lazy works with SSR now and it, like, hashtag just works or whatever, I say that all the time. Like, I think it in by, like, rid Ranting video that I did on YouTube a couple weeks ago. I was like, why doesn't this just work? So I kinda feel like that was just put in there placate people like me who, were very annoyed by this kind of stuff. So, really, ultimately, what it came down to for me and to sum up the entire re Unheard episode of syntax that I keep talking about.

My my grapes were mostly around the fact that if you were trying to do SSR in React, rid I don't know what it's gonna be like after version 18. It's supposed to be better. But right now, today, SSR and React pretty much don't even try it if unless you're using a like Next. Js or Gatsby did do it for you. And reason being is you end up hitting things like hydrate, where the hydration doesn't match for whatever reason, but mostly because code just flat out doesn't work in React without additional tooling. And one of the big components of that was lazy. So react dot lazy, if you don't know, is A tool for dynamically importing components.

Now I don't know the specifics of this, but I do wonder why they have their own react dot lazy instead of just using the dynamic import syntax like the view and Svelte do it. Because the dynamic import syntax and just resolving a promise re Seems like maybe a better way, but with React, they kinda like to keep it in React land. So there is React dot lazy, which allows you to do dynamic imports, and then you had to wrap every thing that was being dynamically imported in the suspense. The big problem is, of course, that neither of these things worked in server side rendering. So if you wanted code splitting or anything like that without lot of special tooling.

It really just wasn't possible. Now there was a package made by Formidable called I think it's called SSR prepass for React. And that basically ran through your site twice doing a double render and kind of ignoring the so, therefore, like, resolving all of those rid Promises kind of ignoring some of that stuff, the code splitting stuff on the server side. And while it worked, it was pretty jank, and I never got hydration to work, to be honest. And they even themselves say that is an experimental plug in. Don't think too hardly about this one. So for me, that was the biggest thing is, like, how do we get code splitting? How do we get Server side rendering, and how do we get hydration to all play nice together? And the answer is you don't, unless you're using Next. Js. Well, now with these new SSR improvements, according to the documentation, react dot lazy will work on the server, and it will just work.

Wondering big time about that because the example that they show just working in is their create react app app. And so I'm wondering, Does it just just work in create React app in Next. Js, or does it just work in every single platform in every configuration Of which I don't know. I don't know the answer to that. So it will be interesting to explore this a little bit more. But for the most part, that was my biggest beef was getting the code splitting stuff all play nicely. And if suspense itself and react lazy will now work with server side rendering, That will hopefully, reduce much of the headaches. But without trying any of this stuff, I'm certainly not going to rescind that statement of saying Don't even bother unless you are using Next. Js or something. Because

in my experience, it was way more trouble than it was worth. Years ago, I I tried to do it myself, and It was very, very difficult, especially throw in the fact that Node.

Js doesn't have a lot of the browser APIs, which is, again, something that Deno is trying to to fix as well. Mhmm. I think I saw that node allows you to is going to allow you to do import from URL now. Oh, that's awesome because that's that's part of the ESM spec. Yeah. So that makes sense that that would work. We should do another episode on Node ESM rid. Because Yep. It was probably a year and a half ago that we did it when it was still in work, and now it's it's done. Yeah. Now there's all sorts of Yeah. Import meta and yeah. And how do you use it with common JS? So we'll do a show on that as well coming up. Let's do it. But, along with SSR is rid. This thing called React Server Components, and Scott and I have been meaning to do a show on this, but it's just like we've rid been waiting for a little bit more details from React world, and this is starting to become a more popular re approach in web development in general. And the idea is instead of rendering everything on the client side rid is that you can pick specific components of your application to render on the server and to you could fetch your data on your server. That's kinda Cool if your data lives on the server as well. And then over the wire, meaning that over the network, it doesn't send React.

It doesn't send, rid Like a JavaScript, it sends just HTML really at the end of the day. Mhmm. It does send a little bit of React stuff along with it, but you should be thinking of it as Instead of requesting JSON data and then rendering it on the client, you're just requesting HTML from the server, and this is becoming a very popular approach.

Rid. There is LiveWire, which does this in Laravel.

There is Hotwire, which does this in Ruby on Rails, and now React is getting it. Remix? Doesn't Remix do that? That's a good question. I don't know. I would assume so.

I assume that would be part of it where you can just render on the server and send over a header to cache the thing. I think that's their thing. We're we're still trying to get Ryan on the show. He said he will come on. So Yeah. Yeah. We got a lot of questions about that. But this is really exciting because, like, at the very simple, I have seen some examples where you can rid Literally SQL run a SQL statement at the top of your component and then rid Put the data into your HTML and then and then fire it off. I've been keeping a a list of show notes on we're all just building PHP again.

Oh, yeah. You know, I mean, totally. It it's funny because, like, NETIER. That's what we did in NETIER. We we did Munko queries in the component. That was what you did, You know? And, like, I I felt very weird getting away from that. Like, oh, what wait. Why do I need a server as serving up the JSON and reading it rid. The client having to deal with loading states when I could just, in the past, have written I know it's, like, technically very, very different because the the media way of doing things Was very different. There was a whole pub subsystem with WebSockets behind the scenes and certainly was not running those query server side, like this. But, You know, just the flow of working in a component like that and being able to fire off any sort of DB query in the component, anything like that, That is, something that I I very much like. So, yes, sir. I would like some more, please, of that, and we'll eventually have to do that episode. It is very funny that you mentioned that episode because we we've had this episode of React Server Components sitting in our calendar since they were announced. Janu or December, they were announced. Yeah. It feels like every single, like, part of our our flow of recording is that we make the new card for the new episode, and then we drag down the React server one for the, oh, we'll do it. We'll get to it next week. I am really stoked about this because

it's going to be really nice to be able to choose whether you want your server the component to be server rendered re or client rendered or both because and what's nice about SSR is that even before any JavaScript is loaded on the page, Your user can see your page. That's kinda what Gatsby does right now. Right? You you prerender all of your HTML. Mhmm. But you could do that on demand and then just, Like, pick it up from there. That's gonna be gonna be pretty exciting, and I think that's better than another language because you literally could Go between client and server, same language, same framework. You don't have to pick and choose. Oh, is this bit dynamic? Should I write that in a Framework, or should I write this in a server rendered example?

Yeah. I hear you. It's an interesting world that we have here coming into PHP, rid and I'm I'm I'm in for it. I think it's pretty cool. We have to do

that episode. I think people people that have been on PHP the entire time are gonna be like, I rid Told you.

I told you so. I'm telling you so. Hey. Well, PHB, come to me when you have a client side routing. Okay? And, I get animations, I guess, because that's a thing. Yeah. I don't I honestly don't know. Like, that's that's really what you're gaining by this. You're gaining some the server is going to compile your code into HTML faster than the client will. So, you know, it makes sense to to move everything more and more to the server, and I'm here for it, Tapanas. So yeah. Rid. Totally.

We should say that it's not that it's the PHP, the language that we're missing. It's the fact that rid. PHP has all these things built in where you can just inject data right into the HTML and send it over the wire, or you can just visit forward slash hello.php, and that script will run for you. And there's all these things in PHP that have been there rid Since 30 years ago.

But you'd have to write PHP.

Yes. That's that's the thing. And that we're getting all of the, rid Like, obviously, we're just joking around here. Don't don't freak out at us. Yeah. But there's a lot of the features of PHP that we are seeing being recreated in rid JavaScript land, which which I'm here for. I'm I'm all here for it.

I am too.

Let's talk about one of our sponsors, which is Revenue rid Cat. Scott, can you give me a meow again?

Meow.

Is rid Part of our, negotiations with RevenueCat is Scott has to meow every single time.

So what they do is they make re In app purchases easy. So if you are building an application, whether it's for Android or whether it's for rid iOS, whether you've built that in Swift or whether you're using React Native or any of the literally Any of the integrations that you you can use to build an application, they are gonna make in app purchases rid. And recurring revenue, super, super easy in your application. So I want you to check it out. If you're building an app and you need to charge money for things, they have a really, rid. Really slick API. You can write in JavaScript purchases dot shared dot make purchase.

That is one of their methods. It seems so easy to implement.

Rid. You can use it with Stripe. You can use it with React. You can use it with Cordova, Unity, and you name it. So RevenueCat .com.

Thank you, RevenueCat, for sponsoring.

Cool. So there's also, ETML.

What is this? ETMLI?

Rid I think I did it wrong. Explain to me like I'm 5. What's the short code for that? There okay. I don't think there's a t in it.

Explain to me like I'm 5. I think it's just explain like I'm 5. I think it's just e l I 5. Yeah. You had way too many. Rid I was, like, looking at this stuff. Like, is this something I should know about? Is this

This this is like a subreddit where you can visit and just basically, can Somebody please explain to me, like, I'm 5 x, y, or z. And a lot of times we need that in development because we just don't understand a lot of these things. So rid. React has an entire thread. It basically is just a glossary of these different things, like, what does concurrency mean? What does suspense mean? What does hydration, rid SSR, discrete events, promise tech, code splitting, debouncing, and they have, these great visual, what do you call it, diagrams rid. Explain what these things are. Yeah. They're a little like sketch diagrams. They're they're really nice. Yeah. And also along with React code. So if you ready. Are listening to this and be like, oh, cool. I get it, but I don't understand what the problem would be or when I would ever need that. Check out this thread here on the React 18 GitHub because they put some real hard work into this and they're very good. Yeah. I'm all here for more and more explanation of the language, the jargon,

the concepts, the computer science y stuff, the stuff that, You know, we shouldn't have to worry about or think about, but when it comes into play here and you're writing some some new code and you want it to be, You know, compliant and all these things. It is important to have a mental model as, like, what all of this stuff is doing and why it's doing it, why it's important, or why it's necessary. So, Yeah. I I like diagrams. I like pictures. You know, me and pictures are pretty tight.

So yeah.

We should say, the Next. Js team has been they said on Twitter that they've been working on integrating the next version of React, which is what rid. I assume what this was. So they probably have been Yeah. Some sort of back chat room somewhere, which I'm I'm excited about because I think that Next. Js will probably have support for a lot of these features pretty soon after, React 18 has announced. And and that's good because there's some pretty big fundamental changes here. And in order to use them, if you're using Next. Js, you need to be able to have support for these types of things. Right? Sometimes it's like, oh, well, I'm using this framework. I have to sort of wait for this framework to support them. But it looks like the folks at React have been Having a couple Zoom calls with, Next. Js folks, which is great.

They've been having a couple of Zoom calls. Yeah. That's very good.

So I I'm excited to see what the Next. Js API looks like for the server rendered. Maybe you won't even need to think about it, rid. Maybe you will because well, to react, you will need to think about it. Well, there'll probably be some like, at a cert at one point, you need to say, okay. Do I want this? Rid Like, when this component changes, do I want it to be rendered on the server, or do I want it to be rendered on the client? And there there will probably be some sort of way to mark a component as just stream the HTML from your server, from probably a serverless function into your Next. Js application. So I can't wait to see what that looks Like, they're gonna do it through a hook called use animate to new component, but it's not going to animate. It's just going to allow you to decide for a side render. Scott is salty lately. I'm just I'm just joking, man. I'm just joking. Please don't. If anybody is taking me seriously on any of this stuff, I'm just I'm just kidding. I just think it's funny. You're not that guy. I just think it's funny how You're not that guy.

You're not that guy. Yeah.

Yeah. No. And I'm not I'm not I'm not intentionally being a hater or anything. I think all of this stuff is fantastic. I'm very happy to have it. Trust

me. Alright. So I think that is all the new stuff in React 18. Shall we get into some sick picks? Rid Sickbooks.

Tonsickpick stuff. Wes, do you have any, Sickpicks

ready to go? I'm going to Sickpick another podcast, rid Specifically an episode. There's a, coding podcast called The Change Log. You probably have heard of it. Yeah. And they just had Ryan Dahl, dev, The creator of Node. Js, dev behind Dino, and he doesn't do much publicly.

So I was impressed that they were able to get him to come on a podcast.

And it was just full of really good nuggets as to, like, the philosophy behind Dino, moving forward, mistakes. Like, he said that including TypeScript in Deno by default was a mistake.

Wild wild, statement. Yeah. He said, like, maybe that wasn't, like, something that we should have taken on, and I was like, no. No. No. No. I like that it's integrated in the type of thing. And he also thinks that TypeScript is where JavaScript will eventually end up, which I was really excited about. Yeah. He talked about, like, Making money from it, and it's just really, really good episode. Makes me really excited. And I also said that they do plan to have ready. Full support for node modules because they are currently patching the entire or just, like, replicating the entire node API.

So that is exciting as well. So good really good listen. So I'll link it up in the show notes. Well, that sounds

fantastic.

Alright. I have a sick pick coming in for y'all.

And this is, an app from an app developer that, Wes, you will definitely be familiar with this app Software, Rogue Amoeba. Oh, yeah. I always just thought it was Amoeba, but it's Rogue Amoeba. Yeah. Okay. So this is a an app rid called the Sound Source. Have you ever used Sound Source?

No. I use the loopback to create virtual Interfaces? What does this one do? So this one does,

basically, fast device switching keyboard control.

It gives you some effects and stuff like that of which I don't use, but this was suggested to me from our development manager. And he said that He uses this app specifically because when you plug your computer into a monitor or change inputs or whatever, it can remember What audio inputs you've used and what your what are your preferences and what are your it it sounds so stupid, but that's like a huge thing For me is every single time I plug in my computer, Mac OS acts like it has no idea what audio inputs I'm trying to use despite the fact I'm always using the the same 2 audio inputs. Like, there's no way to specify priority over that stuff. It's so annoying. Mine freaking uses my

rid Monitor speakers every now and then. I'm like, nobody wants to use a monitor speakers.

Never. Right? When when have I ever told you to do that ever once? There's also some neat little things too. If you're that type of person who, doesn't have a fancy setup like Wes and I, it allows you to do some built in effects. Some audio unit support, so if you wanna throw, like, a default compressor or something on your your input, that's definitely all there. That way, you don't have to do it in an app level because I know like OBS or even probably Zoom, it does some of that stuff for you. But, like, when you're doing it at the app level, you have to it up on each app individually. But if you're doing it on something like this, then you have, like, 1 app essentially to control the whole audio of your computer here. So this is a neat app, and I you know, I use a lot of rogue amoeba stuff, loopback, like you mentioned, so big fan. I'm gonna I'm downloading this specifically because It allows you to specify

where sound effects come out of. Yes. If you, like, hit backspace on something that doesn't have any text in it, rid It's like, and sometimes it's so loud. Yeah. Or the new the new one is like, like a message notification sound.

Yeah.

And sometimes it's way too loud, so you can adjust sound effects to be

quieter than your regular volume. You can actually do that just in Mac Settings, but it does get out of sync sometimes. Yeah.

So if you do system preferences if you go to system preferences and then you go to audio, there will be 3 tabs there, and you're probably used to the input and output tab. But give a look at that 2nd tab, the sound effects, and, I've turned mine down to 0 because, screw that. I do not want any sound effects coming. Isn't it weird how those sound effects are, like, always a different sore or, like, a rid. Audio source, then your audio output. Like, those should just be your audio output. Yeah. You can you can specify.

No. I I have it. Play sound effects selected output device. So mine is,

but, I do have my layer volume turned down. Maybe I need to turn down more. I'm gonna still check out this app. Yeah. Do it to it. Cool. Well, that is SickPix. Shameless plugs. I'm going to shamelessly plug. Our latest course is going to be on Svelte components.

You're gonna be talking about Svelte so much because I absolutely am a big, big fan. I'm a convert. I think it's fantastic.

Then in this course, we're gonna be showing you real world Svelte where We take on the task of building very common type of components that you're used to building, and We're gonna show you this. So what this is gonna doing by the end of, like, the end of writing a handful of, Svelte components is that you're going to understand How to create your own dynamic components to do just about anything in Svelte. So check it out at level up tutorials.comforward/pro.

Sign up for the year and save 25%. Thank you so much, for, For your LevelUp tutorials, for being your job. Thank you so much ready. For LevelUp for sponsoring this, yeah, shameless plug. Yeah.

I'm gonna shamelessly plug my beginner JavaScript course at beginner javascript.com.

It's a fun exercise heavy approach to learning modern JavaScript from scratch. So Whether you are a total beginner to JavaScript or you're like, I'm pretty good at JavaScript, but I feel like there's some holes, and I like to brush up and just rid Wanna make sure I'm doing things appropriately.

This is a course for you. It's at beginner javascript.com.

You can use the coupon code syntax rid For an extra 10 loonies off, thank you, Wes, for having your own course.

Yes. Exactly. Thank rid Thank you. And thank you, West, for making your course so much fun. You're welcome, Scott. And thank the listeners of Syntax for downloading this episode, And, thank you for the creators of all these libraries for making them. And thank you for the Internet for piping this in. And thank you. Thank you for rid Al Gore for the series of tubes. There is a podcast that we have on our our docket here called, Like Thanksgiving

or something like that, where we're talking about how Did we really? Not I don't know if it's Thanksgiving the Thanksgiving episode, but, basically, rid. It's how awesome things are versus Oh, yeah. 5 to 10 years ago, in terms of web development. And I just rid. I wanna go through all of those and just, like, look at where are we at right now because people can be kinda negative sometimes with web development. And and, like, I was, like, sitting back being like, man, this stuff

this stuff's getting good. Yeah. Oh, yeah. It's fantastic. And there's if you ever hear me saying like, criticizing anything, it's rid I'm not angry about it. You know what I'm saying? Like, for me, it's all so good, and I'm so happy to have it also.

We are we are definitely spoiled from the open source community in the best possible way. Spoiled, rotten. Spoiled, rotten.

Alright. That is it. Thank you for tuning in, and we'll catch you on Monday. Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows, and don't forget to subscribe in your podcast player or

ready.