The React Round Up panel joins the show as Jack takes the lead to talk about the various improvements made in the React Ecosystem. Additionally, they offer their thoughts and insights on these updates and share their potential value to the developers. They also talk about whether these features have an impact when used in apps.

Hello everyone. Welcome to another episode of React Roundup. I am your host today, Paige Niedringhaus, and we have a special panelist episode for you. So

 

Woohoo!

 

I'm joined by Jack Harrington

 

Hi?

 

and TJ Vantol.

 

Tj_Vantoll:

Hey everybody.

 

And today we are going to be breaking down for you some of the big changes that have been happening recently in the React ecosystem. So this includes React 18, the new and improved version of React, Next 13, which coincides very nicely with React 18,

 

Yes.

 

and basically all that has to offer. So we've got new hooks, we have release notes, we have... big announcements and flashy conferences that have just happened. So we're just kind of try and dissect all of that a little bit to help you better understand what changes have taken place, what these mean for you going forward as a developer and basically how to try and take advantage of them as everybody tries to wrap their hands

 

Hehehehe

 

around the new and improved React. So I will let Jack kick us off because he really has been the one of all of our panelists who's been the most up to date with this stuff. So let's let him kind of lead us into it.

 

Sure, so this all kind of started with an RFC that came out, I guess, month and a half ago or something along that line. It was just kind of innocuously titled like first class support for async in react and like, oh, that sounds kind of cool. And again, I

 

Mm-hmm.

 

got a lot of buzz. So I'm like, oh, clearly interesting. And I took a look at it and it's cool. So basically, the idea is that they want to support. obviously promises as first class citizens and

 

Mm-hmm.

 

it gets interesting because you can kind of do it differently on the client than you do on the server. Right? So on the client, it's gotta be a hook basically. And so they created a new hook, which is kind of generically called use like no, no use something just, just use.

 

Yeah.

 

And the idea is that you give it a promise you've generated. Somewhere and then when that promise and it then that use hook then. Attaches that promise waits for the results and then gives you back the data coming out of that promise and one interesting twist on it is it's the first. A hook that you can use conditionally. So all the

 

Ooh.

 

other hooks. Yeah. Right? So all the other hooks you could do, you had to have like all your hooks regardless, you know, they're going to nine hooks. My component gotta be nine hooks every freaking time. You can't like

 

right.

 

return or short circuit. That's going to freak out, which

 

Mm-hmm.

 

makes sense, right? The way that they manage hooks by index basically. So that's why that is. But this is, this is cool. Actually. You can basically say, okay, I have a hook that's going to go get, you know, my response from my server. And then maybe conditionally, if that one resolves, then have another use that would then give you the JSON from that. If that's the way you want to play it. And as you know, you

 

Mm-hmm.

 

could kind of bundle that all up. One fact, the nice thing about this one is it, I mean, it's just generically any promise. It doesn't have to be a fetch from a server. It could be, you know, a promise around a set interval, around a set timeout or whatever, whatever promise you want kind of thing, when

 

Mm-hmm.

 

it triggers you go. Um, and then. Well, let's cover the whole RFC and then we'll kind of dig into the specifics. And then the server side of the house is entirely different,

 

Mm-hmm.

 

entirely different. And it was around react server components basically. And the idea is now you can actually define your component function as an async function is kind of cool. And in that async function, you can use a weight and you can do something like a weight of fetch. Right right there and it'll just block that component until that. Promise resolves and then you'll return again. I guess you know you return your data or whatever your your your JSX. And through the magic that is react, I guess you're going to have multiple of these running simultaneously, potentially multiple running simultaneously. If you have multiple things on a page that are going to need data and do fetching so it's

 

Mm-hmm.

 

conceptually. If you think about it from a next perspective, it would be a replacement for get server side props

 

Mm-hmm.

 

and also get static props in the sense that you are doing that if you're doing that. And so the RFC came out and then I think next conf is like two weeks later,

 

Yeah,

 

you know?

 

it was pretty quick.

 

Yeah, it was really quick. And I remember like, so yeah. Oh, well, okay. Backing up. So this RFC came out and then you could get yourself onto the experimental branch of React and then you can import use as an experimental hook. You couldn't really do anything with the async stuff because there was no servers implementing that at the time. At that

 

Mm-hmm.

 

time, which of course like two weeks later the ground shifted, NextConf came out and they're like, hey, we have full support

 

We support

 

for all of this.

 

it, right?

 

It's just, you know, just. You're happy happens chance well, you know, and I've heard anecdotally. They're like there was a next JS guy, you know, versatile over whatever. It was literally like pushing React branches at next comp. And it's like, so the two are sort of like becoming very, very interconnected,

 

connected.

 

you know. Yeah.

 

Tj_Vantoll:

actually, I, cause I want to step back for a second.

 

Yeah, sure.

 

Tj_Vantoll:

And so you

 

Please.

 

Tj_Vantoll:

said this is, they said this is an RFC. So that basically just a doc, how much of this is real? Because you said that next announced support for some of this, but is that just in next is like the use hook available in the latest version of react. Can I just use it or how, how much of this is actually like

 

Yeah,

 

Tj_Vantoll:

live stuff?

 

should

 

I

 

I

 

think.

 

update right now to

 

Hmm.

 

the latest

 

Tj_Vantoll:

Yeah, yeah, am I

 

and

 

Tj_Vantoll:

behind

 

put it into

 

Tj_Vantoll:

Jack?

 

production?

 

I think it's I think support for use is now officially out in 18.2.

 

Tj_Vantoll:

Okay.

 

That's not going to help you with the RSC. The react server component thing though. I mean, that's that's its own sort of. I guess support for it is in the frame is in is in react, but it's also in in the framework in next,

 

Mm-hmm.

 

because there's kind of a. Yeah, but if you just want to use use on a client, yeah, just pull 18.2 today and I think you can just literally just import use. And there's definitely, you want the, there's a huge foot gun with use by the way, of course. It's like

 

Naturally.

 

the new use effect naturally,

 

