1040: Developing for the iPhone Duo

Scott Tolinski (0:00)

What's up, everybody? It is time for Syntax Live. It is another Monday. I am back from Switzerland. It was a long journey back. I am jet-lagged. I'm on caffeine. I got Tylenol in my head, and I'm ready to go, everybody.

What's up? My name is Scott Tolinski. I'm a developer from Denver, and with me as always is Wes Bos and CJ. What's up, guys?

Wes Bos (0:22)

Stoked to be here. Scott just told us, he's not gonna share it now, but Scott just told us the most insane story, which at some point you'll have to recount it once you've recovered.

Scott Tolinski (0:32)

Yes. I mean, I can do it. I can do it in this stream. It doesn't matter. Anytime. I can do it anytime. All right.

CJ (0:36)

Maybe a little later in the stream.

Wes Bos (0:38)

We can say that it's diabolical.

Scott Tolinski (0:41)

We're gonna have to put a big old trigger warning on that story too. I'll tell you about that later. It was a crazy situation, but I'm safe here and I'm back. CJ, how's it going, man?

It's good.

CJ (0:51)

It's good. Our first story today is about React, a new release with React.

Scott Tolinski (0:56)

Just get right into it. CJ, I'm trying to introduce you. I'm trying to give you a chance to...

CJ (0:59)

No, hey, how you doing?

Wes Bos (1:00)

Right into it.

CJ (1:00)

I'm trying to get you a chance to say hello.

Wes Bos (1:02)

The brain rot zoomies, zoomers that are watching this can't handle it.

CJ (1:06)

Don't click away because we're talking about React. So React 19.3 was released. It's now available to install from NPM.

And there's a couple of quality of life improvements, honestly, that I kind of just think like, why wasn't it this way from the beginning or why haven't we had this? But it's good that it's finally here. First up, there's finally a view transitions built into React. So there's a view transition component you can pull in. You don't have to install a third party library. And we've talked about view transitions a lot here on the stream. Essentially, you can have animations between pages and it's built into the browser. So you don't have to handle any sort of like manual animation. You give things IDs and then they'll animate into the right spot. So that's built in.

Wes Bos (1:50)

And for components, too, like it's just translate anything to anything, right? If you just have two components and just tween them between each other.

CJ (1:59)

Exactly. So this example here is like a video selector. You can see like it's sliding the videos in and out and the code for it. There's a couple of hooks they expose as well, such as like start transition. And you can add transition type.

And from there, you'll notice there's no code in here that is like a CSS animation. It just has some options. So like there's from right, from left, to left, to right. That's all you have to specify. And then it automatically knows when that component's being swapped out that it should use that animation. So it's pretty slick. And now it's built in.

Another nice one, quality of life stuff, is about the DOM. This one actually is super simple. But it used to be that if you're writing, let's say, in Next.js and you have some server-side React code, you would write some code to determine, is this component running in the browser or not? And it's pretty cumbersome.

Scott Tolinski (2:56)

I hated that.

CJ (2:57)

Yeah, you sometimes would even have a separate component for this to set the mounting state. Now, there's a use API. So you import browser from React DOM, you say, use browser, invoke it, and that will tell React that this component should only run in the browser, not during server-side rendering.

So pretty simple, but reduces a lot of the weird boilerplate we were doing in a lot of apps. And then one last thing, which I think a lot of people are going to like, is you can now have the context API rendered directly inside of server components. So it used to be that anytime you had a React context, you'd basically have to create a wrapper component, like a provider component that had use client at the top, and then use that inside of your server component. And so it's this whole roundabout.

Wes Bos (3:46)

Oh, it's a nightmare.

CJ (3:48)

Yeah, it's just a wrapper component. It's like, and you'd have to do this for everything. Now, finally, you can just import that context directly into a server component, and React is smart enough to know that, hey, that's going to be a client-side component because it is the context API.