Right.

 

right? So everybody's just gonna wanna go in and say, cool, use and then parentheses fetch and then parentheses blah. Right.

 

Tj_Vantoll:

I already had the file open. I was already typing that, so. It's just.

 

Hey.

 

Here's the scary part. That will work. You will see results on the screen. You will also be in a glorious infinite request loop.

 

Oh, again?

 

Again, again,

 

Infinite loops again?

 

how is it that every time there's a foot gun in React, the result

 

It's

 

is,

 

infinite

 

it's an infinite

 

life.

 

loop. Exactly. Exactly. So that's it. Yeah.

 

Oh

 

And

 

no.

 

the reason is the reason is simple. It's a reference problem. Basically, you know, you the fetch resolves, it gets the data from the fetch. That means that you rerender because there's some state being set. So you rerender, which in

 

Mm-hmm.

 

turn fetches again. And that's a new promise. So uses like, Oh, it's not the same as the old promise. And even though it's exactly the same thing, but, but references like react doesn't care about the contents of things that care about cares about the reference.

 

Mm-hmm.

 

And so in this case, the references new therefore, and even if it wasn't infinite loop, you'd at least get two, two fetches because like the next time you went through, you just fetch again, you know, and every time you'd rerender the component, you just fetch. So

 

Mm-hmm.

 

you have to create some sort of. Way to cache that promise, um,

 

Mm-hmm.

 

and you could move it out of the component itself. That's one way to do it.

 

Mm-hmm.

 

Or you could use something like a, you know, some sort of function that would just say, Hey, given this name of this and this fetch function, go and make a map where it's like this values is this promise. And so it returns the same promise over and over and over again. That. That's the way to kind of defeat it. Now there is, I think, another RFC coming for a new a new function called cash, which I think is going to do that for you as part of the framework itself. Yeah,

 

So,

 

yeah.

 

so why would I use the new use function instead of either a making a custom hook that does this fetching for me, which is a very valid option with the way that react currently is or using react query and just not having to worry about any of that because it takes care of basically all of it.

 

Mm-hmm. Good question, you a Pat Benatar fan? Remember

 

Sure.

 

that song, it's a little too little, it's a little too late? I get the feeling that this use function is literally that, you know, there

 

Oh.

 

are such good alternatives like React Query and SWR. I mean,

 

Mm-hmm.

 

nobody was using, well, not nobody, but like the kind of way that we would teach folks, hey, use use effect and use state to go make a fetch. Come on, nobody does that in production, right? Everybody uses React Query or a really well done custom hook. But I mean, in the case of like React 18, we had the double use effect and people are

 

Mm-hmm.

 

like, What do I do like use use you react query? It's a great great library.

 

It's a, yeah,

 

Just

 

great

 

use

 

library.

 

it

 

Battle

 

right?

 

tested, well written.

 

So yeah, so for me yeah, use is like no, it's cool, you know, but like it may be that situation we different if it had been with us since when hooks came out like

 

Right.

 

the initial hook, because it always seemed like the one that was missing like we have all these promises like why do we have a support for that? But

 

Mm-hmm.

 

here we are.

 

Tj_Vantoll:

I mean, I could see it if maybe this next step can remove some of that additional complexity, because there is something that's really appealing about, there are some apps where all I need to do is just fetch from some endpoint, right? And

 

Mm-hmm.

 

Tj_Vantoll:

just having a simple way of doing that without a library, I think there's a lot of appeal there, but it sounds like at least at the moment, you have to add enough additional logic that it's really not much of a benefit beyond just like, you're... You're almost like re-implementing like use effect and then storing in state. Even that basic option is almost a little bit easier.

 

Yeah.

 

Yeah, I somebody asked me a really good question. I didn't have an answer. I should so I need to go research this which is what happens when the promise catches and I was like I don't know and my my

 

Hehehe

 

Tj_Vantoll:

Hehehehe

 

hunch is that It probably blows up and you probably want to wrap it in the suspense or an error boundary But either way that ain't what you want to do in production, right? That's that's ridiculous What you want to do is like have? You know something in the in in the return that says hey, this was an error and then you can put up a pretty error message and blah blah blah blah.

 

Yeah.

 

Of course, React query has all that for you.

 

right.

 

With the status, but in the case of just a simple fetch, if you if you want it more than just a happy path demo application, right? What you probably need to do is wrap fetch in a function where that function then like does both, you know, then and catch. And in the term

 

Mm-hmm.

 

and when it catch it would like it would resolve, but it would resolve with like error, true error

 

Right.

 

string, blah, blah, blah.

 

Yeah.

 

And when it, yeah. So,

 

But it

 

you

 

needs

 

know,

 

to

 

that's

 

handle

 

just a lot

 

it.

 

of work, man. Like,

 

Tj_Vantoll:

Yeah.

 

well,

 

Tj_Vantoll:

And well, and at that point you're basically creating a custom hook,

 

yeah, exactly.

 

Tj_Vantoll:

right? Cause that's like, that's, that's

 

Yeah.

 

Tj_Vantoll:

like custom hooks one-on-one, right? You do your fetch

 

Right. Yeah.

 

Tj_Vantoll:

you to return your data or your air condition.

 

Yeah, and then

 

Yeah.

 

it's done.

 

Tj_Vantoll:

So.

 

Yeah. So, you know, I think, right, you know, 4k for SWR and you get all that kind of battle tested for free for free for

 

Tj_Vantoll:

Yeah.

 

that,

 

Mm-hmm.

 

you know, 12k

 

So basically,

 

for React Query.

 

the RFC for use didn't set the React world on fire in the way that they were hoping that it would. Everybody was like, why would we use this, myself included, when we have better options that have been around for longer that have handled more scenarios? Or we can basically create more custom hooks with this?

 

Yeah, they certainly didn't do the killer app. Like

 

Mm-hmm.

 

there's no like, oh, look at this demo that's so way superior to everything that we've been doing in the past that is undeniably cool. Like

 

better.

 

we didn't get that. We just got like, here's a tool. Use it, don't use it. Yeah, you know, whatever. Just go good. And maybe

 

Mm-hmm.

 

somebody will come out with a killer app where they'll be like, oh my God, look at this book that I was able to get rid of

 

Ha

 

a gazillion

 

ha

 

lines

 

ha!

 

of code. Hasn't happened yet.

 

Tj_Vantoll:

So,

 

Okay.

 

Tj_Vantoll:

okay, that's used on the client,

 

Right.

 

Tj_Vantoll:

right? So that's in 18.2. So the server end of things, I think I still don't totally have a great handle on, because you mentioned it as in Next, you could replace like get server side props and such.

 

Mm-hmm.

 

Tj_Vantoll:

Can you, and I don't want you to restate exactly what you, but like, can you paint a picture of what that looks like, or like

 

Sure.

 

Tj_Vantoll:

how I might

 

Well,

 

Tj_Vantoll:

actually use

 

Well,

 

Tj_Vantoll:

it?

 

it depends.

 

Tj_Vantoll:

And go

 

yeah.

 

Tj_Vantoll:

ahead,

 

If

 

Tj_Vantoll:

Paige.

 

you've done PHP, you already have the picture in your head. It looks like

Yeah.

 

PHP, basically. And then many, many folks have been like, this is PHP. It looks like, yeah, it is. And it's just really nice, honestly. I mean, instead of having, you know, if you wanna go get some data from a service on the server side, and you have your component that's gonna render it, instead of having two functions in Next, where it's like export. function, get server side props, blah, blah, blah. And then you do your, your fetches, and then you return your props, and then that gets passed into the next one. You know, you just literally like have one, the one component it's not, and you just add async in front of it. And then you just do the fetch right there. And one of the, I guess, it to the extent that typing ever was an issue in TypeScript world, like you had to marshal the types between get server side props and

 

Mm-hmm.

 

the actual component.

 

JSON serialization, which forever

 

Kind of pain in the butt.

 

shoots me in the foot with undefined and null values.

 

Yeah, yeah,

 

Ha, ha,

 

yeah,

 

ha.

 

right exactly. But it just it's it's elegant and it's pretty, I guess. So you start getting into some weird. Effects though with it because like, let's say that you have a combination of server side components and also components that want to render on the client and on the server. Now in next 13, you have to declare your client side components. So if you want it to run on the client. You have to put at the top of the file, quotes, use client. That's be the first line of the file.

 

Okay, so let me

 

Okay.

 

ask a clarifying question. With next 12 and below, get server-side props, get static props, those have to be called at the page level. So you can't

 

Right.

 

call them inside of child components that are injected into the page. Like if I have a chart, I still have to get the, I still have to have my page fetch the data, pass it to the chart, chart component renders it. So...

 

Yes,

 

with,

 

ma'am.

 

with server side props or server side components are, is it now that the chart itself can go

 

Yeah.

 

and fetch that data and it

 

Yeah.

 

will, it doesn't care that it's a child component or a deeply nested child. It just, it's, it is fully capable of doing that.

 

Yeah. Fantastic question. Yes, it does. Um, I guess the, uh, like the one little thing that worries me about that is like, if you've got the case where a component, you get some data and then that infers that you should then go and render a component, which in turn goes and renders more data. or get fetches and renders more data, then you might have multiple rendering cycles on the

 

Mm-hmm.

 

server, which is something that Next.js 12 kind of gets around because it's like, you can only get your data in one spot. And once

 

Right.

 

you got it, then you're good. You got to prop it around or context it around, but you know, whatever,

 

Mm-hmm.

 

but you have to, you do have to make sure that you get everything going. But I can imagine from a dashboard perspective, that that ability to basically have any kind of, you just bring in a widget and it just goes and it gets its data and you're good to go. And that's that's pretty cool actually.

 

Mm-hmm.

 

Some little hiccups in there. If you create that async function right here, I don't know chart chart component right and you define it as an async function, it cannot then be a client side function. So you kind of have to do this weird little dance where it's like you're probably going to have like a chart container component that's going to go make the is going to be an async component. A server or react server component. It's going to go get the data. And then it's going to pass it in the basically pass it to a client side component, which is the chart. Because I obviously I'm guessing the charts going to have some sort of client side interactivity, right? Otherwise, what are we doing here?

 

Right.

 

Um,

 

Ha ha.

 

yeah. The, the gotcha in that is that whatever you pass to that chart. In terms of props needs to be serializable. Jason's serializable.

 

Okay.

 

Or Yeah, when you think about it, fairly obvious reasons of like, you know, blah, blah, blah, blah, blah. It's like, I mean, you deal hydration thing, right? We're going to go and take a whole bunch of state and

 

Mm-hmm.

 

then have it in the document and then rehydrate and all that. But so conceivably and I haven't really seen this so much. Oh, and looking at the flame graphs, the idea is that it's kind of moving towards like islands architecture. So,

 

Mm-hmm.

 

you know, most of your page would be. RSC server side components. And then you would have these little islands, which are a client side component, combination client side and server side components. I

 

Yeah.

 

think that's when you say you want client, it's client and server. And yeah, so and then in that hydration phase on the client, which has been such a thing that everybody's worried about nowadays, you should see less of that. I haven't.

 

Mm-hmm.

 

Seen that, but it's hard to tell. I mean, I've used such small apps when it comes to Next.js that it's all right in this with testing this that I don't I'm not sure I see it. Yeah.

 

Yeah.

 

Anyway, fascinating stuff, but it's getting all

 

Mm-hmm.

 

these weird rules like it's like, oh, you can't have this

 

Hehehe

 

nested within within this or clients. It's just ah, it's great. Yeah.

 

Yeah.

 

Many, many people saying I hate react. God, it's always getting

 

needlessly,

 

more and more complex.

 

needlessly

 

Yeah, needlessly

 

complicated

 

complex,

 

is what it sounds

 

yes.

 

like. It's like you have to know ahead of time, is it gonna be client side? Is it gonna be server side? Is it gonna be both? If it's both, then you have to do this and, ooh.

 

Yuppur. That's why they pay us the big bucks, I guess.

 

Tj_Vantoll:

Well, I think there's still relatively easy ways of implementing. These are in a way, pretty advanced optimizations in a sense.

 

Oh yeah.

 

Tj_Vantoll:

When you get to this point, it's like I need to find control over which component renders where. The way I view it is that this at least gives you tools so that if you're in an advanced condition, which you might be. If you're building... production apps, especially like public facing

 

Hmm.

 

Tj_Vantoll:

ones, you might need these tools because milliseconds matter.

 

Mm-hmm.

 

Tj_Vantoll:

But if you don't, like I'm building an internal app or I'm building whatever, some like one-off thing, then I can get by without knowing the intricacies of all of this, because

 

Yeah.

 

Tj_Vantoll:

I just come up with some way for my thing to get data. It loads good enough. I

 

YAH HAH!

 

Tj_Vantoll:

get on with my job.

 

Right, I move forward.

 

Yeah,

 

Tj_Vantoll:

Yeah.

 

certainly with the eye I look at it, there's the high end stuff where I think this plays

 

Mm-hmm.

 

very well and then there's this sort of, hey, it's our dashboard. If it takes three seconds to load, you know, it's an internal dashboard. Just go

 

Hehehe

 

get a coffee, you know, whatever.

 

Tj_Vantoll:

Yeah,

 

Not that it's

 

Tj_Vantoll:

but

 

gonna

 

Tj_Vantoll:

it's

 

take

 

Tj_Vantoll:

like.

 

you three seconds to get a coffee, but you know what I mean.

 

Tj_Vantoll:

Yeah, well, and but if like next is driving your like shop e-commerce platform

 

Oh lord,

 

Tj_Vantoll:

that

 

yeah.

 

Tj_Vantoll:

pays that pays your bills, then like, yeah, you're going to want to

 

You

 

Tj_Vantoll:

be in

 

need

 

Tj_Vantoll:

here

 

that.

 

Tj_Vantoll:

knowing exactly how this works.

 

I'm gonna go to bed.

 

Tj_Vantoll:

Exactly what you can move to the server exactly what's going to decrease your loading times because that that means money for you at the end

 

Right.

 

Tj_Vantoll:

of the day.

 

Mm-hmm.

 

And weirdly, I guess this all somehow connects to Shopify and hydrogen, because they were doing

 

I

 

that

 

was

 

whole

 

just

 

React

 

gonna

 

server.

 

say,

 

Sorry.

 

it's so interesting that you mentioned the e-commerce side of it, part

 

Right?

 

of it TJ, because

 

Yes.

 

of Shopify, who just

 

And-

 

acquired Remix,

 

Right.

 

which has been a next, well, it's not a next, but it's been a react disruptor, I guess is the best way

 

Hehehehehe

 

to put it. It took... It took some of the good ideas from React, but then tacked on more and took some stuff away and kind of went with more of an island architecture and server side stuff. So, yeah, it's very interesting that now it, it almost sounds like Next and React are trying to pivot away from client side everything, which is really where React started its life into

 

Mm-hmm.

 

server rendered for blazing faster. internet stuff.

 

Yeah, yeah. It's, yeah, I just, hmm. Remix not really sure what the strategy is there, but that had react server components way before react server components. I think we're ready for prime time. I

 

Hehehe

 

mean, I think this is I would say this is when react server components next 13 is is reaction. It's like, it's like, this is the real deal. Like there's racing components and blah, blah, blah, blah, blah. They do all that sort of stuff. And yeah, and I guess. It's a little weird like The next JS and react stuff had gotten so tight because it kind of starts to lock out any other,

 

Mm-hmm.

 

you know, potential vendors in that space. And it's almost

 

Yeah.

 

like, yeah.

 

Gatsby is still there, Jack. Gatsby's not giving

 

Yeah,

 

up. They're just,

 

right. Astro

 

they're

 

is still out

 

still

 

there.

 

trying

 

Gatsby

 

to plug

 

is

 

along.

 

still out there. Yeah, I think, didn't Gatsby have a cool new Laval Hala release just recently?

 

Yes, yeah,

 

What was that

 

they

 

about?

 

are, I'm not completely sure because I've just kind of skimmed the releases, but it sounds like Gatsby is trying to make themselves even more dynamic, although they're still a static site generator. So I think that their idea is, and this ties in well with their Gatsby Enterprise platform that they want you to host all your sites on. But

 

Oh.

 

their idea is that they can update smaller portions of the statically generated site, I guess, based on new data that's coming in

 

Sure.

 

without the user noticing, or I guess having a loading spinner or some kind of a delay before they see the new data. So I think that they're trying somehow to be more

 

Oops.

 

real time without.

 

You're a third page.

 

Am I still here?

 

Tj_Vantoll:

We've lost Paige, but we'll give her a second.

 

Yeah.

 

own.

 

It was so close. You were saying, Oh, God, where does she end up?

 

Tj_Vantoll:

I think you probably want to just rephrase the, like the, what they're trying to do. Cause you, you had started saying how updating parts of a page

 

Right, yes,

 

Tj_Vantoll:

and data and such.

 

I was

 

Tj_Vantoll:

And,

 

glued. That's why I can,

 

Tj_Vantoll:

and some are,

 

yeah.

 

Tj_Vantoll:

and some are, well, you were choppy for a bit and then you were gone.

 

Go on.

 

Oh

 

Tj_Vantoll:

So

 

man,

 

Yeah.

 

okay. Well, it seems to have come back. I'm back at 99%

 

You're back.

 

uploaded.

 

Okay.

 

So, the idea I think behind Gatsby and the latest releases that they've done is that when you're hosting on their Gatsby enterprise platform, which is ideally where they want you to be because it gives them the most control and the most revenue generated from it. But the idea is that as new data comes in, even though it is a statically generated site, I think they've figured out a way to kind of update and insert those new bits of data without being disruptive to the user, having to have a loading spinner of some kind. I think they're trying to become more real-time or more update-driven without it seeming that way to a user. It seems like a static site, but... they're still pushing fresh data in somehow. It's kind of magical, but it's an

 

That

 

interesting

 

was cool.

 

pivot. And I think

 

Yeah.

 

a lot of sites could benefit from it because having to run a cron job every night to see has my site changed? Do I need to rebuild it and push it back out if it's a static one? You know, that just takes that part of it away. So that'd be cool if it works.

 

Yeah. I'll give you a comment section on your

 

Yeah.

 

pages. You can do the overnight thing to regenerate

 

Mm-hmm.

 

the static stuff for SEO, but then you can also have that kind of live update where you get the most recent comments.

 

Yeah.

 

Then I guess on the e-commerce perspective, maybe the price, you know? It's like...

 

Price would be a big one. Keeping track of quantity, you know, as you're selling

 

Ah,

 

through things.

 

yeah.

 

Yeah, I mean, there's probably a million different things where that would be really useful for an e-comm site.

 

Yeah.

 

Tj_Vantoll:

Yeah, it's a decent business model. And it's the sense that like, I have a feeling the reason remix ended up selling or whatever their arrangement was is it's a hard business being a framework on its own without being tied to

 

Mm-hmm.

 

Tj_Vantoll:

some sort of a service. And it makes me wonder what Shopify's plans are. Cause of course they say, well, like every acquisition ever, right? We're going to keep remix the same. We're going to keep it out

 

Ah!

 

Tj_Vantoll:

into the. Like. This is the same line you hear all the time. And it'll just be interesting to see if their, if their goal is like internal usage, like they see

 

Mm-hmm.

 

Tj_Vantoll:

a way of remix, like really making the Shopify experience really good. Or if their goal is like grow the remix community, like, or like integrated into some sort of product. I don't know. It'll just sort of be fascinating to see how exactly that's gonna play out.

 

My hunch is that what they're trying to do is they're trying to get in the small, medium sized market. Basically you're selling cookies on Shopify. You're using Shopify, you know, hosting the whole whole dragon drop. Here's my,

 

Mm-hmm.

 

my box of cookies, whatever 12 bucks. Um, and then you get, you get big, right? You know, and now you want to have an interesting experience. Now you want to have more texture to your experience where potentially I don't know, 3D rotating cookie boxes or whatever. Pushing

 

Tj_Vantoll:

Hehehehe

 

this metaphor way too far. But, you know, and hey, the Shopify UI just ain't cutting it. So, and I think that's where hydrogen was playing was basically cool. We can still stay on, have our data in Shopify. We'd have our site hosted on Shopify hardware, apparently,

 

Mm-hmm.

 

using hydrogen and... You know, there, there you go. And you can make a better experience because get a few fiber reactives or whatever, and there you go. Um, so I don't know. Maybe I don't know what the market for fiber and reactives is, but I think. Folks

 

Tj_Vantoll:

500

 

might.

 

Tj_Vantoll:

or 5000 or yeah.

 

Yeah. Right. Yeah. 500 an hour.

 

Tj_Vantoll:

Yeah. Yeah.

 

Um, so yeah. The, so. But obviously hydrogen didn't really take off. I mean, I can throw a little shade on that, but whatever. Um, and I, yes. And now they pick up remix and I guess the idea is, you know, yeah. And so instead of using hydrogen, you'd use remix and the big brain trust at remix would make sure that it's, you know, it's more open source friendly. Cause I think that

 

Mm-hmm.

 

was one of the things about hydrogen was basically, at least from my perspective. They made all the decisions for you. You you're going to be on V. You're going to be on on their version of GraphQL. They're going to be on React server components. Do I get a choice in any of these matters? Oh yeah. And Tailwind. Do I get a choice in these matters? No, you do not. That is it. That is Hydrogen. Enjoy. We've made decisions for you. And that I know that doesn't play like open source folks. No, that's not a thing. You don't get to decide

 

Mm-hmm.

 

that. Right.

 

Tj_Vantoll:

Well, I know this is very anecdotal, but we have a Shopify store at Blues and I don't know anything about how it runs by the scenes, but I know every time the person here that has to update it has to update it, they always complain when they have to update it.

 

Womp Womp. Okay.

 

Yeah,

 

Tj_Vantoll:

So

 

and I don't think that it's a big store. I think it's one of the smaller size stores that has less interactive stuff because for us is purely just an ordering conduit. We have

 

Great.

 

our own website that has developer docs. We have another one that is marketing. So it's just there basically to go buy things.

 

Do you have an interactive console as well?

 

Yes, we

 

Oh

 

do.

 

cool.

 

You can, well, there's two ways that you can do it. You can actually download an interactive or a CLI that allows you to work with our hardware from your command line, or you can actually do the same thing. Basically, through our developer experience site, we have a web rebel that is basically a copy of the command line. So you can just plug your hardware in to your

 

Okay.

 

computer and then connect to it that way, which is pretty awesome.

 

Cool.

 

I use it all the time, actually.

 

Nice.

 

Tj_Vantoll:

And I'll attempt to segue back here. It runs on next JS,

 

Woo!

 

Tj_Vantoll:

which is.

 

It does.

 

You know, people plug their stuff all the time and I don't think we ever plug blues, so why not? Let's do it. It's

 

Tj_Vantoll:

Yeah,

 

all

 

Tj_Vantoll:

no,

 

good. I...

 

Tj_Vantoll:

absolutely plug it.

 

Yeah.

 

Tj_Vantoll:

But I do wanna know more, like Jack, do you have like another, like a couple of their favorite things about Next 13? Because I need to know whether we need to upgrade that experience

 

I

 

Tj_Vantoll:

or

 

think

 

Tj_Vantoll:

not to take

 

one

 

Tj_Vantoll:

advantage

 

I think you can.

 

Tj_Vantoll:

of this.

 

Yeah, I think you can upgrade. Just on its own. I mean it just you know that's fine. The image well, no, so the big the big other thing that happened is the now app directory. So all your pages directory instead of having pages you now have app and it's got a different layout to it. And so one thing you actually still will have a pages directory because if you had any API routes, those have to go in slash pages slash API.

 

Mm-hmm.

 

So. Yeah, it still stays.

 

stays the same. Yeah.

 

That's the same. That's where it remains the same. But now if you have, um, this app directory, do you have, it's just organized differently. Like you can have layouts at multiple levels. So if you have like a, I guess like this, you can have a like slash high first level routes would all have the first level, the layout in the first level of that app directory. And then if you have. Subdirectories like I don't know, like settings, preferences, profile profile, right? So you call it a web profile. Um, you could have a subs, you can have a sub layout within. Preference within profile that would have, it would be contained visually within the layout of the top level profile. So you could add things if you want, like you could add providers where you maybe Just all kind of nice. I think there's also there's error. It was a couple of different special routes. So yeah, no, it's cool. Like I'm digging on that. And as Paige pointed out, like the idea of having components kind of nested in there and all, like grabbing their own data is really cool. There's also an upgrade to image, as I recall. I think there were some fixes to that. couple of spot things. I mean, it's a big release because of the whole 18.2

 

Mm-hmm.

 

and the app directory. It's a lot of pill to swallow conceptually.

 

So do you know, is there, or you may have already done this, is there a path to migration? Or is it really, next just says, you know, update your dependencies and go to 18 and everything should still work? Are there breaking changes? Are there things we need to be aware of before we try and potentially undertake this?

 

As far as I know I was talking to somebody some maniac who was like I am I have bladed on the day and it was great. He's busy and you're like, whoa, because I mean, I think actually it was the Theo was doing like a, you know, his usual live stream with that. And I was like, he was having no end of difficulties with some weirdness. Like they patched fetch. And so it was like returning, you know, it would work fine if the payload was like less than, you know, a couple of K. But over that, it would die. And you're like, what?

 

Oh no.

 

So there are little issues like that. But I think that's Apparently gone, seemingly gone. I haven't seen it myself. Um, it probably is, it's a version upgrade. And then I think you can incrementally adopt app the app directory and the ordering I think is like, if it sees something in page, it'll use the page one first and then if it doesn't see that route in page, then it'll look in the app directory so you can just start slowly migrating routes over one by one.

 

Tj_Vantoll:

Yeah, and per there, I found their migration guide. And

 

Hmm.

 

Tj_Vantoll:

if you, if you trust them, it should be very simple,

 

Hmm.

 

Tj_Vantoll:

but it looks like they move some of their stuff to, uh, like a slash legacy path. So like your existing images, you'd have to, you have to get the old image component from slash next slash legacy slash

 

Mm.

 

Tj_Vantoll:

image. So if you wanted to, it sounds like you just upgraded to V 13 and then like some of these new components. If you want to keep using the old ones, you have to change your path

 

Oh, there's also a

 

Tj_Vantoll:

to

 

font

 

Tj_Vantoll:

the old

 

thing.

 

Tj_Vantoll:

ones.

 

Yeah, they've also got new support for fonts, like big time support for fonts.

 

Oh nice,

 

Like, make it

 

that

 

very

 

was always,

 

easy to like...

 

yeah, kind of a pain.

 

Yeah. Oh, I just did this thing with, uh, you know, my... Man, my current job, they're all about, like, the very small details. And it was like, oh no, we don't want to use the material icons, we want to use the font awesome icons. And font awesome plus next requires a little bit of... A little bit of hijinks. You know, and it was like, it was sometimes work, sometimes not. And sometimes I when it didn't work, the icons are massive. And it was like,

 

Oh no.

 

ah, it's crazy.

 

Tj_Vantoll:

No,

 

Oh, awful.

 

Tj_Vantoll:

I'm a huge fan of this because I've in previous lives for web design, I had implemented sites where the designers were obsessed with custom fonts. They're like, we need all four of these and none of these can go. Right. And this was for the, like a public, the, like the dot com, right? The homepage for the entire company. And they wanted four custom fonts because they needed different fonts in the header and all of these things. And I just remember going through just absolute nightmares being like, there's only it's the, it's the site on the page that should load the absolute fastest. And then you're given this requirement and it's just. So being able to like, like, cause it sounds like per their, their docs, basically you can take externally hosted fonts, point at them and next will automatically sort of download them and sort of bake it into your site locally so that

 

Yeah,

 

Tj_Vantoll:

you

 

Sweet.

 

Tj_Vantoll:

don't need to

 

oh

 

Tj_Vantoll:

do

 

and also

 

Tj_Vantoll:

external

 

local

 

Tj_Vantoll:

network

 

fonts.

 

Tj_Vantoll:

requests. So.

 

Yeah, I know in local fonts if it got like TTF or Waf2s. I don't even know like which which one of them is supposed to use. I

 

Tj_Vantoll:

Yeah, I-

 

I learn it and then I unlearn it because I'm like I

 

Tj_Vantoll:

Same,

 

want to burn

 

Tj_Vantoll:

yeah.

 

that

 

Right.

 

crap my stuff

 

I mean,

 

out of

 

as

 

my

 

soon

 

brain.

 

as you get it working, you hope that you will never have to touch it again and you just

 

Exactly.

 

leave it alone.

 

Exactly. Exactly. Oh my God. I can't like, oh, we have the same thing at my work and it's a custom font. And I, I gotta say, like, I think, I think the whole app was running without it is like running with basically the standard material stuff for awhile and they didn't notice. And I was like, oh, okay. And I just kind of like, because I was loading the font wrong and like, you know, I ended up loading it right. And they're like, oh, wow, that looks, that seems a little better. I'm like, yeah, um, not a big change. Not a big, you know, not a big. And but it's a weird font too. Like some of these, these off-brand fonts, like the kerning's god.

 

Mm-hmm.

 

And by

 

Yeah.

 

the way, using four different fonts on a page, are you a maniac? Like that's way against

 

to

 

any

 

signers.

 

kind of this,

 

Tj_Vantoll:

Well...

 

you know, UI like

 

how

 

guidelines.

 

to control.

 

Yeah.

 

Tj_Vantoll:

Well, this was back in the day where so one of the custom fonts was for icons, because that's how

 

Like

 

Tj_Vantoll:

this

 

a. Oh, okay.

 

Tj_Vantoll:

was years ago and that's

 

That's

 

Tj_Vantoll:

how

 

fair.

 

Tj_Vantoll:

you did

 

That's

 

Tj_Vantoll:

it.

 

fair. Yeah.

 

Okay,

 

Yeah.

 

yep.

 

Yeah. Okay. That's fair.

 

Tj_Vantoll:

One was for the body text. So all the body text was the same,

 

Mm-hmm.

 

Tj_Vantoll:

but they needed different ones. And I believe it might've just been one was like the bold face of a font and one was the regular face, but

 

Okay,

 

Tj_Vantoll:

they,

 

Yep.

 

Tj_Vantoll:

they

 

that's

 

Tj_Vantoll:

also

 

not bad.

 

Tj_Vantoll:

wanted another one for like the header and stuff like that as well. But it was, it adds up pretty quickly though.

 

Hmm,

 

It does. That

 

Tj_Vantoll:

I

 

gets

 

Tj_Vantoll:

mean, it

 

they're

 

Tj_Vantoll:

looked

 

heavy.

 

not

 

Tj_Vantoll:

pretty.

 

lightweight.

 

Tj_Vantoll:

I.

 

Yeah

 

Tj_Vantoll:

I wasn't opposed to how the end thing looked, but I think designers can lose track, especially in those days of the cost of some of these things they come up with.

 

Yeah.

 

Yeah, yeah. Yeah, you gotta like every once in a while look at like the it was always figma. And it's like, well, what is that component in figma? And it's like, I don't know. I just drew it. Like, what,

 

Tj_Vantoll:

See ya!

 

what, you know? Yeah, what about, okay. Yeah.

 

So

 

This

 

Jack,

 

has been really fun. Yes, ma'am.

 

based on everything that you've told us and what we've kind of learned today, what would be your advice to anybody who either is interested in React 18 or next JS 13? You know, in your opinion, would you upgrade now or would you still hang out for six months and see what else shakes out first?

 

I wouldn't upgrade without like a proof of concept just to make sure because there are I mean it is if you want to make useless features

 

Mm-hmm.

 

it is a fairly big big change so that you know you're comfortable with. The new app directory layout and what how you would take advantage of it if you want to take advantage of the react server components and just, you know, so basically take the critical pieces of upgrade that you're looking for. Make a new next 13 experimentally app with the experimental app directory enabled to get the app directories

 

Mm-hmm.

 

all done and then try it out and see, but I would

 

Yeah.

 

definitely do it. No, I think you're you're putting yourself behind the 8 ball, but I do think we don't. know what best practices looks like in this at all yet. Like how does this interact with a state manager? Like, what does

 

Mm-hmm.

 

that mean? Cause you can't, in these react server components, you can't use use state, you can't use use context, you can't provide, you know, all of that, anything that was going to need client side stuff is all just turned off, lint rules, all that.

 

Yeah.

 

You know, so what does that mean? Does it mean that like. If I'm going to have a page component and it's going to go get some data and I want to provide it to client side stuff, do we need to then have another component that I need to pass it to and then have that do the, and it's just like, woo. And I don't know, you know, I mean, to

 

Yeah.

 

the extent that we have best practices, we haven't established these best practices at all.

 

Mm-hmm.

 

Tj_Vantoll:

Well, you're filling me with tons of confidence, Jack. I...

 

Oh, yeah, great.

 

ready to do it tomorrow.

 

You know, Next is a great, or Versal is a great company. Next has always been a perennially great product. I have full faith and confidence that it will be a thing and that this is the direction, especially since they're so intertwined with React.

 

Yeah.

 

But do we know how to not foot gun ourselves at the moment with it? No.

 

Not yet.

 

In fact, I actually did make a video specifically about like warning. Use the next JS 13 because I'd literally seen. Like medium articles and YouTube articles showing like OK, here's how you do this. Use use plus and then I and a function like fetch data which would just call fetch and it's like. That's the same thing guy. You just took fetch and just extracted a function that can unconditionally called it like there's no there's no you're still foot gunning yourself

 

Mm-hmm.

 

and you know so yeah.

 

Tj_Vantoll:

What, yeah, maybe a happy middle ground is you can upgrade your versions because it's usually a good idea to not get your apps too far behind.

 

Yeah.

 

Mm-hmm.

 

Tj_Vantoll:

So you can do the upgrades, but you can do them and just make sure your existing stuff works, right?

 

Sure.

 

Tj_Vantoll:

Just

 

still yeah, still builds.

 

Tj_Vantoll:

upgrading,

 

Yeah.

 

Tj_Vantoll:

upgrading doesn't mean you have to like jump on the bandwagon and get start refactoring everything to use and server components and whatnot. You can just bump up your version numbers. switch your path to legacy or whatever, make sure things build. And that way you're on the newest version, you have the new features available. And then when you have a need, when something comes up at work, then at that point you're ready to go.

 

Yeah, oh hey, there's also turbo pack right, which we haven't really

 

Tj_Vantoll:

Oh

 

talked

 

Tj_Vantoll:

man.

 

about.

 

Oh, right.

 

Yeah, and I don't think that's out. I don't know, but apparently it's it's you know, if you don't if you don't have a wickedly customized web pack config or actually, I think any configuration changes to web pack, I don't think it can support anything because it's like, it is literally like a ruster go based web pack. And they're like, well, what about reverse compatibility? They're like, Uh huh. Yeah, that's happening. You know, and anyway, it's it's apparently very fast, but. You know, who knows?

 

I mean, it is, it's already a controversial and hot topic because I know as soon as it came out and they said that they were 10 times faster than VEAT, Evan Yu, who was the creator of VEAT, you know, did his own performance testing and debunked that. So

 

Yeah, yeah.

 

yeah, take it or leave it. I think, you know, it's probably faster, which is great. We all like faster hot reloading, but I don't. I don't think it's the one reason that you should upgrade.

 

There was some like, I remember looking at the Verso site and they had like, they're, they were saying that their minimizer was three hundred percent faster or something like that. Or, and then they somehow, they, they, they bound that into like, and that would result in better performance for the customer in terms of bandwidth. And I'm like, No, because like it's one thing to minimize your code. Sure. Great. And be very fast at it. That's great. But you're not actually creating a, a more minimized version. Like there's a, there's a dense, there's like a, you know, you still have to have code, right? You still have to, you know, so no, anyway, it was this weird messaging. So yeah,

 

Uh

 

I,

 

huh.

 

you're right. So right. You're like anybody says like 10 times faster, a hundred times. Whoa. Whoa

 

Yeah.

 

there kiddo.

 

Show me how you did that and then we'll decide.

 

Show me your, show me the work, right? Like in

 

Yeah.

 

algebra class, show me that work.

 

Exactly. Well, that's, I mean, that's very cool. And thanks for really kind of disbanding myths telling us about potential foot guns, because there always will be in new stuff.

 

Hmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

 

But also some really cool stuff. So,

 

Yeah!

 

you know, give it a try listeners, and let us know how it goes. All right, so let's move into the portion of the show where we talk about picks, things that are cool, things that we like, things that we think our listeners also will like. TJ, do you wanna kick us off this week?

 

Tj_Vantoll:

Sure, so I'm gonna start with a pick update. So I picked a magic puzzle, I think like a week or two ago. And the sort of gimmick they have is that they have a surprise you open at the end of the puzzle.

 

Hmm

 

Tj_Vantoll:

And my update is that the surprise was definitely worth it and definitely cool. So

 

Cool

 

Tj_Vantoll:

I'm gonna plus one the pick of magic puzzle, especially if you're a puzzle person. I'm not gonna reveal the surprise, but it's really cool. And we had a lot of fun putting it together.

 

Nice.

 

Tj_Vantoll:

And then my pick for this week is a podcast that I've been listening to called People I Mostly Admire. It's done by the Freakonomics people, which all of their podcasts are really, really good. I think I picked

 

Mm-hmm.

 

Tj_Vantoll:

the main Freakonomics podcast before. So it's done by the same people. It's an interview show. We just interview, just some really interesting people. And I listen to it on and off when I see episodes that look interesting. So that'll be my pick.

 

Cool. I mean, Magic Puzzle sounds awesome, so it's even better that their surprise at the end was good, because that would just really be sad if it was not

 

Tj_Vantoll:

Hehehe

 

very surprising. And that sounds like a good podcast. I'm always looking for more of those to listen to when I'm just doing stuff around the house, so that sounds great.

 

Cool.

 

So, Jack, what have you got for us?

 

I guess I've got an oldie but a goodie. I'm reading now The Immortal Life of Henrietta Lacks. And I think my wife is like, oh, I read that way back when. I'm like. Oh, OK. It's newish to me, but it's fascinating. It's really interesting from the ethics. It's interesting from the science. It's a history. This is really, really cool. Great book.

 

Cool. Good books are always, always

 

Have

 

good.

 

you read it?

 

No, I have not. So

 

OK.

 

I'll put that on my list.

 

Cool.

 

Tj_Vantoll:

Yeah, I have not either.

 

Nice. Okay. So my pick for this week is gonna be another TV show. I've been catching up

 

Hmm

 

on various series right now. And the one which may have been picked by one of you in the past is the show for all mankind.

 

Oh, yeah.

 

Yeah.

 

I don't know. I don't know. I picked it. But yeah, it's a great show. Holy crap. Right.

 

So it's a, if you're not familiar with it, I think that it is a Sony pictures, it might be an Apple TV show, but

 

It's

 

basically,

 

released by Apple TV for sure.

 

okay, yeah. So basically

 

Yeah.

 

the idea is what if, if we, the US had been beaten to the moon by Russia? they had been the first ones to land on the moon. And then it just kind of goes into an alternate universe from there, you know, there's colonies on the moon, they're mining

 

Yeah.

 

for stuff, there's now a race to Mars and who's gonna be the first country to get there and are they gonna start doing colonization? So it's really interesting to see what could have happened and where space exploration could have gone if we had been more, I guess, just more into it and more. you know, we gotta beat Russia to basically do everything in space that we can. So

 

Right.

 

it's really fun to see the way that history could have turned out if things have been different. So if you're looking for one that is very historically rooted, but then kind of twists it and changes things, it's really fun to watch and it's a good one on outer space stuff. So

 

And super cool

 

that's my...

 

and super timely because we're going back to the moon. I mean,

 

Exactly.

 

Artemis 1 launched yesterday and it's on its

 

Mm-hmm.

 

way to the moon. It was pretty

 

Yep.

 

cool.

 

Yeah.

 

Yeah, we tried to stay up for it, but it was funny. You know, we're up at like, I don't know, whatever, 10 or something like that. seeing the countdown and we're like, oh, it's going to be 10 more minutes or whatever. And they're like 10 minutes. And then they finally were like, it's 10 minutes until the launch window opens. And then there'll be a 30 minute hold. We're like, good night. Click. Bye. We're done.

 

Yeah, gotta get that. I mean, timing is everything, but yeah,

 

Yeah,

 

there's only so

 

I mean,

 

long

 

it's a

 

you can watch.

 

late launch for for a banner, you know, thing. It's like, guys, lunch during the day, if you want to really get the people going.

 

Exactly.

 

Yeah. All right.

 

Well,

 

This

 

cool.

 

has been really fun. Yeah.

 

That has been, yeah. I hope everybody has enjoyed kind of getting educated and hearing about some of the new stuff that is available for us. And we will see you on the next episode of React Roundup.

 

See you next time.

 

Tj_Vantoll:

Sounds good, bye everybody.