What’s New in React 19.2: Compiler, Activity, and the Future of Async React - JSJ 700

WEBVTT
1
00:00:05.480 --> 00:00:10.279
Hello everybody, and welcome to another exciting episode of JavaScript Jabber.
2
00:00:10.560 --> 00:00:12.720
Today in our show, we've got Shooting Kapoor.
3
00:00:13.240 --> 00:00:15.679
Hi, Shooty, Hey Dan, how are you.
4
00:00:16.000 --> 00:00:18.760
I'm kind of on the tail end of a head cold.
5
00:00:18.839 --> 00:00:23.359
Hopefully I won't sound too stuffy today, but that's I'm
6
00:00:23.359 --> 00:00:26.120
back on at work, so that means I guess that
7
00:00:26.120 --> 00:00:31.600
I'm feeling better. The weather here is actually pretty nice.
8
00:00:31.640 --> 00:00:34.439
I'm in Tel Aviv, Israel, and it's not really cold
9
00:00:34.479 --> 00:00:36.479
and it's pretty sunny, but it's you know, it's a
10
00:00:36.600 --> 00:00:41.399
season for the snuffles. So here's what it is. So,
11
00:00:42.119 --> 00:00:43.799
and where are you coming from today?
12
00:00:44.320 --> 00:00:46.920
So I'm in Seattle and the weather here is cold,
13
00:00:47.439 --> 00:00:51.840
really cold, and rainy and rainy and dark and gloomy.
14
00:00:52.359 --> 00:00:55.399
But I've got some lights up, actually not in the background.
15
00:00:55.560 --> 00:00:56.560
I've got some lights.
16
00:00:56.399 --> 00:00:58.840
Up at my house, so it makes me feel better.
17
00:00:59.000 --> 00:01:01.759
Good for you, Good for you, and Shooty, you are
18
00:01:01.799 --> 00:01:04.120
an independent content creator? Correct?
19
00:01:04.480 --> 00:01:07.799
Yeah? So earlier this year I used to work.
20
00:01:07.640 --> 00:01:11.040
As slack and I quit my job in April to
21
00:01:11.200 --> 00:01:14.920
start developer education full time. I've actually been doing this
22
00:01:15.000 --> 00:01:17.879
part time for a long time. I made courses on
23
00:01:17.920 --> 00:01:20.840
O'Reilly as well, and I really like that, So I
24
00:01:21.079 --> 00:01:24.159
was like, why do we need stability, Let's just drop
25
00:01:24.200 --> 00:01:27.200
our job and go full time, make no money, and
26
00:01:27.239 --> 00:01:28.680
do all the education stuff.
27
00:01:30.239 --> 00:01:33.760
So you're now an independent content creator talking about what?
28
00:01:34.560 --> 00:01:37.439
So I talked about React and AI and web development
29
00:01:37.599 --> 00:01:39.000
and JavaScript and.
30
00:01:39.040 --> 00:01:42.280
Handstack and next Days and all of the good stuff.
31
00:01:42.319 --> 00:01:45.719
So everything related to web development specializing in reacting cool.
32
00:01:45.760 --> 00:01:47.719
And that's what we're going to be talking about today.
33
00:01:47.840 --> 00:01:50.480
We're going to be talking about what's new and exciting
34
00:01:50.640 --> 00:01:54.079
in React nineteen. Correct, yes, And are there things that
35
00:01:54.120 --> 00:01:56.040
are new and exciting in React nineteen.
36
00:01:56.560 --> 00:02:00.239
There's actually three things in React nineteen update that I'm
37
00:02:00.280 --> 00:02:03.079
super excited about, which I would love to get into
38
00:02:03.159 --> 00:02:07.680
in a bit. But I think this updates specifically. Although
39
00:02:07.719 --> 00:02:10.240
this is like a minor update, it's nineteen point two,
40
00:02:10.680 --> 00:02:13.240
I think it has as a ton of really cool features,
41
00:02:13.319 --> 00:02:16.479
which is really exciting for me because it's going to
42
00:02:16.479 --> 00:02:19.280
help me write less code and for other people as
43
00:02:19.280 --> 00:02:22.280
well who are building client side apps. So I'm pretty
44
00:02:22.280 --> 00:02:25.479
excited about it. This really is actually focuses on client
45
00:02:25.520 --> 00:02:28.599
side developers a lot, not client side developers app developers
46
00:02:28.639 --> 00:02:30.759
a lot, as opposed to like frameworks there are some
47
00:02:30.840 --> 00:02:35.280
framework features, but the main kind of audience is app developers,
48
00:02:35.520 --> 00:02:38.120
which is perfect for me because I'm an app developer.
49
00:02:38.199 --> 00:02:42.039
When you're saying app development, are you talking about web
50
00:02:42.080 --> 00:02:45.479
apps or you're talking about native apps like React native
51
00:02:45.680 --> 00:02:46.120
or both.
52
00:02:47.039 --> 00:02:49.759
So I'm not talking about React native. There are updates
53
00:02:49.759 --> 00:02:53.960
and reactnative as well. I just completely ignore Reactnative because
54
00:02:54.000 --> 00:02:56.800
I'm a full web developer, So I'm talking about app
55
00:02:56.840 --> 00:03:00.439
development in web. But there are updates and reacnative as well.
56
00:03:00.599 --> 00:03:04.360
Interesting, So do we want to talk about both React
57
00:03:04.439 --> 00:03:07.120
nineteen in general and nineteen point two or do we
58
00:03:07.159 --> 00:03:09.000
want to focus just one one or the other.
59
00:03:09.879 --> 00:03:12.680
Let's focus on point two because there's a lot to
60
00:03:12.719 --> 00:03:15.039
talk about, and then if we have time, we can
61
00:03:15.039 --> 00:03:17.840
talk about nineteen. There's a ton of features that we
62
00:03:17.879 --> 00:03:21.159
can get into with nineteen point two, and this is
63
00:03:21.199 --> 00:03:23.280
the third update this year, so there's a lot to
64
00:03:23.280 --> 00:03:23.840
talk about.
65
00:03:23.840 --> 00:03:27.199
Cool. So, first of all, if there's so much stuff
66
00:03:27.240 --> 00:03:31.240
in it, and if I recall correctly, React nineteen itself
67
00:03:31.360 --> 00:03:34.680
was released something like almost two years ago, why is
68
00:03:34.719 --> 00:03:36.919
it nineteen point two and not twenty?
69
00:03:37.680 --> 00:03:40.240
I think the features are kind of incremental to what
70
00:03:40.439 --> 00:03:43.919
nineteen has shared, which is like concurrent rendering, but like
71
00:03:44.000 --> 00:03:47.159
some updates on top of it, it's not a complete
72
00:03:47.240 --> 00:03:50.560
paradigm shift. So eighteen was a big update because concurrent
73
00:03:50.680 --> 00:03:54.639
rendering and automatic patching was introduced. Nineteen introduced some new
74
00:03:54.680 --> 00:03:58.159
features like actions, and then what we have today kind
75
00:03:58.159 --> 00:04:00.879
of builds on top of it. It's it's a lot
76
00:04:00.879 --> 00:04:05.280
of focus on async react, a lot of focus on suspense.
77
00:04:05.800 --> 00:04:08.159
So that's why it's like a small update. It's like
78
00:04:08.199 --> 00:04:10.639
a minor update, not like a whole paradigm.
79
00:04:10.280 --> 00:04:13.759
Chef, and I assume that it contains no nothing that's
80
00:04:13.919 --> 00:04:18.920
kind of breaking changes or significant API changes or stuff
81
00:04:18.959 --> 00:04:19.279
like that.
82
00:04:19.639 --> 00:04:23.560
Correct, Yeah, probably the reason, Yeah, exactly.
83
00:04:23.800 --> 00:04:26.920
Okay, then so what isn't you and exciting about nineteen
84
00:04:27.040 --> 00:04:27.680
point two.
85
00:04:27.920 --> 00:04:30.560
So there's a bunch of features. Let's talk about like
86
00:04:30.600 --> 00:04:32.759
the feature set I introduced. So first of all, there
87
00:04:32.839 --> 00:04:35.639
is an activity component. I'll list ot all the features
88
00:04:35.639 --> 00:04:37.680
and then we can kind of dive into them one
89
00:04:37.720 --> 00:04:41.199
by one. So we've got the activity component, We've got
90
00:04:41.720 --> 00:04:45.560
a view transition component. We've got performance tracks that come
91
00:04:45.639 --> 00:04:48.800
part of Chrome depv tools, which is awesome because we've
92
00:04:48.839 --> 00:04:51.959
been debugging with profiler and performance tracks is sort of
93
00:04:52.040 --> 00:04:55.800
like a magnified version of what your component is doing,
94
00:04:55.839 --> 00:04:58.360
so it helps in debugging. We've got use effect event
95
00:04:58.480 --> 00:05:01.639
a new hook, and we have React compiler is now stable,
96
00:05:01.800 --> 00:05:05.240
and I know I'm missing one, but I can't remember
97
00:05:05.279 --> 00:05:05.639
with one.
98
00:05:06.240 --> 00:05:09.959
Well, you'll probably it will probably pop into your head
99
00:05:10.040 --> 00:05:12.360
as we talk about the other stuff. By the way,
100
00:05:12.920 --> 00:05:16.439
as you mentioned react compiler, I do want to mention
101
00:05:16.600 --> 00:05:20.959
to our listeners that we had Joe Savona and Satya
102
00:05:21.160 --> 00:05:24.879
from the Meta react core team, which is no longer
103
00:05:24.920 --> 00:05:28.680
part of Meta, and we had them on the show
104
00:05:28.720 --> 00:05:32.600
talking specifically about react compiler. So if our listeners are
105
00:05:32.639 --> 00:05:37.720
interested in what react compiler is and the details of
106
00:05:37.879 --> 00:05:40.240
what it does and what it doesn't do, I highly
107
00:05:40.279 --> 00:05:44.639
recommend listening to that episode. I'll find them. I'll include
108
00:05:44.639 --> 00:05:47.319
the link in the show notes, but you can pretty
109
00:05:47.360 --> 00:05:50.920
easily find it if you search through the podcast catalog.
110
00:05:51.160 --> 00:05:53.639
But if you you know. Nonetheless, if you want to
111
00:05:53.720 --> 00:05:57.439
remind our listeners what react compiler is and what is
112
00:05:57.480 --> 00:05:59.959
it all about and why we actually wanted to.
113
00:06:00.079 --> 00:06:03.680
Need it, Yeah, so actually react compiler is extremely exciting
114
00:06:03.800 --> 00:06:07.600
people remember, or like the way to memorize apps currently,
115
00:06:07.959 --> 00:06:10.639
or like the way to kind of improve the performance
116
00:06:10.680 --> 00:06:13.240
of your app, the first thing you would think about is, well,
117
00:06:13.319 --> 00:06:15.800
let me add use memo, use callback, right, That's like
118
00:06:15.839 --> 00:06:17.839
the first hook that comes to mind whenever you think
119
00:06:17.879 --> 00:06:21.360
about improving the performance of your app. Sometimes you blindly
120
00:06:21.399 --> 00:06:23.560
app use memo and use callbacks to all of our
121
00:06:23.600 --> 00:06:27.480
components and all of our functions just because they are
122
00:06:27.639 --> 00:06:30.639
kind of hard to figure out where to add use
123
00:06:30.680 --> 00:06:32.639
memo and use callbyck, you have to use the profile
124
00:06:32.759 --> 00:06:35.800
to figure out which components are slow, which functions are slow,
125
00:06:35.879 --> 00:06:39.079
where it's the expensive calculations, and then memois that and
126
00:06:39.199 --> 00:06:41.680
even then it is a hard thing to do. Now
127
00:06:41.720 --> 00:06:44.720
with the React compiler, memoization is given to you out
128
00:06:44.759 --> 00:06:46.639
of the box, so you don't need to add use
129
00:06:46.720 --> 00:06:49.680
memo and use callback at all. In fact, at React
130
00:06:49.680 --> 00:06:51.959
cons I was leading the panel with the core team
131
00:06:52.000 --> 00:06:53.759
and this is the question that I asked them, that
132
00:06:54.079 --> 00:06:56.800
can you really remove use memo and use callbacks from
133
00:06:56.839 --> 00:06:59.399
your code right now? And the answer is yes, it
134
00:06:59.439 --> 00:07:01.680
is safe to I will use memo and use callback.
135
00:07:01.920 --> 00:07:06.399
So reactin compiler helps to enable auto memorization, which means
136
00:07:06.439 --> 00:07:08.800
that your code is auto memoiz. You don't need to
137
00:07:08.800 --> 00:07:11.560
add UMO use callback to make sure that it is
138
00:07:11.639 --> 00:07:12.800
optimizer performance.
139
00:07:13.639 --> 00:07:18.439
I would even argue that it's beyond safe. It's even
140
00:07:18.800 --> 00:07:26.279
preferable because if I recall correctly, when React compiler sees
141
00:07:26.639 --> 00:07:30.439
let's say, use memo in a component, it basically bails
142
00:07:30.519 --> 00:07:36.000
out out of optimizing that component. So theoretically, at least
143
00:07:36.199 --> 00:07:40.160
React compiler, if it's you know, working correctly and does
144
00:07:40.199 --> 00:07:44.399
what it's supposed to do, can actually optimize your component
145
00:07:44.600 --> 00:07:51.079
beyond the specific manual optimizations that you implemented using memo
146
00:07:51.199 --> 00:07:56.480
or use memo, So in effect, it can do extra ammorization.
147
00:07:56.759 --> 00:08:00.439
And if you have your own explicit use memo, you're
148
00:08:00.519 --> 00:08:02.959
kind of forcing it to bail out because it says, hey,
149
00:08:03.040 --> 00:08:05.079
you know what you want to do. I'm not going
150
00:08:05.120 --> 00:08:08.000
to get in your way, and then you might actually
151
00:08:08.040 --> 00:08:10.079
lose out on some optimizations.
152
00:08:10.319 --> 00:08:12.759
Yeah, and the way they both do memorization is a
153
00:08:12.800 --> 00:08:15.720
little bit different. Reacompiler memoris is a different way than
154
00:08:16.079 --> 00:08:21.399
use memos. So yeah, like when you do manual memorization,
155
00:08:21.560 --> 00:08:24.040
reac compilers like you seem to know what you're doing,
156
00:08:24.079 --> 00:08:25.959
so you go ahead and do your thing.
157
00:08:26.160 --> 00:08:29.759
Yeah, just to remind our listeners in case they forgot
158
00:08:30.000 --> 00:08:34.960
the benefits of memorization is like threefold, as I recall correctly.
159
00:08:35.000 --> 00:08:41.519
First of all, it avoids unnecessary computations. Second it avoids
160
00:08:41.720 --> 00:08:49.759
unnecessary renders, and third it retains referential consistency, which avoids
161
00:08:49.799 --> 00:08:53.279
rerenders down the line. It basically, if you think about
162
00:08:53.759 --> 00:08:58.279
the dependency arrays in use effect and stuff like that,
163
00:08:59.159 --> 00:09:05.679
they are referential identity, not value identity. And if you
164
00:09:05.799 --> 00:09:10.879
get referential identity, you avoid even more rerenders than you
165
00:09:11.639 --> 00:09:15.720
and stuff like that. Then you would otherwise perform. And
166
00:09:15.759 --> 00:09:19.440
I think even the rendering engine itself, when it sees
167
00:09:19.480 --> 00:09:23.200
the referential identity, it knows to cut out and not
168
00:09:23.679 --> 00:09:27.279
totally not traverse certain parts of the v doom tree
169
00:09:27.720 --> 00:09:32.000
because it can immediately identify that nothing has changed. So
170
00:09:32.000 --> 00:09:36.159
you're effectively making the entire system just basically faster and
171
00:09:36.200 --> 00:09:36.840
more efficient.
172
00:09:37.399 --> 00:09:39.879
Yeah, And the given example of what that means is,
173
00:09:39.960 --> 00:09:42.519
let's say you have a function where let's just say
174
00:09:42.519 --> 00:09:44.879
you're calling console log or fetching an ampair or whatever,
175
00:09:45.000 --> 00:09:47.720
just simple function, and that function has a dependency of
176
00:09:47.840 --> 00:09:51.240
use effect. So what referential identity means is that when
177
00:09:51.279 --> 00:09:54.639
you haven't added any callback or things, every time you
178
00:09:54.759 --> 00:09:58.200
render that is a new function. So when reaclub said it,
179
00:09:58.200 --> 00:10:00.799
it's like, oh, dependency of use if I change, so
180
00:10:00.840 --> 00:10:02.919
I need to run this effect again. So this way
181
00:10:02.919 --> 00:10:05.639
you're running effect multiple times. If you have a function
182
00:10:05.840 --> 00:10:09.039
as a dependency. But if you add a used callback
183
00:10:09.080 --> 00:10:12.320
to that function, now React as memois that and now
184
00:10:12.360 --> 00:10:15.159
it knows that this is the same reference as previous time,
185
00:10:15.399 --> 00:10:18.440
so it won't rerender if nothing changed. So that reduces
186
00:10:18.480 --> 00:10:21.480
the amount of times you you ruan the use effects
187
00:10:21.600 --> 00:10:22.080
and again.
188
00:10:22.240 --> 00:10:26.320
With React compiler, you basically just remove all your explicit
189
00:10:26.440 --> 00:10:30.519
uses of memo, use memo, and use callback and just
190
00:10:30.759 --> 00:10:34.320
let React compiler do its magic. By the way, another
191
00:10:34.519 --> 00:10:38.200
advantage of React compiler from my perspective, potentially even a
192
00:10:38.480 --> 00:10:42.799
greater advantage from my perspective, is that it's effectively a
193
00:10:42.840 --> 00:10:48.360
React linter. It knows the rules of React with the
194
00:10:49.000 --> 00:10:53.360
best practices of React, and will actually warn you if
195
00:10:53.360 --> 00:10:57.960
you're violating any of these React best practices. Correct.
196
00:10:58.720 --> 00:11:00.960
I don't know if the compiler that I know there's
197
00:11:01.480 --> 00:11:04.159
the plug in, yeslamp plugin actually wants you when you're
198
00:11:04.159 --> 00:11:07.720
breaking React rules and in fact when the compiler, so
199
00:11:07.759 --> 00:11:10.200
one way to see that you're breaking React rules is
200
00:11:10.360 --> 00:11:12.559
when you look at the compile code, if you see
201
00:11:12.559 --> 00:11:15.559
that your code is intact and hasn't been memoirs, it's
202
00:11:15.600 --> 00:11:18.879
because the compiler bailed because you haven't followed rules of React.
203
00:11:19.080 --> 00:11:21.480
So that way it's easy to kind of see where
204
00:11:21.480 --> 00:11:22.799
you're breaking rules of React.
205
00:11:23.039 --> 00:11:25.519
So yeah, yeah, it does know when you're.
206
00:11:25.399 --> 00:11:27.519
Breaking rules of React, and it just like bails out
207
00:11:27.519 --> 00:11:28.200
for those things.
208
00:11:28.240 --> 00:11:32.799
Cool. And you said that in React version nineteen point two,
209
00:11:33.080 --> 00:11:36.559
compiler is now officially a stable part of the release.
210
00:11:36.960 --> 00:11:39.639
Yeah, yeah, so the babble plug in, so React compiler
211
00:11:39.679 --> 00:11:41.240
is still available as a babble plug in.
212
00:11:41.559 --> 00:11:42.440
Now it is stable.
213
00:11:42.960 --> 00:11:46.039
It was in our C stage for a long time
214
00:11:46.240 --> 00:11:49.399
and the community was wondering when it's going to be stable.
215
00:11:49.480 --> 00:11:52.279
So if React content was announced that it is stable.
216
00:11:52.600 --> 00:11:54.679
And what's cool is that it not only works for
217
00:11:54.720 --> 00:11:57.559
React nineteen, but it also works for eighteen and seventeen,
218
00:11:57.840 --> 00:12:01.000
so which is really cool because now you can you
219
00:12:01.080 --> 00:12:03.519
have backwards compatibility, so you can go ahead and remove
220
00:12:03.720 --> 00:12:04.200
use memos.
221
00:12:04.279 --> 00:12:06.840
Oh that's interesting. I didn't know that. So if you've
222
00:12:06.879 --> 00:12:10.399
got a project that's built on top of React eighteen
223
00:12:10.480 --> 00:12:13.639
and you don't feel like an upgrade you can. Basically
224
00:12:13.679 --> 00:12:16.879
what you're saying is just drop in React compiler and
225
00:12:16.919 --> 00:12:17.639
hope for the best.
226
00:12:17.919 --> 00:12:18.200
Yeah.
227
00:12:18.360 --> 00:12:20.159
Yeah, I mean you can install a babble plug in
228
00:12:20.279 --> 00:12:25.440
and your compiler will start memoizing. I've actually added reac
229
00:12:25.480 --> 00:12:29.120
compiler to an app where I didn't change anything else.
230
00:12:29.159 --> 00:12:31.919
I just added reac compiler, just added the plug in,
231
00:12:32.480 --> 00:12:36.799
and I noticed that my renders, like rerenders were reduced
232
00:12:36.799 --> 00:12:39.279
from thirty two to just seven, which is crazy.
233
00:12:39.320 --> 00:12:44.519
Wow. Yes, definitely it is. That's pretty significant. Yeah, you know,
234
00:12:45.120 --> 00:12:47.759
rerenders are kind of the bane of our existence, is
235
00:12:47.799 --> 00:12:48.759
React developers.
236
00:12:49.039 --> 00:12:52.519
Yeah, and even for the ones, so even for the
237
00:12:52.519 --> 00:12:55.720
ones that were being re rendered, the amount of time
238
00:12:55.759 --> 00:12:58.039
it took to render that was reduced as well, so
239
00:12:58.120 --> 00:13:00.320
the height of the graph like in React with when
240
00:13:00.360 --> 00:13:02.919
you look at the graph of the components, the height
241
00:13:02.960 --> 00:13:05.840
of the bar itself was lower, so it took lesser
242
00:13:05.879 --> 00:13:08.919
time to vendor by just adding React compiler, which is
243
00:13:08.960 --> 00:13:09.960
crazy interesting.
244
00:13:10.039 --> 00:13:14.039
We have a React eighteen projects where I work, and
245
00:13:14.200 --> 00:13:17.440
upgrading is not trivial because it's kind of it kind
246
00:13:17.480 --> 00:13:22.919
of shares the React library instance between multiple micro front ends,
247
00:13:23.559 --> 00:13:25.559
so we kind of need to upgrade all of them.
248
00:13:25.559 --> 00:13:27.720
In order to upgrade one of them. That's the way
249
00:13:27.759 --> 00:13:30.720
it's currently implemented for us. And being able to just
250
00:13:30.960 --> 00:13:33.600
you know, drop in maybe React compiler to see some
251
00:13:33.639 --> 00:13:37.720
performance improvements should be pretty interesting something I should definitely
252
00:13:37.799 --> 00:13:38.360
look into.
253
00:13:38.799 --> 00:13:42.080
Yeah, and the newest plug in So with React nineteen
254
00:13:42.120 --> 00:13:45.159
point two, the es plugin also got an upgrade, so
255
00:13:45.200 --> 00:13:47.480
it's v six now and it also has.
256
00:13:47.559 --> 00:13:49.840
React compiler rules built in.
257
00:13:50.159 --> 00:13:52.080
So I haven't actually used the plug in, but my
258
00:13:52.159 --> 00:13:54.200
guess is that it also warned you when you're breaking
259
00:13:54.279 --> 00:13:55.080
rules of reacty.
260
00:13:55.120 --> 00:13:58.679
That's really that's really useful. So okay, so one great
261
00:13:58.720 --> 00:14:03.080
thing about React versus nineteen point two is the stable
262
00:14:03.200 --> 00:14:05.240
React compiler. What else?
263
00:14:06.080 --> 00:14:09.320
The other thing that I'm excited about is the activity component.
264
00:14:09.519 --> 00:14:12.000
So this component is really cool because one of the
265
00:14:12.000 --> 00:14:14.600
biggest things that bes app developers have been doing is
266
00:14:14.639 --> 00:14:16.879
storing the state of where we are in the app,
267
00:14:17.440 --> 00:14:20.600
especially a component, and then resuming from it. So an
268
00:14:20.639 --> 00:14:22.879
example would be, let's say you type something in search
269
00:14:23.320 --> 00:14:25.480
and then the user clicks away from search and then
270
00:14:25.519 --> 00:14:26.600
they open it back again.
271
00:14:26.799 --> 00:14:29.000
You kind of want to show them what they had type, right,
272
00:14:29.279 --> 00:14:29.519
or you.
273
00:14:29.440 --> 00:14:31.840
Want to kind of keep the results that they were
274
00:14:31.879 --> 00:14:35.360
looking for now. Currently, the way to do that or
275
00:14:35.399 --> 00:14:38.519
pre nineteen point two, is by storing that state and
276
00:14:38.559 --> 00:14:40.879
then when the user pops up again and you check
277
00:14:40.919 --> 00:14:44.000
if the component is open, and you reload from that state.
278
00:14:44.519 --> 00:14:47.720
With nineteen point two, this activity component actually gives it
279
00:14:47.759 --> 00:14:49.399
to you out of the box. So all you got
280
00:14:49.480 --> 00:14:52.240
to do is wrap your component in activity and it
281
00:14:52.360 --> 00:14:55.279
understands to store the state, and it's actually going to
282
00:14:55.320 --> 00:14:58.279
give you that state that you've written in the text
283
00:14:58.279 --> 00:15:00.919
input for free, so when you open and close and
284
00:15:00.919 --> 00:15:03.679
then open again, you'll see what you've stored so far.
285
00:15:04.320 --> 00:15:08.279
So I built an example component with Netflix where you.
286
00:15:08.240 --> 00:15:10.919
Know how in Netflix when you are on a or
287
00:15:10.919 --> 00:15:14.399
even YouTube actually, but when you are on a when
288
00:15:14.399 --> 00:15:17.120
you're watching, when you're on the homepage and you're watching
289
00:15:17.159 --> 00:15:19.679
a trailer, like when you have it on an item,
290
00:15:19.879 --> 00:15:21.919
the trailer starts playing and then you move away, and
291
00:15:21.919 --> 00:15:24.360
then you come back and the trailer restarts.
292
00:15:24.840 --> 00:15:27.759
I hate that. I wanted to continue from where I
293
00:15:27.840 --> 00:15:28.840
was because.
294
00:15:28.480 --> 00:15:31.320
Actually that's what YouTube does for me, and sometimes I
295
00:15:31.440 --> 00:15:35.399
really hate it, yeah, because it starts playing muted when
296
00:15:35.399 --> 00:15:38.080
you hover on top, and then when you click it,
297
00:15:38.080 --> 00:15:41.559
it starts playing with full audio, but you're already somewhere
298
00:15:41.600 --> 00:15:43.720
inside the video, so now if you want to hear
299
00:15:43.759 --> 00:15:45.879
it from the beginning, you kind of have to rewind
300
00:15:45.919 --> 00:15:48.519
each and every time. It can be annoying, exactly.
301
00:15:49.120 --> 00:15:53.000
I hate that, and in Netflix specifically because like it
302
00:15:53.120 --> 00:15:55.039
starts like I want to see the trailer, yes, but
303
00:15:55.120 --> 00:15:57.399
it starts off and it's loud and everything, and then
304
00:15:57.879 --> 00:16:00.279
I move away and then it restarts the trailer, so
305
00:16:00.320 --> 00:16:01.799
I kind of want to continue from where.
306
00:16:01.679 --> 00:16:02.120
It was working.
307
00:16:02.200 --> 00:16:03.960
Yeah, that I definitely agree with.
308
00:16:04.440 --> 00:16:07.440
Yeah, And so I added So I made a Netflix
309
00:16:07.440 --> 00:16:10.360
clone and I added activity component to it, and that's
310
00:16:10.360 --> 00:16:10.799
all I did.
311
00:16:10.840 --> 00:16:13.399
So I had, like a trailer, it would AutoPlay.
312
00:16:12.879 --> 00:16:14.320
When you have it on it, and then when you
313
00:16:14.320 --> 00:16:16.080
move away, it would stop playing, and then when you
314
00:16:16.080 --> 00:16:19.080
come back, AutoPlay again. And all I did was add
315
00:16:19.120 --> 00:16:21.480
activity to that component. And then when I hovered away
316
00:16:21.519 --> 00:16:24.159
and came back, it remembered my state, so it knew
317
00:16:24.200 --> 00:16:26.559
how much video was played, which was cool.
318
00:16:26.279 --> 00:16:28.159
Because I had to do nothing else to fix that
319
00:16:28.279 --> 00:16:29.240
and it was so awesome.
320
00:16:29.399 --> 00:16:33.519
So just to understand correctly, so you kind of wrapped
321
00:16:33.559 --> 00:16:36.799
your component in an activity component, kind of like what
322
00:16:36.879 --> 00:16:40.440
you used to have with higher order components. My understanding,
323
00:16:40.559 --> 00:16:43.480
and what state does it store the props that are
324
00:16:43.559 --> 00:16:45.279
passed into that component.
325
00:16:46.080 --> 00:16:49.320
It remembers your dom state basically, So like when you're
326
00:16:49.320 --> 00:16:50.279
playing the video.
327
00:16:50.080 --> 00:16:52.399
It's the DOM state or the v doom state.
328
00:16:52.360 --> 00:16:53.159
The vdom state.
329
00:16:53.320 --> 00:16:57.559
So if you have a video, the amount that has
330
00:16:57.600 --> 00:17:00.000
been buffered, the amount that has been played. It remembers
331
00:17:00.200 --> 00:17:03.200
that same with like input, if it knows that you
332
00:17:03.279 --> 00:17:06.119
have put something in, it remembers that same with like
333
00:17:06.200 --> 00:17:08.799
scrolling a feed. So another thing that you could do
334
00:17:08.960 --> 00:17:11.400
is if you have a sidebar and you've got like
335
00:17:11.519 --> 00:17:14.839
ten different items and you've scrolled down to let's say
336
00:17:14.920 --> 00:17:17.400
the fifth or sixth item, and you're on the second
337
00:17:17.480 --> 00:17:20.599
or fourth page, it remembers where in them you are,
338
00:17:20.680 --> 00:17:22.960
like where in the scroll position you are, so it
339
00:17:23.000 --> 00:17:27.440
remembers that. So I think it's beyond props because these
340
00:17:27.440 --> 00:17:29.440
are not props that you would pass to your component.
341
00:17:29.680 --> 00:17:33.279
This is just coming from downstate, right, So it remembers.
342
00:17:32.799 --> 00:17:35.759
Your state, I understand. So it's kind of like freeze
343
00:17:36.400 --> 00:17:40.599
drawing the component state. I assume stuff like all the
344
00:17:40.720 --> 00:17:44.319
data that's kind of stored in hooks is somehow preserved
345
00:17:44.400 --> 00:17:50.039
between calls or between rerenders in a sense, I would
346
00:17:50.079 --> 00:17:52.920
definitely have to look at it. I understand what you're saying,
347
00:17:52.960 --> 00:17:57.799
but I'm still kind of wondering exactly what it does.
348
00:17:57.960 --> 00:18:01.480
So it's definitely something that I will look into following
349
00:18:01.519 --> 00:18:05.039
our conversation, because it's, like you said, it sounds like
350
00:18:05.079 --> 00:18:09.319
a very useful functionality that you're effectively getting for free,
351
00:18:09.359 --> 00:18:11.720
as it were. Yeah, that's really cool.
352
00:18:12.839 --> 00:18:13.640
Yeah.
353
00:18:13.680 --> 00:18:17.039
Are there any gotchas though with this kind of thing
354
00:18:17.319 --> 00:18:20.680
if you run into problems or issues like that can
355
00:18:20.920 --> 00:18:24.559
bite people if they use the activity, Yes, because otherwise
356
00:18:24.720 --> 00:18:28.519
you might just wrap your entire application in this huge
357
00:18:29.000 --> 00:18:32.720
activity at the like at the root of your v
358
00:18:32.799 --> 00:18:34.599
doom tree and hope for the best.
359
00:18:35.240 --> 00:18:35.599
Yeah.
360
00:18:35.839 --> 00:18:37.960
So, actually, one of the things that I noticed when
361
00:18:37.960 --> 00:18:42.559
I was implementing this video player component was that when
362
00:18:42.599 --> 00:18:46.920
I hovered away, sometimes a video keeps playing. It's not consistent,
363
00:18:47.079 --> 00:18:49.599
but sometimes the video will keep playing. So one of
364
00:18:49.599 --> 00:18:51.599
the things I had to add was, now, because the
365
00:18:51.640 --> 00:18:54.319
video is in the dom and React doesn't actually have
366
00:18:54.559 --> 00:18:56.440
control on the dorm, it only has control of a
367
00:18:56.559 --> 00:18:59.000
v doom, so sometimes a video keeps playing. So one
368
00:18:59.000 --> 00:19:01.319
of the things that I had to do was make
369
00:19:01.400 --> 00:19:05.240
sure when activity was make sure that in my component
370
00:19:05.319 --> 00:19:08.680
I add a new hook called use layout effect, which
371
00:19:08.720 --> 00:19:11.559
actually stops the video from playing when the component has
372
00:19:11.599 --> 00:19:16.000
been unmounted. So sometimes there might be weird edge cases
373
00:19:16.160 --> 00:19:18.079
when your component has been unmounted.
374
00:19:18.440 --> 00:19:20.240
In activity, Okay.
375
00:19:20.119 --> 00:19:22.880
I also assume it has a certain amount of overhead.
376
00:19:23.039 --> 00:19:25.279
Yeah, I mean I can assume that.
377
00:19:25.640 --> 00:19:28.200
I can understand that because your components are kind of
378
00:19:28.279 --> 00:19:32.640
in state, so it can definitely have some overhead, especially
379
00:19:32.720 --> 00:19:35.039
if you have like multiple different tabs and you've got
380
00:19:35.079 --> 00:19:37.480
like data loading in each of those tabs. I have
381
00:19:37.519 --> 00:19:40.680
an experimental with that myself to know what the implications are,
382
00:19:40.720 --> 00:19:42.759
but I can totally imagine that could be the case.
383
00:19:43.559 --> 00:19:47.200
Also, how many levels down does it go? I mean,
384
00:19:47.319 --> 00:19:50.759
like I said, what happens if I put an activity
385
00:19:52.319 --> 00:19:56.559
wrapper around the entire application? Is it like preserving the
386
00:19:56.720 --> 00:20:01.000
entire state of every subcomponent in the v doom tree.
387
00:20:01.519 --> 00:20:03.680
Wow, I haven't tried that. That would be fun to try.
388
00:20:03.799 --> 00:20:06.920
I imagine, like your app probably just breaks at that point.
389
00:20:07.519 --> 00:20:10.119
I don't think your state would be restored, but that
390
00:20:10.160 --> 00:20:12.559
would be fun to try. Like have like maybe like
391
00:20:12.599 --> 00:20:15.319
ten different inputs and just put activity on top of everything.
392
00:20:15.519 --> 00:20:18.720
Interesting anyway, like you said, it sounds really interesting and
393
00:20:18.759 --> 00:20:23.119
potentially very useful. So this is definitely something that I'll
394
00:20:23.400 --> 00:20:27.200
look at and play with after our conversation. Well, probably
395
00:20:27.240 --> 00:20:31.960
not immediately after because it's actually pretty late here in Israel,
396
00:20:32.119 --> 00:20:36.759
but you know, maybe tomorrow. But it does sound really
397
00:20:36.920 --> 00:20:41.759
really interesting and, like I said, potentially very useful. Anything
398
00:20:41.799 --> 00:20:44.720
else about activity before we move on to your next
399
00:20:44.759 --> 00:20:47.079
favorite thing about React nineteen point two.
400
00:20:47.799 --> 00:20:50.160
So I think activity is really cool because a lot
401
00:20:50.200 --> 00:20:53.480
of the demos that we saw at react on for
402
00:20:53.640 --> 00:20:56.799
showing using activity to kind of freeload data. So one
403
00:20:56.799 --> 00:20:58.720
of the cool things is imagine you have two tabs
404
00:20:58.759 --> 00:21:01.720
you put your opponents something that actually one of the
405
00:21:01.720 --> 00:21:06.039
things that activity is helpful for is replacing conditional rendering.
406
00:21:06.119 --> 00:21:09.119
So what we did initially was we have let's say
407
00:21:09.119 --> 00:21:11.920
through tabs, and in one tab we render if the
408
00:21:12.079 --> 00:21:14.880
tab is let's say home, and in another one we
409
00:21:14.920 --> 00:21:17.920
actually render a list of posts, which would be like
410
00:21:17.960 --> 00:21:20.880
a post tab. So typically what would happen is if
411
00:21:20.920 --> 00:21:23.759
you have conditional rendering, you load the first component the
412
00:21:23.799 --> 00:21:26.640
first tab. Then when you switch to the second component
413
00:21:26.720 --> 00:21:28.759
is when you load that component. Right, So you'll see
414
00:21:28.799 --> 00:21:31.240
like a loading screen when you switch to the second
415
00:21:31.279 --> 00:21:33.599
one with Activity, what you could do is you could
416
00:21:33.599 --> 00:21:35.960
wrap both of those tabs within Activity, and so when
417
00:21:36.000 --> 00:21:38.279
you switch between the two, the second one is already
418
00:21:38.319 --> 00:21:40.640
ready because it has pre rendered your data.
419
00:21:41.680 --> 00:21:44.079
So that is something that Activity is really helpful for
420
00:21:44.200 --> 00:21:44.599
as well.
421
00:21:44.680 --> 00:21:48.039
One caveat though, is that if you have data rendering
422
00:21:48.240 --> 00:21:51.119
in user effect, it will not work because Activity doesn't
423
00:21:51.119 --> 00:21:54.680
actually mount your effects or it doesn't actually run your
424
00:21:54.680 --> 00:21:58.200
effects until the component gets mounted. But if you have
425
00:21:58.319 --> 00:22:01.960
like a suspense powered component, like for example, if you're
426
00:22:02.039 --> 00:22:05.079
using use or if you have next yest data fetching,
427
00:22:05.200 --> 00:22:08.000
then that will work, and suspect like that will work
428
00:22:08.039 --> 00:22:10.960
in Activity sort of preload your data before you even
429
00:22:11.000 --> 00:22:11.880
move to that component.
430
00:22:11.920 --> 00:22:12.680
So that's really cool.
431
00:22:12.880 --> 00:22:16.319
I assume that well, certainly, if you put it in suspense,
432
00:22:16.400 --> 00:22:19.960
then it functions asynchronously to the rest of the application.
433
00:22:21.200 --> 00:22:24.839
But because otherwise I don't know if Activity is like
434
00:22:25.039 --> 00:22:28.279
a synchronous by default or if it needs suspense for that,
435
00:22:28.559 --> 00:22:32.480
because if it's not a synchronous, then you might be
436
00:22:32.559 --> 00:22:34.799
getting in the way of your primary content.
437
00:22:35.240 --> 00:22:38.559
No, so you don't need suspense for it, and anything
438
00:22:38.559 --> 00:22:41.079
that is rendered in activity is actually a lower priority
439
00:22:41.119 --> 00:22:44.799
than everything else. I think you mentioned adding suspense, and
440
00:22:44.960 --> 00:22:47.920
one of the differences between adding suspense and activity is
441
00:22:47.920 --> 00:22:50.160
that when you do add a suspense, you would actually
442
00:22:50.160 --> 00:22:53.079
see a fallback as the data is loading right while
443
00:22:53.279 --> 00:22:56.799
when you add actually activity, that component is loaded and
444
00:22:56.839 --> 00:22:59.680
then the other component actually gets loaded in the background
445
00:23:00.200 --> 00:23:03.480
on lower priority. So your current component still has like
446
00:23:03.519 --> 00:23:06.960
the component that is visible still has higher priority as
447
00:23:06.960 --> 00:23:09.480
opposed to the component that is in the hidden state.
448
00:23:09.880 --> 00:23:12.160
So activity actually gives you like two moods, a hidden
449
00:23:12.200 --> 00:23:15.640
state and an active state, a visible state and a
450
00:23:15.759 --> 00:23:18.720
hidden state, so the visible state components have higher priority
451
00:23:18.720 --> 00:23:20.079
than the hidden state components.
452
00:23:20.240 --> 00:23:23.119
Yes, I'm looking at the React documentation right now and
453
00:23:23.160 --> 00:23:26.759
I'm seeing it. So basically a mode attribute that can
454
00:23:26.799 --> 00:23:30.079
be set to either the string visible or the string hidden,
455
00:23:30.799 --> 00:23:34.400
and like you're saying, when it's hidden, it's lower priority.
456
00:23:34.519 --> 00:23:39.519
Essentially a synchronous I assume, and lower priority than visible content.
457
00:23:40.599 --> 00:23:45.200
Not surprising. Interesting, Yeah, I guess that's another one of
458
00:23:45.240 --> 00:23:48.720
the benefits that we get from the whole refactoring of
459
00:23:48.799 --> 00:23:53.759
React to use fibers instead of the previous surrendering engine
460
00:23:53.799 --> 00:23:58.000
is that now they can really control to a fine
461
00:23:58.039 --> 00:24:02.920
grained degree what gets read when. Yeah, and that provides
462
00:24:02.960 --> 00:24:06.319
a whole lot of opportunities for optimizations such as these.
463
00:24:06.839 --> 00:24:09.559
And you can pause and restart and like pause and
464
00:24:09.599 --> 00:24:12.160
resume your rendering when you need it to be. I
465
00:24:12.240 --> 00:24:15.559
think one question that people often have, so basically the
466
00:24:15.559 --> 00:24:18.880
way activity works is that it actually adds a display
467
00:24:18.960 --> 00:24:21.480
none to the component. So one question that people usually
468
00:24:21.519 --> 00:24:24.240
have is it any different than just adding display none.
469
00:24:24.279 --> 00:24:27.359
One advantage is that it actually restores your state. Second
470
00:24:27.480 --> 00:24:30.359
is like it pre renders your data. But another example,
471
00:24:30.480 --> 00:24:33.920
another advantage that I noticed is that when I add
472
00:24:34.119 --> 00:24:38.079
display none, just display nan through CSS versus if I
473
00:24:38.160 --> 00:24:41.680
add activity. There's a difference in LCP as well, so
474
00:24:41.880 --> 00:24:45.400
display none takes longer to load as compared to activity,
475
00:24:46.039 --> 00:24:47.079
which was very interesting.
476
00:24:48.279 --> 00:24:53.279
I assume, Well, it's interesting to look at what actually
477
00:24:53.359 --> 00:24:58.640
gets rendered into the dome itself when activity is used.
478
00:24:58.680 --> 00:25:03.279
Are you saying that when a is hidden, it renders
479
00:25:03.400 --> 00:25:07.240
into the dome with display none, or it achieves the
480
00:25:07.279 --> 00:25:11.359
same effect as a display none but without using display none, So.
481
00:25:11.319 --> 00:25:13.759
It actually uses display none. So let's say that you
482
00:25:13.799 --> 00:25:17.000
have two tabs home and post. If you add activity
483
00:25:17.160 --> 00:25:20.319
and you move from home to post in the dom,
484
00:25:20.359 --> 00:25:23.240
what you would see is that it adds a display
485
00:25:23.319 --> 00:25:26.920
nune to the component that is hidden, and then when
486
00:25:26.960 --> 00:25:29.200
you move back and removes display none. So it's literally
487
00:25:29.240 --> 00:25:33.079
adding that display nne style to the component. But the
488
00:25:33.160 --> 00:25:36.519
question also arises, like, well, is it the same if
489
00:25:36.559 --> 00:25:39.720
I just add display nne and not add activity. So
490
00:25:39.799 --> 00:25:41.480
what I've noticed is it's different.
491
00:25:42.200 --> 00:25:45.440
Yeah, well, I'm not surprised that it's different because well,
492
00:25:45.519 --> 00:25:48.319
at the dome level it might be effectively the same,
493
00:25:48.880 --> 00:25:52.279
but at the v dome level it's different because if
494
00:25:52.319 --> 00:25:54.839
you just add or remove display none, the v dome
495
00:25:55.759 --> 00:25:57.839
does the same thing that it would do either way.
496
00:25:58.000 --> 00:26:01.440
The vedome does not know or care about display none,
497
00:26:01.559 --> 00:26:05.079
whereas with activity, you know that you're going to be
498
00:26:05.119 --> 00:26:07.559
putting display none, but you also know that you can
499
00:26:07.640 --> 00:26:11.599
avoid certain amount of work and comparisons and stuff like
500
00:26:11.640 --> 00:26:14.039
that at the vetom level because you know that this
501
00:26:14.160 --> 00:26:18.480
stuff is not going to be visible anyway exactly. So
502
00:26:18.640 --> 00:26:22.039
I assume, again I'm guessing because I've not actually played
503
00:26:22.079 --> 00:26:25.960
with this mechanism yet myself, but I assume or I'm
504
00:26:26.000 --> 00:26:30.680
guessing that this is what actually what's actually happening really
505
00:26:30.720 --> 00:26:34.759
really interesting. Definitely something that I should play with.
506
00:26:35.359 --> 00:26:37.720
Yeah, I'm actually very excited about it. I've added to
507
00:26:37.920 --> 00:26:40.440
like a bunch of my apps and oh my god,
508
00:26:40.480 --> 00:26:43.000
it's so nice to like not have to think about
509
00:26:43.680 --> 00:26:47.240
adding this UX state and storing them and then refetching
510
00:26:47.240 --> 00:26:51.160
from them. It makes it makes life as a app
511
00:26:51.160 --> 00:26:55.400
develop much easier to focus a lot on like UX improvements, which.
512
00:26:55.200 --> 00:26:55.759
Is really cool.
513
00:26:55.960 --> 00:26:59.480
Yeah, it's it's about the whole. It's about two things really,
514
00:26:59.559 --> 00:27:01.720
if I'm saying thinking about it this way. First of all,
515
00:27:01.759 --> 00:27:06.400
it's about that declarative aspect of React, about you know,
516
00:27:06.519 --> 00:27:11.240
in telling React what you want done, rather than explaining
517
00:27:11.240 --> 00:27:14.400
how to do it. So rather than using all sorts
518
00:27:14.440 --> 00:27:18.240
of hooks and whatnot in imperative code, you just you know,
519
00:27:18.880 --> 00:27:23.519
like with suspense, you drop it into your vdome tree
520
00:27:24.000 --> 00:27:27.640
and your your componentry actually would be the better term
521
00:27:27.720 --> 00:27:30.279
to be use in this context, and then just reap
522
00:27:30.359 --> 00:27:34.119
the benefits. I do see from looking at the documentation
523
00:27:34.480 --> 00:27:39.079
that activity is kind of related to view transition or
524
00:27:39.119 --> 00:27:45.039
impacted by it. So maybe it's worthwhile to transition unintended
525
00:27:45.440 --> 00:27:48.079
to view transition. Yeah, so what can you tell us
526
00:27:48.079 --> 00:27:49.119
about view transition?
527
00:27:49.759 --> 00:27:49.920
Yes?
528
00:27:49.960 --> 00:27:52.359
So view transition is actually really interesting. It is still
529
00:27:52.400 --> 00:27:55.880
part of the experimental part release of React. It's not
530
00:27:55.960 --> 00:27:59.480
stable in nineteen point two, but view transition was one
531
00:27:59.519 --> 00:28:03.599
of them main features that were shown and React on,
532
00:28:03.880 --> 00:28:06.200
so I think it's worth talking about it, especially because
533
00:28:06.200 --> 00:28:06.960
activity and new.
534
00:28:06.880 --> 00:28:08.240
Transition kind of go hand in hand.
535
00:28:08.640 --> 00:28:12.319
So the thing that you transition does is it adds
536
00:28:12.359 --> 00:28:15.440
the CSS animating effect to any component that you wrap
537
00:28:15.480 --> 00:28:19.480
it in. So, for example, you've got view transition on
538
00:28:19.720 --> 00:28:22.960
a component where let's see, you've got the same video player.
539
00:28:22.799 --> 00:28:24.640
Kind of component. You're watching trailers.
540
00:28:24.880 --> 00:28:27.240
When you click on it, you want to show like
541
00:28:27.279 --> 00:28:29.839
a nice zoom out effect. So you can add view
542
00:28:29.839 --> 00:28:32.559
transition and then you can give it what kind of
543
00:28:33.279 --> 00:28:36.119
animation effect you wanted to do, or you can just
544
00:28:36.279 --> 00:28:38.519
leave it as default and you get like a nice
545
00:28:38.559 --> 00:28:39.319
fading effect.
546
00:28:39.720 --> 00:28:42.319
And I think it's if I might interrupt you for
547
00:28:42.359 --> 00:28:45.440
a second, it's first of all, I seem to recall it.
548
00:28:45.480 --> 00:28:48.960
We discussed this in a previous episode of JavaScript Jabber.
549
00:28:49.039 --> 00:28:52.559
I need to look and see when and then add
550
00:28:52.599 --> 00:28:55.759
the appropriate link to the show notes. But it's kind
551
00:28:55.759 --> 00:28:59.839
of important to understand or to note that few transitions
552
00:29:00.119 --> 00:29:04.440
or a browser dom feature. They're not a React feature,
553
00:29:04.920 --> 00:29:09.079
They're implemented by the browser itself. So the browser these
554
00:29:09.200 --> 00:29:13.559
days is able to animate your dome from a certain
555
00:29:13.880 --> 00:29:16.920
state to a different sort of state. And the example
556
00:29:16.960 --> 00:29:20.119
that you gave is the kind of the canonical example
557
00:29:20.799 --> 00:29:24.720
of like the Netflix type user interface where when you
558
00:29:24.799 --> 00:29:29.079
click on a particular video, that video expands to cover
559
00:29:29.279 --> 00:29:33.759
the entire display because you're going into that particular movie
560
00:29:33.880 --> 00:29:38.960
or TV show, whatever, and hopefully my dog is barking
561
00:29:39.079 --> 00:29:43.799
is not creating too much background noise, And like you said,
562
00:29:43.960 --> 00:29:47.839
it can animate from one state to the another, something
563
00:29:47.880 --> 00:29:50.240
that in the past people would need to jump through
564
00:29:50.279 --> 00:29:52.640
a lot of hoops in order to be able to
565
00:29:52.640 --> 00:29:57.839
achieve something like that. Now it's basically built into the browser. Now,
566
00:29:57.880 --> 00:30:02.000
remember we actually had Normozentae who actually took over the
567
00:30:02.440 --> 00:30:05.640
spec in the W three C for this functionality. I
568
00:30:05.680 --> 00:30:09.480
think it was originally done by Jake Archibald, and then
569
00:30:09.519 --> 00:30:13.200
I think Noah Mozenthal took it over, and as a recall,
570
00:30:13.279 --> 00:30:15.119
we actually had him on the show to talk about
571
00:30:15.160 --> 00:30:19.400
it again in the context of the browser itself rather
572
00:30:19.440 --> 00:30:23.559
than in the context of a particular framework. React is
573
00:30:23.599 --> 00:30:25.880
not the only framework that has support for it. I
574
00:30:25.920 --> 00:30:28.160
think there is also support for it in Swelt. It's
575
00:30:28.200 --> 00:30:32.599
a recall and solid I think. So it's not uniquely
576
00:30:32.799 --> 00:30:35.559
for React, but it's really nice to see that React
577
00:30:35.640 --> 00:30:39.559
is now as built in support for it with a
578
00:30:39.640 --> 00:30:44.160
view transition component that you can just wrap your components in.
579
00:30:44.720 --> 00:30:48.119
So can you elaborate on what exactly that view transition
580
00:30:48.279 --> 00:30:49.119
component does?
581
00:30:49.559 --> 00:30:51.880
Yeah, so you explained it perfectly.
582
00:30:51.960 --> 00:30:56.519
It is basically used for animating from one state to another.
583
00:30:56.759 --> 00:31:00.000
So an example that we have been talking about is
584
00:31:00.079 --> 00:31:03.039
the Netflix app. So when you actually open the trailer
585
00:31:03.319 --> 00:31:06.920
and you see like this nice like effect like fade
586
00:31:06.960 --> 00:31:10.119
in effect into the next page or the next component,
587
00:31:10.519 --> 00:31:10.880
that's what.
588
00:31:10.920 --> 00:31:12.119
View transition can help you do.
589
00:31:12.240 --> 00:31:14.720
So now instead of having to manually add an animation,
590
00:31:14.799 --> 00:31:16.319
you can wrap it with the new transition.
591
00:31:17.160 --> 00:31:18.519
It ass the classes.
592
00:31:18.920 --> 00:31:21.440
I think it's a view transition all and new which
593
00:31:21.480 --> 00:31:24.359
actually adds the slide in and slide out or like
594
00:31:24.400 --> 00:31:26.799
fade in and fade out effect, so it gives you
595
00:31:26.880 --> 00:31:28.119
animation out of the box.
596
00:31:28.240 --> 00:31:30.319
Yeah. I think that's probably the best example.
597
00:31:31.359 --> 00:31:36.240
So you would have certain you would have components wrapped
598
00:31:36.319 --> 00:31:40.039
in the view transition component, and then when you want
599
00:31:40.200 --> 00:31:44.039
to create that animation, what do you do? Do you
600
00:31:44.119 --> 00:31:47.839
replace the components that are contained within the view transition,
601
00:31:48.160 --> 00:31:50.400
do you do something else? What exactly do you do
602
00:31:50.759 --> 00:31:52.400
in order to trigger the animation?
603
00:31:53.039 --> 00:31:56.240
Yeah, so now to trigger the animation, that's a great question. Basically,
604
00:31:56.240 --> 00:31:58.400
what you want to do is let React know when
605
00:31:58.440 --> 00:32:01.240
you want to start transitioning to the next component. So
606
00:32:01.279 --> 00:32:03.240
what you do is, let's say that you have a
607
00:32:03.400 --> 00:32:06.319
button that actually initiates so like when you click on
608
00:32:06.359 --> 00:32:09.359
the trailer, the button actually navigates to the next element.
609
00:32:09.880 --> 00:32:12.200
That's when you want to wrap that button or that
610
00:32:12.319 --> 00:32:15.400
on click handler into a start transition and that will
611
00:32:15.839 --> 00:32:19.000
React know that at this point I need to start
612
00:32:19.039 --> 00:32:22.960
the transition of actually adding the like removing the old
613
00:32:23.039 --> 00:32:26.200
V transition and adding the new view transition effect, and
614
00:32:26.279 --> 00:32:28.440
that's where the next animation comes in. So you need
615
00:32:28.480 --> 00:32:31.599
to actually trigger the view transition by using a start
616
00:32:31.640 --> 00:32:35.880
transition function and that you wrap around whichever element should
617
00:32:35.920 --> 00:32:38.960
trigger the next component. So, for example, if you have
618
00:32:39.000 --> 00:32:41.680
a button that actually opens a new component, that's where
619
00:32:41.680 --> 00:32:42.279
you were added.
620
00:32:42.960 --> 00:32:48.240
Understood makes sense, So React has to know when you're
621
00:32:48.559 --> 00:32:53.200
actually instigating that transition, when what you're actually transitioning on.
622
00:32:54.279 --> 00:32:56.200
Yeah, exactly, very very cool.
623
00:32:56.279 --> 00:32:59.960
So what is the relation between activity and view transfer?
624
00:33:01.160 --> 00:33:03.680
So I'm trying to remember, Like, let me look at
625
00:33:03.680 --> 00:33:05.599
the doc to see what it actually talks about.
626
00:33:05.640 --> 00:33:07.680
It's not that important if you don't remember off the
627
00:33:07.680 --> 00:33:11.119
top of your head, but I seem to recall that
628
00:33:11.119 --> 00:33:13.440
there is some sort of a connection there.
629
00:33:13.559 --> 00:33:14.960
Yeah, I know that the coherent hand.
630
00:33:14.960 --> 00:33:17.160
I'm trying to remember, like, what was the example that
631
00:33:17.200 --> 00:33:18.400
was showed in the conference and.
632
00:33:19.079 --> 00:33:22.480
It says, oh, it's actually under caveats. It says, if
633
00:33:22.480 --> 00:33:26.359
inactivity is rendered inside of you transition and becomes visible
634
00:33:26.400 --> 00:33:29.079
as a result of an update caused by start transition,
635
00:33:29.759 --> 00:33:33.599
it will activate the view transitions and to animation. If
636
00:33:33.640 --> 00:33:36.799
it's it becomes hidden, it will activate its exit animation.
637
00:33:37.200 --> 00:33:37.440
Yeah.
638
00:33:37.920 --> 00:33:42.039
Actually, like activity works as the start transition effect. So
639
00:33:42.200 --> 00:33:44.400
when you have that component come in and it's been
640
00:33:44.440 --> 00:33:47.599
wrapped in new transition, that's when it starts animating in
641
00:33:47.680 --> 00:33:51.000
so the view transition has started the transition when activity
642
00:33:51.160 --> 00:33:52.160
is visible.
643
00:33:51.960 --> 00:33:59.200
Makes sense, makes sense because effectively, that's probably what you want. Yeah, okay, okay,
644
00:33:59.240 --> 00:34:02.119
then obviously our listeners, you know, one of the downsides
645
00:34:02.160 --> 00:34:05.640
of a podcast is that it's an audio medium, we
646
00:34:05.720 --> 00:34:08.719
can't actually show you stuff. I think Shreuty is doing
647
00:34:08.760 --> 00:34:13.360
an amazing job of explaining just verbally. But if you
648
00:34:13.480 --> 00:34:18.840
want to see then the React website has a lot
649
00:34:18.880 --> 00:34:22.800
of actual examples. Or alternatively, if you use something like
650
00:34:22.880 --> 00:34:25.400
a cursor, you can tell it write an example for
651
00:34:25.559 --> 00:34:30.800
me of some code that uses this or that feature React,
652
00:34:30.840 --> 00:34:32.559
and then you can look at what it created.
653
00:34:33.159 --> 00:34:35.159
Yeah, if you do that, the only thing I would
654
00:34:35.199 --> 00:34:37.519
do is give it the documentation and then tell it
655
00:34:37.599 --> 00:34:41.239
to create an example with the source of the documentation,
656
00:34:41.760 --> 00:34:45.079
because I've noticed that when I give it create especially
657
00:34:45.119 --> 00:34:47.880
with this newest updates, when I tell I haven't tried
658
00:34:47.880 --> 00:34:49.559
this with cursor, but I've tried this with plot, but
659
00:34:49.599 --> 00:34:51.559
when I tell it to create an example, it actually
660
00:34:51.599 --> 00:34:53.599
doesn't give the accurate results.
661
00:34:53.880 --> 00:34:55.119
So give it the documentation.
662
00:34:55.679 --> 00:34:58.840
Yeah, but it gives inaccurate results with complete confidence.
663
00:34:59.320 --> 00:35:00.480
Yes, I wouldn't know.
664
00:35:00.599 --> 00:35:02.719
One thing I wanted to say is the Netflix example
665
00:35:02.760 --> 00:35:05.480
that I'm talking about that is also on my YouTube channels.
666
00:35:05.480 --> 00:35:08.159
So if you're looking to see how like what the
667
00:35:08.199 --> 00:35:10.440
code behind that is, it's also on my YouTube channel.
668
00:35:10.639 --> 00:35:11.719
I'll leave link to that.
669
00:35:11.800 --> 00:35:16.199
Excellent that that will be awesome. Yeah, so show some
670
00:35:16.360 --> 00:35:18.599
love and support for shooting in a new end of
671
00:35:18.639 --> 00:35:24.880
way exactly. So we talked about the REAC compiler, we
672
00:35:24.960 --> 00:35:28.480
talked about activity, we talked about fut transition. What do
673
00:35:28.519 --> 00:35:29.719
we want to talk about next?
674
00:35:30.119 --> 00:35:31.960
So there's two more things that I want to talk about,
675
00:35:32.280 --> 00:35:34.719
and let's talk about use effect event, which is the
676
00:35:34.800 --> 00:35:36.280
only hook that comes in this.
677
00:35:36.480 --> 00:35:36.679
Really.
678
00:35:37.039 --> 00:35:39.599
Use effect event is a hope that I am super
679
00:35:39.639 --> 00:35:43.000
excited about because it helps to clean up user effects.
680
00:35:43.039 --> 00:35:47.760
And I have seen so many places where this could
681
00:35:47.800 --> 00:35:49.880
be useful and so many mistakes that happened with the
682
00:35:49.960 --> 00:35:52.199
use effects. So I think generally use effect could use
683
00:35:52.239 --> 00:35:54.280
some love, and use effect event comes at the right time.
684
00:35:54.800 --> 00:35:55.599
So what use.
685
00:35:55.480 --> 00:35:58.599
Effect event does is it helps to remove reactive and
686
00:35:58.719 --> 00:36:02.280
non reactive vas use out of use effect. So we
687
00:36:02.280 --> 00:36:04.519
were talking about this earlier where if we have a
688
00:36:04.519 --> 00:36:08.440
dependency and use effect, anytime that dependency changes, we rerun
689
00:36:08.480 --> 00:36:11.679
the use effect that causes a lot of rerenders. But
690
00:36:11.840 --> 00:36:14.639
imagine if you have a perfect example for this is
691
00:36:14.800 --> 00:36:17.360
imagine if you have a page where you just want
692
00:36:17.400 --> 00:36:19.920
to lock the impression of when the user landed on
693
00:36:19.920 --> 00:36:22.719
this page, and then you want to lock some other
694
00:36:22.920 --> 00:36:24.880
aspects of the page as well, like what is the
695
00:36:24.960 --> 00:36:26.880
user's name, what time is it?
696
00:36:27.119 --> 00:36:28.159
Things like that, right.
697
00:36:28.039 --> 00:36:29.840
So additional things that you want to log as soon
698
00:36:29.880 --> 00:36:32.519
as the user lands on the page. So in that case,
699
00:36:32.559 --> 00:36:35.039
when you add a use effect and you log analytics
700
00:36:35.039 --> 00:36:37.159
on that use effect, what you would be doing is
701
00:36:37.199 --> 00:36:40.440
you would be adding like name and time. Maybe not
702
00:36:40.599 --> 00:36:43.840
time because times so dynamic, but name and like page
703
00:36:43.920 --> 00:36:45.519
and route and things like that.
704
00:36:46.000 --> 00:36:50.039
Basically funderstill correctly. And I looked at some examples. Unlike
705
00:36:50.199 --> 00:36:53.639
the previous two which I haven't looked at, I did
706
00:36:53.719 --> 00:36:56.760
look at this one for some reason. And when you're
707
00:36:57.159 --> 00:37:01.760
using a certain value in user effect, React kind of
708
00:37:01.960 --> 00:37:07.000
requires you to include that value in the dependency ray.
709
00:37:07.239 --> 00:37:10.760
If you don't, you will actually get squigly lines for
710
00:37:10.920 --> 00:37:14.559
it and React with complain again not at run time,
711
00:37:14.679 --> 00:37:18.119
but it build time, React could actually complain about it.
712
00:37:18.800 --> 00:37:24.159
And therefore, if you have a certain value, if you
713
00:37:24.320 --> 00:37:27.559
use a certain value within your use effect, you're kind
714
00:37:27.559 --> 00:37:31.639
of forced to include it in the dependencray. Problem is
715
00:37:32.039 --> 00:37:34.840
that if you include it in the dependencray, every time
716
00:37:34.880 --> 00:37:41.320
that it changes, it forces that use effect to be reevaluated. Yeah,
717
00:37:41.400 --> 00:37:45.360
which is may not be what you want, like you said,
718
00:37:45.400 --> 00:37:49.119
if I'm only using that particular value. Let's say is
719
00:37:49.199 --> 00:37:52.119
an example that you gave to write to the console,
720
00:37:52.960 --> 00:37:55.639
I don't I want to when I write to the console,
721
00:37:55.679 --> 00:37:58.320
I want to use the current value. But if that
722
00:37:58.440 --> 00:38:02.360
value changes, I don't want to rerun users effect just
723
00:38:02.519 --> 00:38:07.719
because there's a different output to the console. So is
724
00:38:07.760 --> 00:38:08.559
that correct?
725
00:38:08.880 --> 00:38:10.920
Yeah, and that's that's exactly correct.
726
00:38:10.960 --> 00:38:13.559
And like you would want to, for example, log impression
727
00:38:13.599 --> 00:38:16.400
only once when the user has landed, and even if
728
00:38:16.400 --> 00:38:19.440
the path changes or something else changes or prop changes,
729
00:38:19.679 --> 00:38:22.199
you don't necessarily want to lock the same impression again.
730
00:38:22.679 --> 00:38:25.360
It could be a false impression as well, like you
731
00:38:25.480 --> 00:38:28.559
are adding data that you don't need. So in that case,
732
00:38:28.719 --> 00:38:30.880
like you said, if you add that in the dependency
733
00:38:30.920 --> 00:38:33.480
or a which react will actually force you to, you
734
00:38:33.559 --> 00:38:35.840
will be causing that function to run again and again,
735
00:38:35.880 --> 00:38:38.440
that effect to run and again again. So what use
736
00:38:38.440 --> 00:38:41.960
effect event does is you can move the non reactive values.
737
00:38:42.280 --> 00:38:45.320
And non reactive value basically mean things and dependencies that
738
00:38:45.360 --> 00:38:48.480
you don't want to rerun your effect for you don't
739
00:38:48.480 --> 00:38:51.280
want to react to that value, So you can move
740
00:38:51.280 --> 00:38:54.880
a non reactive value outside in a use effect event.
741
00:38:55.400 --> 00:38:57.679
That's why it's called use effect event because it's used
742
00:38:57.679 --> 00:39:01.599
to move event logic, which is like items that change
743
00:39:02.000 --> 00:39:04.079
that items that you just want to read.
744
00:39:03.920 --> 00:39:05.880
The value out of you don't want to react to it.
745
00:39:06.360 --> 00:39:08.719
So you can move those values, for example, in this case,
746
00:39:08.760 --> 00:39:10.960
maybe the past name or maybe the user name, things
747
00:39:10.960 --> 00:39:14.199
like that into a use effect event, and then you
748
00:39:14.400 --> 00:39:17.440
use that use effect event within the use effect So
749
00:39:17.440 --> 00:39:20.840
it's actually like a helper hook for use effect and
750
00:39:21.519 --> 00:39:25.800
that actually prevents you from reading the dependency or like
751
00:39:26.119 --> 00:39:29.559
reading the reactive values or reading the non reactive values,
752
00:39:29.639 --> 00:39:32.679
and prevents you from adding that to your dependence, which
753
00:39:32.719 --> 00:39:35.639
reduces the amounts of time you read, render your component,
754
00:39:35.719 --> 00:39:37.119
and rerun your effects.
755
00:39:37.239 --> 00:39:42.079
I remember or that in the past, when I prior
756
00:39:42.159 --> 00:39:44.719
to this ertion of react, when I wanted to achieve
757
00:39:44.840 --> 00:39:50.599
similar effect again pun intended, I would use AF for it.
758
00:39:51.280 --> 00:39:55.639
I would generate references to values and then even if
759
00:39:55.639 --> 00:39:58.559
I put I have to force to put the reference
760
00:39:59.480 --> 00:40:04.320
inside the dependency or a reference itself doesn't change the
761
00:40:04.480 --> 00:40:08.320
value that the references does change. So this is kind
762
00:40:08.320 --> 00:40:12.679
of a way to circumvent the problem, but it's it's
763
00:40:12.880 --> 00:40:16.760
kind of it almost felt like kind of a dirty
764
00:40:16.800 --> 00:40:21.199
trick or a cheap trick, like essentially using refs for
765
00:40:21.440 --> 00:40:26.280
values that shouldn't impact that can change but shouldn't cause
766
00:40:26.280 --> 00:40:30.360
a rerender is doable, but kind of felt dirty in
767
00:40:30.400 --> 00:40:33.199
a sense, like this is not what refs were originally
768
00:40:33.239 --> 00:40:37.320
intended for exactly, and now we can be much more
769
00:40:37.360 --> 00:40:42.039
explicit about it and not use a hack. Yeah, precisely cool,
770
00:40:42.800 --> 00:40:46.239
So that's really nice, it seems though, to be honest,
771
00:40:46.960 --> 00:40:51.239
it seems like something that is really helpful when you
772
00:40:51.360 --> 00:40:55.440
actually need it, but not something that you might be
773
00:40:55.639 --> 00:40:59.119
using all the time. Like almost all the examples that
774
00:40:59.159 --> 00:41:02.159
I'm hearing about end up talking about console.
775
00:41:01.760 --> 00:41:04.760
Logs, So yeah, I think you're right.
776
00:41:04.840 --> 00:41:07.079
Like, the biggest example that comes to my mind is
777
00:41:07.119 --> 00:41:09.679
about analytics and passions, because that's the one where you
778
00:41:10.519 --> 00:41:16.199
don't really want to react to a dependency that you've added. Yeah,
779
00:41:16.920 --> 00:41:20.400
it's kind of anything like when you need that effect,
780
00:41:20.760 --> 00:41:22.880
like when you need that hook that is the right hook,
781
00:41:23.039 --> 00:41:25.360
but otherwise that hook is not very commonly used.
782
00:41:26.079 --> 00:41:30.239
So anything related to observability, as it were. That way,
783
00:41:30.320 --> 00:41:34.639
you want to observe current values, up to date values,
784
00:41:34.639 --> 00:41:38.360
but you don't want to have to impact the actual
785
00:41:39.440 --> 00:41:43.440
behavior of the application because you're just observing it. Correct interesting.
786
00:41:43.559 --> 00:41:45.960
That's that's I think. I think that's a good point
787
00:41:46.000 --> 00:41:48.719
of view on that on that particular topic. I think
788
00:41:48.760 --> 00:41:53.199
that's that sounds like potentially the primary use case really
789
00:41:53.800 --> 00:41:58.639
very interesting. Okay, then we are I think we are. Well,
790
00:41:58.679 --> 00:42:02.920
we still have some time. So do we have more items? Now?
791
00:42:02.960 --> 00:42:05.679
One one you can talk about that I'm super excited about.
792
00:42:05.840 --> 00:42:06.800
Okay, go for it.
793
00:42:07.239 --> 00:42:10.320
Probably the most exciting thing in this release is the
794
00:42:10.360 --> 00:42:14.519
performance tracks in Chrome death Tools. So if you've been
795
00:42:14.559 --> 00:42:16.679
debugging React apps, you know that you need to install
796
00:42:16.719 --> 00:42:21.440
an external extension called React death Tools, which gives you
797
00:42:21.519 --> 00:42:24.639
profiler and I think it gives you components as well
798
00:42:24.880 --> 00:42:25.480
as part.
799
00:42:25.320 --> 00:42:28.239
Of Yes, it does. It provides you a component view
800
00:42:28.320 --> 00:42:32.920
that's kind of similar to the built in Elements panel.
801
00:42:33.119 --> 00:42:36.000
So you've got a built in component spanel which you
802
00:42:36.079 --> 00:42:41.360
can you're you're basically seeing components and their and their
803
00:42:41.400 --> 00:42:46.519
state and their properties, which is really useful for understanding
804
00:42:46.639 --> 00:42:50.000
what the vedom actually looks like at any point in time.
805
00:42:50.559 --> 00:42:52.880
And like you said, you have something that's kind of
806
00:42:52.920 --> 00:42:56.880
similar to the death Tools performance tab, only it looks
807
00:42:56.920 --> 00:42:59.840
at component re renders, so you can use it to
808
00:43:00.079 --> 00:43:04.239
identify excessive rerenders. I've used it on multiple occasions to
809
00:43:04.280 --> 00:43:08.800
identify excessive rerenders and try to mitigate them.
810
00:43:09.199 --> 00:43:12.159
Yeah, so those tools that really help perfectly just a
811
00:43:12.199 --> 00:43:17.280
flame chart, yeahs. And that profile tool is very helpful,
812
00:43:17.400 --> 00:43:20.840
especially for figuring out how many times your component re rendered,
813
00:43:20.880 --> 00:43:22.599
and that is the tool that I was using when
814
00:43:22.639 --> 00:43:25.400
I was working with reac compiler to figure out when
815
00:43:25.400 --> 00:43:27.719
the compiler has had it just how many times it
816
00:43:27.840 --> 00:43:30.960
reduced the rerenders. So that tools are still really helpful.
817
00:43:31.559 --> 00:43:34.840
But there is a now default tool that comes with
818
00:43:34.960 --> 00:43:38.159
Chrome Deaf tools if you have React nineteen point two install,
819
00:43:38.239 --> 00:43:40.440
which is the performance tracks and that is part of
820
00:43:40.480 --> 00:43:43.519
the performance tab within Chrome, so you don't need to
821
00:43:43.559 --> 00:43:47.199
install anything else, which is really cool. But what this
822
00:43:47.320 --> 00:43:50.559
does is when you inspect a component, Actually what you
823
00:43:50.559 --> 00:43:52.559
have to do to enable this, this is a little
824
00:43:52.599 --> 00:43:55.480
bit of gatcha, which not that easy to understand, not
825
00:43:55.599 --> 00:43:57.800
that easy to see, is you actually have to record
826
00:43:57.840 --> 00:44:00.440
the performance. So there's like a recording tab you have
827
00:44:00.480 --> 00:44:03.320
to record, and then you can like go through your
828
00:44:03.320 --> 00:44:05.800
app and do what you need to do, see like
829
00:44:05.880 --> 00:44:07.199
which clicks and whatever.
830
00:44:07.320 --> 00:44:08.039
You need to record.
831
00:44:08.440 --> 00:44:10.480
When you stop the recording, that's when you'll start seeing
832
00:44:10.480 --> 00:44:13.400
the performance tabs. So in the performance tab of Chrome
833
00:44:13.480 --> 00:44:17.239
Depth Tools, now you'll see two new tracks. They're called
834
00:44:17.320 --> 00:44:20.440
and they're called Components, and then they're called Scheduler.
835
00:44:20.320 --> 00:44:21.599
If I remember the name correctly.
836
00:44:21.760 --> 00:44:24.360
But they have a little React logo, so that shows
837
00:44:24.360 --> 00:44:26.400
you that this is coming from React nineteen point two.
838
00:44:26.840 --> 00:44:28.679
But what they actually show you is, let's say you
839
00:44:28.760 --> 00:44:31.039
clicked on an element and then you're fetching the data
840
00:44:31.079 --> 00:44:33.760
in the background, and then you're waiting for You're like
841
00:44:34.000 --> 00:44:36.079
you have got a loader coming in and then you're
842
00:44:36.079 --> 00:44:38.159
waiting for data to fill in, and then you have
843
00:44:38.199 --> 00:44:41.039
got some like changes in the DOM that's happening, changes
844
00:44:41.079 --> 00:44:44.639
on the UI that's happening. Now that performance track will
845
00:44:44.679 --> 00:44:47.480
actually log and show you all of that on the
846
00:44:47.519 --> 00:44:50.760
track itself, so you can actually see at one point
847
00:44:51.039 --> 00:44:53.920
you clicked, how long did that take? How much layout
848
00:44:53.960 --> 00:44:57.599
shift did that cause? What is the blocking part of
849
00:44:57.639 --> 00:44:59.920
this process? So when you're actually fetching data, that could
850
00:44:59.920 --> 00:45:02.400
be part of blocking. So now if you add suspense,
851
00:45:02.440 --> 00:45:04.679
it will show you like this is where suspense boundaries
852
00:45:04.679 --> 00:45:07.320
came in. So this is a really cool way to
853
00:45:07.360 --> 00:45:11.599
see what is your component doing when you've made an interaction,
854
00:45:11.719 --> 00:45:14.679
when you're doing something with it. And it's really helpful
855
00:45:14.679 --> 00:45:17.800
to see exactly in which phases your component is blocked,
856
00:45:18.039 --> 00:45:21.719
in which phases the React vidowm is actually committing. And
857
00:45:21.960 --> 00:45:24.599
it is a really cool way of debugging the React apps,
858
00:45:24.639 --> 00:45:26.280
so much better than profiler.
859
00:45:26.480 --> 00:45:31.360
Interesting. I assume it's only active or only shows the
860
00:45:31.440 --> 00:45:36.719
sexual information when React is in the development mode. That's
861
00:45:36.760 --> 00:45:40.119
probably FLUE because otherwise I assume that there would just
862
00:45:40.199 --> 00:45:41.239
be too much overhead.
863
00:45:41.599 --> 00:45:44.440
Yeah, it'd be weird to show that in for production apps.
864
00:45:44.679 --> 00:45:46.519
I haven't tested in production, so I'm not sure, but
865
00:45:46.840 --> 00:45:47.760
I assume.
866
00:45:47.559 --> 00:45:48.159
That's the case.
867
00:45:48.360 --> 00:45:50.639
I'll definitely take a look at that one. You may
868
00:45:50.719 --> 00:45:53.440
or may not know I'm something of a performance junkie.
869
00:45:53.559 --> 00:45:57.079
My current My current role is more let's call it
870
00:45:57.119 --> 00:46:01.519
a general I'm a principle engineer at a SI sense,
871
00:46:01.599 --> 00:46:04.800
so I deal with a lot of stuff, nothing not
872
00:46:05.000 --> 00:46:08.599
specifically having to do with performance. But my previous two
873
00:46:08.679 --> 00:46:13.360
roles was a performance tech lead, so i'm and i'm
874
00:46:13.400 --> 00:46:16.239
still on the doctor. Three CEE were performance working group,
875
00:46:16.800 --> 00:46:19.880
so so where performance is kind of my jam, So
876
00:46:21.599 --> 00:46:25.119
if there's this new functionality in the performance tab and
877
00:46:25.199 --> 00:46:27.280
dev tools, I definitely want to check it out and
878
00:46:27.639 --> 00:46:30.119
thank you for pointing it out. It's really exciting. It's
879
00:46:30.119 --> 00:46:31.519
something I'll definitely look into.
880
00:46:31.960 --> 00:46:34.559
Yeah, you might really appreciate it. So it's available in
881
00:46:34.639 --> 00:46:37.840
nineteen point two. You don't have to do anything, only
882
00:46:38.000 --> 00:46:39.639
kind of I spend a lot of time like figuring
883
00:46:39.679 --> 00:46:41.920
out where these tracks are. The only kind of gotcha
884
00:46:42.000 --> 00:46:44.599
there is you have to record performance and then see it,
885
00:46:45.280 --> 00:46:46.079
and then you'll see it.
886
00:46:47.079 --> 00:46:49.239
Now, have you done a video on this?
887
00:46:50.039 --> 00:46:50.280
Yeah?
888
00:46:50.320 --> 00:46:53.320
So in the React nineteen video I launched, I do
889
00:46:53.400 --> 00:46:56.320
show how to inspect an element with performance tracks.
890
00:46:56.360 --> 00:47:01.559
And do you also provide like a guitub example application
891
00:47:01.719 --> 00:47:03.760
that you can actually play with with this stuff?
892
00:47:04.079 --> 00:47:04.320
Yeah?
893
00:47:04.360 --> 00:47:07.280
So actually in the video link there is a example
894
00:47:07.320 --> 00:47:07.679
as well.
895
00:47:07.880 --> 00:47:10.199
Have we put up the video so it's easier.
896
00:47:10.320 --> 00:47:14.760
No, you know, we can put the link for our listeners,
897
00:47:14.840 --> 00:47:17.519
but I really don't want to show the video because
898
00:47:17.599 --> 00:47:20.400
then our listeners are kind of missing out. I think
899
00:47:20.440 --> 00:47:23.519
it's sufficient to say that we will definitely put a
900
00:47:23.559 --> 00:47:29.559
link to to shooties content, and you're definitely encouraged to
901
00:47:29.599 --> 00:47:32.480
go out and check it out and what you know,
902
00:47:32.679 --> 00:47:35.920
like and subscribe right, subscribe. Yeah, you need to get
903
00:47:35.920 --> 00:47:36.960
into that game.
904
00:47:37.000 --> 00:47:38.960
Like subscribe and comment and hit that bal.
905
00:47:39.000 --> 00:47:41.440
Icon so you never miss do you know?
906
00:47:41.599 --> 00:47:43.440
It's a notification from shut Kapur.
907
00:47:43.840 --> 00:47:47.960
Excellent, excellent. We do have something like ten more minutes,
908
00:47:48.000 --> 00:47:51.239
I think maybe even fifteen. So is there anything else
909
00:47:51.280 --> 00:47:53.639
we want to talk about either about nineteen point two
910
00:47:53.719 --> 00:47:54.800
or nineteen in general?
911
00:47:55.519 --> 00:47:57.840
I think one of the big kind of themes about nineteen,
912
00:47:58.400 --> 00:48:01.800
especially as you'll see in the content stocks, is async React,
913
00:48:01.960 --> 00:48:04.639
which is something that I want to dive deeper into,
914
00:48:04.760 --> 00:48:07.239
which is we have been using use effects to call
915
00:48:07.280 --> 00:48:10.480
our APIs if we don't have any other frameworks or
916
00:48:10.559 --> 00:48:14.079
data catching libraries, which has just been the general way, right.
917
00:48:14.320 --> 00:48:18.000
But React nineteen introduces use hook, which is used to
918
00:48:18.280 --> 00:48:21.880
resolve promises. So with nineteen point two and the conference
919
00:48:21.960 --> 00:48:25.880
talks that we've seen nineteen point two's React conference, a
920
00:48:25.920 --> 00:48:29.480
big focus has been how to move away from data
921
00:48:29.519 --> 00:48:33.639
fetching and use effect to actually using React the ACYNC way,
922
00:48:33.920 --> 00:48:37.119
which is by fetching data through the use hook, wrapping
923
00:48:37.159 --> 00:48:40.519
it with suspense, and then perhaps adding animations to view
924
00:48:40.559 --> 00:48:44.039
transitions and activity like showing in and out through activity.
925
00:48:44.199 --> 00:48:47.320
So I think with React nineteens released, the way we're
926
00:48:47.360 --> 00:48:49.920
going to be fetching data is changing. So I am
927
00:48:50.000 --> 00:48:51.960
very excited to try that out. That's going to be
928
00:48:52.000 --> 00:48:54.280
another video that I'll do on my channel in January.
929
00:48:54.519 --> 00:48:57.760
But I think the main focus is that we're going
930
00:48:57.800 --> 00:49:00.639
to be be changing the way we've been fetching data
931
00:49:00.800 --> 00:49:01.679
in React nineteen.
932
00:49:02.159 --> 00:49:05.360
I totally agree, and interestingly it's going to be one
933
00:49:05.400 --> 00:49:08.679
of my picks. But I'm actually giving a talk at
934
00:49:09.000 --> 00:49:12.360
the upcoming React next conference in Israel.
935
00:49:12.840 --> 00:49:13.320
Oh cool.
936
00:49:13.519 --> 00:49:19.119
It's yeah, it's Israel's largest front end conference. It originally
937
00:49:19.239 --> 00:49:22.480
was just React specific, but it has even though it's
938
00:49:22.519 --> 00:49:26.320
retained its name of React next, it's effectively become kind
939
00:49:26.320 --> 00:49:31.360
of a general purpose front end conference, not just about
940
00:49:31.400 --> 00:49:35.920
the React ecosystem. I think we're going to have something
941
00:49:36.000 --> 00:49:40.679
like somewhere between one thousand and twelve hundred attendees. It
942
00:49:40.760 --> 00:49:43.360
was like so sold out within a week or something
943
00:49:43.400 --> 00:49:47.400
like that. Wow, I'm actually, if I you know, I
944
00:49:47.480 --> 00:49:50.159
might brag, I'm actually beyond giving a talk. I'm actually
945
00:49:50.199 --> 00:49:54.639
giving the keynote. That's awesome, Yeah, which is kind of
946
00:49:54.679 --> 00:49:58.280
amusing because I'm not talking about AI. But you would
947
00:49:58.280 --> 00:50:01.519
think that any talk, any key note that front end
948
00:50:01.519 --> 00:50:04.119
conference these days is going to be somehow about AI
949
00:50:04.480 --> 00:50:07.320
not mine nice. But the reason that I'm bringing it
950
00:50:07.440 --> 00:50:11.280
up is that the topic of my talk is actually
951
00:50:11.320 --> 00:50:14.599
about our PC if our listeners are interested. It's kind
952
00:50:14.599 --> 00:50:17.880
of reminiscent of the conversation that we had with Ryan
953
00:50:17.960 --> 00:50:22.280
Carneato and Tennor Lindsley a couple of episodes ago about
954
00:50:22.679 --> 00:50:26.039
RPC and how it's kind of making this significant comeback
955
00:50:26.199 --> 00:50:31.039
in modern front end frameworks or full stack frameworks to
956
00:50:31.079 --> 00:50:33.960
be more accurate. And the reason that I'm bringing up
957
00:50:34.079 --> 00:50:37.239
is that one of the things that I'm showing is
958
00:50:37.800 --> 00:50:45.199
using ORPC, an RPC library within a React component to
959
00:50:45.320 --> 00:50:48.000
talk from the front end to some EPI on the
960
00:50:48.039 --> 00:50:52.639
back end. And RPC makes access to back end services
961
00:50:52.760 --> 00:50:55.960
look like function calls, kind of similar to what next
962
00:50:56.039 --> 00:51:00.000
js does with the server actions and React server components.
963
00:51:00.440 --> 00:51:03.280
So it's kind of similar in that respect. So you're
964
00:51:03.320 --> 00:51:07.239
calling a back end function and rather than getting a value,
965
00:51:07.320 --> 00:51:09.679
not surprisingly, what you get back as a promise, and
966
00:51:10.159 --> 00:51:14.800
now you can just use it inside use and it
967
00:51:14.880 --> 00:51:17.440
makes it look exactly like a function called you just
968
00:51:17.480 --> 00:51:20.920
wrap it in use effectively. You might say that in
969
00:51:21.000 --> 00:51:25.639
this regard, use is kind of reacts replacement for a
970
00:51:25.679 --> 00:51:30.199
weight in client side components. In React server components, you
971
00:51:30.239 --> 00:51:34.119
can actually use a weight because they're running on the
972
00:51:34.159 --> 00:51:37.280
back end and there's no problem with that. But on
973
00:51:37.360 --> 00:51:40.039
the front end, because of the way that React works,
974
00:51:40.840 --> 00:51:45.000
you cannot actually use a weight in the component itself.
975
00:51:45.400 --> 00:51:47.360
You have to kind of wrap it in use affect
976
00:51:47.440 --> 00:51:52.679
or something. And now you can just use use instead
977
00:51:52.840 --> 00:51:58.039
of effectively as and a weight inside client side components.
978
00:51:58.079 --> 00:52:01.840
So that's really cool. The demo that I'm showing is
979
00:52:02.119 --> 00:52:06.000
effectively just calling this function on the back end in
980
00:52:06.079 --> 00:52:09.159
order to get a value and using that value in
981
00:52:09.199 --> 00:52:13.960
the render to in the rendered component, and I use use,
982
00:52:14.480 --> 00:52:17.960
so this way I get and it's wrapped inside suspense.
983
00:52:18.519 --> 00:52:21.199
So this way it makes the call to the back end.
984
00:52:21.719 --> 00:52:24.239
While it's waiting for the content to arrive. From the
985
00:52:24.239 --> 00:52:28.519
back end, it shows the fallback and or the placeholder
986
00:52:28.639 --> 00:52:32.400
or the loader or whatever. And once that value arrives
987
00:52:32.440 --> 00:52:36.880
and it immediately rerenders using that that value that was
988
00:52:36.960 --> 00:52:39.519
received from back end. It's really cool and it sounds
989
00:52:39.639 --> 00:52:42.000
it's one of those things that's much easier to show
990
00:52:42.039 --> 00:52:45.519
than to explain verbally, all I can say is it's
991
00:52:46.199 --> 00:52:49.920
it's very readable code, much more readable than if I
992
00:52:49.960 --> 00:52:51.599
had to use use effect instead.
993
00:52:52.079 --> 00:52:54.480
Yeah, that's that's a cool example.
994
00:52:54.519 --> 00:52:57.679
Like, so you're returning data through an RPC call and
995
00:52:57.760 --> 00:52:59.719
because it's a promise, you can.
996
00:52:59.760 --> 00:53:02.519
Use use it exactly.
997
00:53:03.000 --> 00:53:03.880
Oh, that's cool.
998
00:53:04.079 --> 00:53:07.400
That's kind of like how tanstax start does so actions
999
00:53:07.440 --> 00:53:09.920
as well. So so actions are just RBC call and
1000
00:53:10.599 --> 00:53:13.559
typically you put that in your loader, but you could
1001
00:53:13.599 --> 00:53:16.440
totally put that as a user as well within your reaction.
1002
00:53:16.639 --> 00:53:20.239
Yeah. It actually is a little bit tricky because if
1003
00:53:20.239 --> 00:53:22.800
you're not careful with it, you can get into kind
1004
00:53:22.800 --> 00:53:28.639
of this rerender loop because every time the component renders,
1005
00:53:28.679 --> 00:53:32.119
you get a new promise, so you kind of need
1006
00:53:32.159 --> 00:53:34.199
to be careful about it. And one of the great
1007
00:53:34.239 --> 00:53:38.199
things about something a library like ten stack query is
1008
00:53:38.239 --> 00:53:42.400
that it does the automatic dedoping or cashing for you
1009
00:53:42.800 --> 00:53:46.039
and make sure you get the same promise each and
1010
00:53:46.559 --> 00:53:50.039
every time, so you're not getting into these kind of
1011
00:53:50.119 --> 00:53:53.880
rerender loops if you're using use So it can be
1012
00:53:53.920 --> 00:53:57.239
a little bit tricky if you're using use directly, which
1013
00:53:57.280 --> 00:54:01.920
is why i'd probably recommend using something like ten stack
1014
00:54:02.000 --> 00:54:06.840
query in these types of scenarios. And and by the way,
1015
00:54:07.480 --> 00:54:10.960
going back to my example of r PC, there's actually
1016
00:54:11.239 --> 00:54:15.519
I think a ten stack query wrapper for for r PC,
1017
00:54:16.280 --> 00:54:20.880
so you can use them together really really nicely, or
1018
00:54:21.039 --> 00:54:23.280
just use ten stack start if you want to have
1019
00:54:24.679 --> 00:54:28.159
an RPC capabilities in your full stack framework. Cool. Yeah,
1020
00:54:28.239 --> 00:54:31.159
it's it's one. It's something that I discussed at links
1021
00:54:31.199 --> 00:54:35.000
with our common friend. We found out that he's a
1022
00:54:35.000 --> 00:54:38.559
friend of both of us. Jack Harrington. Great guy. Yes, yeah,
1023
00:54:38.599 --> 00:54:41.079
I love this guy and he makes amazing content as well.
1024
00:54:41.159 --> 00:54:42.320
He makes amazing content.
1025
00:54:42.519 --> 00:54:48.480
Yeah. Anyway, so yeah, I really like YOUSE. I think
1026
00:54:48.519 --> 00:54:54.760
it will definitely change the way that people write client
1027
00:54:54.880 --> 00:54:59.639
side components in React, although they're like I said, there
1028
00:54:59.679 --> 00:55:03.320
are few gutchas there and people will need to get
1029
00:55:03.400 --> 00:55:06.760
used to it and learn how to properly use it
1030
00:55:06.840 --> 00:55:07.960
again pun intended.
1031
00:55:08.199 --> 00:55:11.559
Yeah, the suspense is building up exactly.
1032
00:55:11.840 --> 00:55:12.039
Yeah.
1033
00:55:12.239 --> 00:55:15.360
I think news with suspense and new transition and activity
1034
00:55:15.480 --> 00:55:18.639
is kind of the future of React and I'm very
1035
00:55:18.679 --> 00:55:19.800
excited to see it in action.
1036
00:55:20.119 --> 00:55:26.280
Yeah, I totally agree. I think that Suspense when it landed,
1037
00:55:26.400 --> 00:55:29.519
opened up a huge amount of possibilities that this whole
1038
00:55:29.599 --> 00:55:35.719
thing about asynchronous reactivity in React is the sea change,
1039
00:55:35.840 --> 00:55:40.280
and we're still experiencing the outcomes and the benefits of
1040
00:55:40.360 --> 00:55:45.039
these changes, and also the added complexities associated with them.
1041
00:55:45.400 --> 00:55:49.960
It's definitely a different model to learn and to understand
1042
00:55:50.000 --> 00:55:53.679
with regard to how React actually works and what happens.
1043
00:55:53.719 --> 00:56:01.119
When Okay, we're close to finishing our time going to picks,
1044
00:56:01.159 --> 00:56:03.360
you know what I'll give us. I'll give us ten
1045
00:56:03.480 --> 00:56:06.360
or ten more minutes to talk about React stuff before
1046
00:56:06.360 --> 00:56:08.880
we go to picks. Is there anything else you think
1047
00:56:08.920 --> 00:56:11.719
we should be talking about in the context of React nineteen.
1048
00:56:12.679 --> 00:56:14.360
I think those are the biggest things that comes to
1049
00:56:14.400 --> 00:56:17.159
my mind. I'm super excited about React compiler being stable.
1050
00:56:17.440 --> 00:56:20.079
I can't wait for removing I can't wait to remove
1051
00:56:20.079 --> 00:56:22.679
all the use numbers and use callbacks. That's the one
1052
00:56:22.679 --> 00:56:25.880
that I'm most excited about. Activity is a component that
1053
00:56:26.039 --> 00:56:28.800
I am specifically excited about because I've routed a lot
1054
00:56:28.800 --> 00:56:30.840
of apps where I've had to actually store the state
1055
00:56:31.360 --> 00:56:33.840
so I can wait the refactor my apps, do you.
1056
00:56:34.000 --> 00:56:39.679
Consider Okay, so per my understanding, who's client and use
1057
00:56:39.920 --> 00:56:44.199
server even though they need a full stack framework in
1058
00:56:44.280 --> 00:56:48.599
order to work, which means that they need either next
1059
00:56:48.679 --> 00:56:53.280
JS or ten stack. You would consider them to be
1060
00:56:53.360 --> 00:56:56.639
part of React though, right, so they are part of React.
1061
00:56:56.639 --> 00:56:59.960
They are directives, but they I don't think they were
1062
00:57:00.280 --> 00:57:01.000
tan stack not.
1063
00:57:01.400 --> 00:57:04.320
Oh yeah, ten stack has its own alternative, I think.
1064
00:57:04.719 --> 00:57:07.360
Yeah, so tanstyle just has like creates so a functional
1065
00:57:07.400 --> 00:57:09.599
with just the same as youth server. And then you
1066
00:57:09.599 --> 00:57:12.119
don't need to use used client because everything is client first.
1067
00:57:12.280 --> 00:57:13.440
I think the only work.
1068
00:57:13.199 --> 00:57:18.800
In next year understood and use cash. That's a next
1069
00:57:18.840 --> 00:57:21.599
GS thing. That's not even a reacting.
1070
00:57:21.239 --> 00:57:24.639
Right, I can't remember. I know it's a next gest thing.
1071
00:57:24.639 --> 00:57:27.320
I don't know if it's like a React things use cash.
1072
00:57:27.400 --> 00:57:29.280
And then there's a new one which creed a lot
1073
00:57:29.320 --> 00:57:30.519
of controversy in trying.
1074
00:57:30.360 --> 00:57:32.800
To or use workflow. But that's not even the next
1075
00:57:32.880 --> 00:57:35.480
GS thing. That's a verse cell thing. Right.
1076
00:57:35.719 --> 00:57:40.679
So there's so many use hooks, use directives, and the
1077
00:57:40.719 --> 00:57:42.880
only place that I've been I've seen them being used
1078
00:57:43.000 --> 00:57:43.519
is next year.
1079
00:57:43.599 --> 00:57:47.679
Do you remember the original one? Though? You strict that's
1080
00:57:47.760 --> 00:57:50.519
that's where that's that's where they all come from.
1081
00:57:50.679 --> 00:57:53.719
Oh yeah, that's true. Now that's a standard.
1082
00:57:54.360 --> 00:57:57.360
Yeah, well that's part of JavaScript. Even that's not even React.
1083
00:57:57.519 --> 00:57:59.159
That's the JavaScript itself.
1084
00:57:59.519 --> 00:58:00.960
I guess that's where it comes from.
1085
00:58:00.960 --> 00:58:04.719
You're right, yeah, that's that's that's the original, that's the
1086
00:58:04.760 --> 00:58:09.239
OG exactly. Now we've got all but it's getting to
1087
00:58:09.280 --> 00:58:12.360
the point where, if this keeps on going, we'll probably
1088
00:58:12.360 --> 00:58:15.639
need some standardization body to ensure that we don't get
1089
00:58:15.679 --> 00:58:17.639
conflicts on their various uses.
1090
00:58:18.199 --> 00:58:21.440
Yeah, and that's the thing, right, Like, these are not standards,
1091
00:58:21.480 --> 00:58:23.800
they're not type safe, so you have to remember to
1092
00:58:23.840 --> 00:58:25.400
add the directors to the files.
1093
00:58:25.480 --> 00:58:27.039
It's a lot of mental overhead.
1094
00:58:27.199 --> 00:58:31.760
On the other hand, they're declarative, which I can appreciate.
1095
00:58:32.079 --> 00:58:36.320
Know that originally they were actually if you I don't
1096
00:58:36.320 --> 00:58:38.719
know if if you know this or remember this, but
1097
00:58:38.840 --> 00:58:43.159
originally they sought to use the file names, so instead
1098
00:58:43.199 --> 00:58:46.199
of having used server and use clients, they thought about
1099
00:58:46.239 --> 00:58:51.760
having a client dot tx and server dot tsx in
1100
00:58:51.800 --> 00:58:55.559
the actual file name. And then they decided that they
1101
00:58:55.639 --> 00:59:00.639
needed greater granularity and have it more declared narrative in
1102
00:59:00.679 --> 00:59:04.880
the code itself rather than an external place like the
1103
00:59:04.960 --> 00:59:08.039
fine name. I think that Swelt, on the other hand,
1104
00:59:08.440 --> 00:59:12.800
does intentionally use file names for these sort of distinctions,
1105
00:59:13.199 --> 00:59:16.760
so it's a different take on the same approach, but
1106
00:59:17.440 --> 00:59:20.480
On the one hand, I really like the declarative approach,
1107
00:59:20.960 --> 00:59:25.320
basically saying what you want rather than how to actually
1108
00:59:25.360 --> 00:59:28.079
do it. I am concerned about, like you said, all
1109
00:59:28.119 --> 00:59:33.800
these users because they're kind of outside the scope of
1110
00:59:33.840 --> 00:59:37.199
the language. The fact that it's a string intentionally forces
1111
00:59:37.239 --> 00:59:40.840
the language to kind of ignore it and being an
1112
00:59:40.840 --> 00:59:46.599
inline string, and there's no standardization around it, and it's
1113
00:59:46.920 --> 00:59:50.480
and it's an interesting question. I assume that the linters
1114
00:59:50.519 --> 00:59:54.519
will be updated and modified to take this into account
1115
00:59:54.559 --> 00:59:58.239
when they're parsing the code. I see no reason why not.
1116
00:59:59.320 --> 01:00:02.480
But I have to say that I was thinking at
1117
01:00:02.519 --> 01:00:06.119
one point or another that if decorators would have already
1118
01:00:06.159 --> 01:00:09.079
been standardized as part of JavaScript and not just as
1119
01:00:09.119 --> 01:00:13.519
part of Typescript, then maybe we should have used decorators
1120
01:00:13.559 --> 01:00:17.559
instead for these sort of things. That's true, although decorators
1121
01:00:17.599 --> 01:00:22.599
require classes and React now is mostly class less, right,
1122
01:00:22.920 --> 01:00:28.199
so you know, so it's a problem, yeah, Lie Stard, Okay,
1123
01:00:28.800 --> 01:00:31.159
we are more or less at the end of our
1124
01:00:31.280 --> 01:00:35.159
content part. Is there really anything else we should be
1125
01:00:35.280 --> 01:00:39.199
mentioning in the context of React that we haven't Maybe
1126
01:00:39.360 --> 01:00:43.079
things that you're excited in the in upcoming versions that
1127
01:00:43.119 --> 01:00:45.599
you're hoping for the reacting to introduce.
1128
01:00:46.719 --> 01:00:49.280
Yeah, so React, like I said, is going to move
1129
01:00:49.320 --> 01:00:51.920
into this like ACYNC React version, which is going to
1130
01:00:51.960 --> 01:00:54.239
be the future of React. I'm pretty excited about it
1131
01:00:54.920 --> 01:00:57.760
because so far we've had to depend on frameworks to
1132
01:00:57.840 --> 01:01:00.599
fetch our data. Now it starts to kind of come
1133
01:01:00.639 --> 01:01:02.679
back and to React and we don't have to actually
1134
01:01:02.760 --> 01:01:05.639
need a framework to use things like use, which I'm
1135
01:01:05.679 --> 01:01:08.519
super excited about. So that's something to keep an eye
1136
01:01:08.519 --> 01:01:11.559
out on. How data fetching is going to change and
1137
01:01:11.679 --> 01:01:17.400
how loading components and reading from these promises is going
1138
01:01:17.440 --> 01:01:19.280
to change with the future of React.
1139
01:01:19.440 --> 01:01:23.480
Interesting. I would like to see some sort of built
1140
01:01:23.559 --> 01:01:26.800
in We are kind of we kind of have it
1141
01:01:28.119 --> 01:01:34.639
in with React server components, but I would like to
1142
01:01:34.679 --> 01:01:40.880
see more explicit support for streaming built into the framework.
1143
01:01:43.159 --> 01:01:45.679
It actually has to go with another one of the
1144
01:01:45.760 --> 01:01:49.079
examples that I have in my talk, which is actually
1145
01:01:49.360 --> 01:01:52.400
using a generator on the server if you're familiar with
1146
01:01:52.519 --> 01:01:57.280
generator functions, So you can actually wrap a generator as
1147
01:01:57.360 --> 01:02:00.639
kind of a server function, and then you create a
1148
01:02:00.800 --> 01:02:04.320
stream of data coming into the client and you can,
1149
01:02:04.400 --> 01:02:08.519
let's say, re render a React component whenever you get
1150
01:02:08.519 --> 01:02:12.079
an update from the server, which is really really cool.
1151
01:02:12.719 --> 01:02:14.800
Yeah, I need to be going through the next sofait.
1152
01:02:15.880 --> 01:02:18.559
Yeah, now right now I need to do something. I
1153
01:02:18.639 --> 01:02:21.519
need to use a use effect in order to achieve it. It
1154
01:02:21.400 --> 01:02:24.880
would be great if it would somehow be better integrated.
1155
01:02:25.199 --> 01:02:29.039
I guess that React the core team would say something
1156
01:02:29.119 --> 01:02:33.159
that you effectively can get it using reacts server components already,
1157
01:02:33.760 --> 01:02:38.360
but I would like to see something nicer, a real
1158
01:02:38.920 --> 01:02:40.440
stream type implementation.
1159
01:02:41.800 --> 01:02:43.960
Have you tried rendered to pypable stream?
1160
01:02:44.280 --> 01:02:47.440
I say, I have to say that the O RPC
1161
01:02:47.559 --> 01:02:50.679
implementation is just so nice. I can show it to
1162
01:02:50.719 --> 01:02:55.320
you after we finish our conversation. It's just so clean
1163
01:02:56.079 --> 01:02:59.719
that I'm happy with it. But if there are alternatives.
1164
01:03:00.039 --> 01:03:01.880
After a show, you you can tell me if there
1165
01:03:01.920 --> 01:03:07.159
are potentially nicer built in alternatives and React itself okay. Then,
1166
01:03:07.280 --> 01:03:09.920
So to finish up our show, we have our picks section,
1167
01:03:10.440 --> 01:03:13.519
and in our picks we just shout out what'sever interesting
1168
01:03:13.639 --> 01:03:15.960
for us or to us. It can be technical, it
1169
01:03:15.960 --> 01:03:19.880
can be non technical, any topic that we want. So
1170
01:03:19.960 --> 01:03:22.360
I'm going to start, because that's what we do. We
1171
01:03:22.480 --> 01:03:26.079
let our guests go last. Oh. The first pick I
1172
01:03:26.159 --> 01:03:28.440
had is one that I already mentioned is the fact
1173
01:03:28.440 --> 01:03:32.800
that I'm the keynote speaker the upcoming React Next conference.
1174
01:03:32.880 --> 01:03:37.079
It's actually scheduled to take place on December fifteenth. I
1175
01:03:37.119 --> 01:03:39.800
don't know if this episode will air before then or
1176
01:03:39.880 --> 01:03:42.840
after then. If you're listening to the live stream, well
1177
01:03:43.199 --> 01:03:46.639
it hasn't happened yet. I'm really excited about it. I
1178
01:03:46.679 --> 01:03:49.239
think I've got some really really cool demos. It's an
1179
01:03:49.239 --> 01:03:52.159
interesting topic, one that's really near and dear to my heart,
1180
01:03:52.599 --> 01:03:55.360
think that the comeback of o RPC is really really interesting.
1181
01:03:56.320 --> 01:04:01.239
Interestingly enough, the very next day, I'm giving a talk,
1182
01:04:01.360 --> 01:04:05.480
not a keynote, a regular talk at yet another conference
1183
01:04:05.519 --> 01:04:08.960
here in Tel Aviv called no TLV. It's a conference
1184
01:04:09.199 --> 01:04:13.079
for no developers, and this is the first time that
1185
01:04:13.480 --> 01:04:17.119
talk of mine. The title of the talk was actually
1186
01:04:17.639 --> 01:04:22.920
kind of censored, i would say, by the conference organizers,
1187
01:04:23.360 --> 01:04:26.800
which is really amusing. And when I asked them why
1188
01:04:26.840 --> 01:04:29.480
they did it, they basically looked at me and told me,
1189
01:04:30.000 --> 01:04:33.679
are you serious. So the title of my talk, the
1190
01:04:33.760 --> 01:04:37.679
current title, is using heap dumps to find and fix
1191
01:04:37.840 --> 01:04:41.880
no JS memory and CPU problems. So I'm basically talking
1192
01:04:41.920 --> 01:04:47.800
about how to take heap dumps both programmatically and using
1193
01:04:47.880 --> 01:04:51.079
dev tools and whatever other mechanism, and then how to
1194
01:04:51.159 --> 01:04:54.599
analyze them in order to find and fix memory and
1195
01:04:54.639 --> 01:04:59.039
CPU issues. Now, why did they censor the talk title?
1196
01:04:59.079 --> 01:05:04.039
Because the original title was taking a dump colon using
1197
01:05:04.119 --> 01:05:07.800
heap dumps to find and fix no Jazz memorane CPU problems.
1198
01:05:08.159 --> 01:05:11.639
So yeah, I think that was like too much for them.
1199
01:05:11.840 --> 01:05:13.519
Oh that's the interesting title.
1200
01:05:15.280 --> 01:05:17.559
You should you should see the slides that I'm using.
1201
01:05:18.159 --> 01:05:19.440
I didn't censor the slides.
1202
01:05:19.719 --> 01:05:21.679
Yeah, I would like to check it out. That sounds
1203
01:05:21.719 --> 01:05:22.280
really fun.
1204
01:05:23.199 --> 01:05:25.039
Yeah, I think it's going to be good talk. So
1205
01:05:25.079 --> 01:05:27.360
I'm giving these two talks, so that would be my
1206
01:05:27.440 --> 01:05:30.119
first pick. My second pick is a bit of news
1207
01:05:30.400 --> 01:05:34.239
that dropped today or yesterday is the fact that the
1208
01:05:34.360 --> 01:05:37.320
Anthropic is purchasing bun. Have you heard about that?
1209
01:05:37.599 --> 01:05:39.800
I have not. Oh wow, that's amazing.
1210
01:05:40.480 --> 01:05:44.840
Yeah, so bun has been Soldanthropic. It's becoming part of Entropics.
1211
01:05:44.880 --> 01:05:48.840
The bun core team including everybody, is going to become
1212
01:05:49.039 --> 01:05:52.079
Tropic employees, and they're going to continue working on the
1213
01:05:52.119 --> 01:05:55.559
project and the project will continue as an open source project,
1214
01:05:55.639 --> 01:05:59.079
so effectively for people who are using bun, it continues
1215
01:05:59.119 --> 01:06:02.199
as is in fact the great news because, for those
1216
01:06:02.239 --> 01:06:05.400
of you who don't know, Bonn was a VC backed
1217
01:06:05.440 --> 01:06:09.039
open source company, which means that they got their money
1218
01:06:09.079 --> 01:06:14.000
which funded their development efforts from vcs. But vcs like
1219
01:06:14.039 --> 01:06:17.079
to see return on investment. In the case of companies
1220
01:06:17.079 --> 01:06:21.119
such as Versailles or maintaining nextgs, they were selling hosting
1221
01:06:21.159 --> 01:06:24.519
services the same for by the way, Fortino, but bon
1222
01:06:24.679 --> 01:06:28.159
had no such things. So there was an obvious question
1223
01:06:28.679 --> 01:06:32.159
about how bon are going to be able to continue
1224
01:06:32.199 --> 01:06:36.360
as a VC funded open source organization without an actual
1225
01:06:36.400 --> 01:06:40.280
revenue stream. And the LVIUS answer is they're going to
1226
01:06:40.280 --> 01:06:43.599
be sold, and they were sold to Anthropic, and Nentropic
1227
01:06:43.800 --> 01:06:46.880
is committed to continue to support them and continue to
1228
01:06:46.960 --> 01:06:50.360
support this open source project. So it's I think it's
1229
01:06:50.400 --> 01:06:54.000
good news for the open source community and for the
1230
01:06:54.000 --> 01:06:58.000
future of bon. By the way, we had I forget
1231
01:06:58.000 --> 01:07:04.119
the name of Bun's fund. You remember's name. We had
1232
01:07:04.199 --> 01:07:09.199
him as a guest on our show as well. I remember, yeah, exactly,
1233
01:07:09.360 --> 01:07:11.320
Jared Sumner, and we actually had him in a guest
1234
01:07:11.440 --> 01:07:13.840
quite a while when Bunn was really really new. We
1235
01:07:14.199 --> 01:07:16.239
brought them on to talk about why he built it
1236
01:07:16.320 --> 01:07:20.440
and what are is, what's his philosophy and his goal
1237
01:07:20.559 --> 01:07:24.400
with his project. It's a really good episode. Even though
1238
01:07:24.840 --> 01:07:27.280
it's it's I think it was like something like two
1239
01:07:27.360 --> 01:07:30.119
years ago something like that. I think it's still very
1240
01:07:30.159 --> 01:07:33.639
pertinent and I recommend to our listeners to listen to it.
1241
01:07:34.239 --> 01:07:38.280
So those would actually be my picks for today, all
1242
01:07:38.320 --> 01:07:41.800
of them technical, I guess. So, Shooty, do you have
1243
01:07:41.840 --> 01:07:42.880
any picks for us?
1244
01:07:43.239 --> 01:07:43.480
Yes?
1245
01:07:43.719 --> 01:07:46.840
I will shamelessly plugged my YouTube channel. You can find
1246
01:07:47.000 --> 01:07:49.760
REAC content more of what we talked about, all of
1247
01:07:49.760 --> 01:07:51.880
the code examples with It's.
1248
01:07:51.800 --> 01:07:53.719
The name of the channel, it's called.
1249
01:07:53.559 --> 01:07:56.320
Shuti Kapoor, just my first name and my last name.
1250
01:07:56.840 --> 01:07:59.480
You can just YouTube me up Shouty Kapur and you'll
1251
01:07:59.480 --> 01:08:02.360
find myna I have like what two fifty videos at this.
1252
01:08:02.400 --> 01:08:07.719
Point, Like, wow, that's a lot a lot. Yeah. Do
1253
01:08:07.800 --> 01:08:11.079
you prefer the long form or the short form videos?
1254
01:08:11.440 --> 01:08:15.440
I like long form because short form is very ephemeral.
1255
01:08:15.880 --> 01:08:18.760
Maybe it hits some people and then it just gets lost.
1256
01:08:18.920 --> 01:08:22.600
Short long form is more watchable. I feel you can
1257
01:08:22.640 --> 01:08:24.760
deliver a lot more content in it, and you can
1258
01:08:24.760 --> 01:08:26.760
deliver a lot more value, and you can actually show
1259
01:08:26.840 --> 01:08:29.840
like cold demos probably in long form. In short form,
1260
01:08:29.880 --> 01:08:33.920
it just gets like weirdly cropped out. I don't like short.
1261
01:08:33.720 --> 01:08:35.840
Form, so you're not the TikTok.
1262
01:08:35.399 --> 01:08:39.760
Generation, too old for that, But I do like short
1263
01:08:39.800 --> 01:08:44.359
form for like quick tips. So in the month of December,
1264
01:08:44.439 --> 01:08:48.640
I'm doing the full month of AMA ask me anything serious.
1265
01:08:48.760 --> 01:08:52.000
So I have picked questions that people have left in comments,
1266
01:08:52.000 --> 01:08:54.079
and I'm making a short form video out of each
1267
01:08:54.119 --> 01:08:54.399
of them.
1268
01:08:54.479 --> 01:08:54.840
Wow.
1269
01:08:55.159 --> 01:08:57.600
So every day I'm answering one question that the audience
1270
01:08:57.640 --> 01:09:01.119
has left me in my YouTube comments or in the shorts.
1271
01:09:01.640 --> 01:09:04.319
If the audience who's listening to this podcast has a question,
1272
01:09:04.359 --> 01:09:05.880
you can also put that in the chat and I
1273
01:09:05.920 --> 01:09:08.039
will pick it up and make a video.
1274
01:09:07.800 --> 01:09:10.000
Out of it. So of that's awesome.
1275
01:09:10.319 --> 01:09:10.680
Yeah.
1276
01:09:10.680 --> 01:09:13.880
So, like, especially like when I've made AI videos, people
1277
01:09:13.960 --> 01:09:16.239
have asked questions like do you still need to learn
1278
01:09:16.279 --> 01:09:19.840
fun end in this age of AI? Or is fun
1279
01:09:19.880 --> 01:09:22.159
and going to die because everybody's going to become a
1280
01:09:22.199 --> 01:09:26.039
full stack developer. So there's real concerns that people have
1281
01:09:26.119 --> 01:09:28.199
and they've left that in comments, and I'm interested.
1282
01:09:28.800 --> 01:09:32.920
So primate Gen made a video about the bond purchase
1283
01:09:33.039 --> 01:09:36.720
Bianthropic and one of the things he said that here,
1284
01:09:37.039 --> 01:09:41.039
here's this company who was into who was basically building
1285
01:09:41.079 --> 01:09:45.840
AI development tool, and they purchased a project that's been
1286
01:09:45.920 --> 01:09:51.000
developed by programmers by developers. So that goes to answer
1287
01:09:51.119 --> 01:09:54.640
your question about do developers still have a role in
1288
01:09:54.720 --> 01:09:55.560
our world.
1289
01:09:55.680 --> 01:09:58.279
Exactly, Like the answer to that question is, like, we're
1290
01:09:58.279 --> 01:10:00.000
going to need people who are going to build these systems.
1291
01:10:00.119 --> 01:10:02.520
So even if you're writing AI code, we're going to
1292
01:10:02.560 --> 01:10:05.359
need people who understand what that front end code should
1293
01:10:05.359 --> 01:10:07.279
look like. Like I was saying earlier, like if you
1294
01:10:07.399 --> 01:10:10.840
use clod to generate activity code like React nineteen activity code,
1295
01:10:10.920 --> 01:10:12.680
it is all garbage, So you need to know what
1296
01:10:12.760 --> 01:10:13.359
is the right thing.
1297
01:10:13.600 --> 01:10:15.239
Knowing your AI, like knowing.
1298
01:10:15.000 --> 01:10:17.800
Your front and fundamentals is very important even if you're
1299
01:10:17.880 --> 01:10:21.239
using AI to write code and build complete apps in
1300
01:10:21.279 --> 01:10:21.800
the future.
1301
01:10:22.279 --> 01:10:23.920
I totally agree, right, So.
1302
01:10:23.960 --> 01:10:27.399
Yeah, shamelessly plugging my YouTube channel, go check it out, like, subscribe, comment,
1303
01:10:27.439 --> 01:10:30.479
and hit THATLL icon so you get notified at the
1304
01:10:30.560 --> 01:10:34.920
new videos. I also want to shout out code Rabbit,
1305
01:10:35.039 --> 01:10:38.199
which is a AI code reviewer against. Speaking of AI
1306
01:10:38.239 --> 01:10:41.319
code tools, one of the tools that actually helps and
1307
01:10:41.359 --> 01:10:44.119
I have been using a lot this year for reviewing
1308
01:10:44.119 --> 01:10:47.039
my code is code Rabbit. Like I said earlier in
1309
01:10:47.079 --> 01:10:49.399
this episode, I have quit my nine to five job,
1310
01:10:49.439 --> 01:10:52.039
which means that all of the code I write I
1311
01:10:52.079 --> 01:10:54.960
am the only owner, but it gets read by so
1312
01:10:55.000 --> 01:10:58.119
many people, so I want to make sure that my code.
1313
01:10:57.920 --> 01:11:01.560
Is well written, it is performing.
1314
01:11:01.680 --> 01:11:05.560
But also it catches things like it's reviewed properly, and
1315
01:11:05.720 --> 01:11:10.520
I'm also catching things like breaking as breaking responses and
1316
01:11:10.840 --> 01:11:14.079
error cases. So code rapid has been really helpful in
1317
01:11:14.279 --> 01:11:17.720
helping me see those errors, especially things that I may miss,
1318
01:11:17.960 --> 01:11:20.119
things that I'm like writing super fast and we forget.
1319
01:11:20.479 --> 01:11:23.800
So great code review tool, completely free for open source tools.
1320
01:11:24.319 --> 01:11:24.880
Check that out.
1321
01:11:24.920 --> 01:11:28.920
It's called code rap I totally agree. We actually use
1322
01:11:29.079 --> 01:11:34.079
code rabbit at size Sense, so every every pr undergoes
1323
01:11:34.319 --> 01:11:39.760
review by code rabbit in addition to manual review, and
1324
01:11:40.279 --> 01:11:45.119
I have to say that it's it's really a great tool.
1325
01:11:45.479 --> 01:11:52.279
Very often I find and fix most issues before they
1326
01:11:52.359 --> 01:11:56.119
even get to be to the point where you know
1327
01:11:56.199 --> 01:11:59.920
the manual review is required. So we still require man
1328
01:12:00.079 --> 01:12:03.119
your review, but by the time we get there, code
1329
01:12:03.159 --> 01:12:07.359
rabbit is probably I probably fixed like five or six
1330
01:12:07.399 --> 01:12:09.760
different things that code rabbit has found for me. Two
1331
01:12:09.880 --> 01:12:12.880
things that I really liked about code rabbit is first
1332
01:12:12.920 --> 01:12:16.000
of all, the way they kind of use emojis to
1333
01:12:16.359 --> 01:12:19.079
indicate what they're doing, like the eyes emojis like that
1334
01:12:19.159 --> 01:12:22.399
I'm looking at it or stuff like that, or like
1335
01:12:22.880 --> 01:12:26.960
the thumbs up emoji. And basically they make very effective
1336
01:12:27.079 --> 01:12:30.760
use of emojis to indicate what's going on and even
1337
01:12:31.039 --> 01:12:37.079
allow you to respond to their comments. Like say, if
1338
01:12:37.119 --> 01:12:40.479
you want to basically say yes, I'm handling I've handled something,
1339
01:12:40.880 --> 01:12:44.279
or i'm handling something, or i'm intentionally or I hear you,
1340
01:12:44.319 --> 01:12:47.880
but I've decided to ignore this recommendation, you can kind
1341
01:12:47.880 --> 01:12:52.439
of indicate those things your intentionality using emojis, which is
1342
01:12:52.479 --> 01:12:55.640
really cool. So that's one thing I really liked about it.
1343
01:12:55.680 --> 01:12:57.840
And another thing that I really liked about it is
1344
01:12:57.880 --> 01:13:01.319
that it also kind of diagrams you code, so even
1345
01:13:01.359 --> 01:13:05.399
if you're getting a person to review your code in
1346
01:13:05.439 --> 01:13:08.520
additional to code Rabbit, it can make it very much
1347
01:13:08.560 --> 01:13:11.479
easier for them to actually understand what they're looking at,
1348
01:13:11.600 --> 01:13:14.960
what the changes are then stuff like that, Like you said,
1349
01:13:15.159 --> 01:13:17.000
I really like and appreciate that tool.
1350
01:13:17.479 --> 01:13:20.600
Yeah, And on top of that, it also adds to
1351
01:13:20.720 --> 01:13:23.560
the summary of the pr itself. So let's say if
1352
01:13:23.560 --> 01:13:26.560
you're somebody like me who hates writing PR descriptions. It
1353
01:13:26.600 --> 01:13:28.960
can actually improve it for you by looking at what
1354
01:13:29.039 --> 01:13:31.479
code you're adding, so it'll add an I summary of
1355
01:13:31.520 --> 01:13:33.760
this was what was added these other features.
1356
01:13:34.000 --> 01:13:35.439
This is a code chain, so it's.
1357
01:13:35.319 --> 01:13:39.279
Really helpful in making a like the code view process
1358
01:13:39.359 --> 01:13:39.880
much smoother.
1359
01:13:40.119 --> 01:13:45.479
Totally agree with you, So you kind of gave it already,
1360
01:13:45.520 --> 01:13:47.720
but let's give it yet again. If people want to
1361
01:13:47.720 --> 01:13:49.880
get in touch with you, contact you, maybe send you
1362
01:13:49.920 --> 01:13:52.439
a questions so that you can create videos about them.
1363
01:13:52.840 --> 01:13:54.680
What's the best way to get in touch with you?
1364
01:13:55.199 --> 01:13:56.880
Yeah, so the best way to get in touch with
1365
01:13:56.880 --> 01:13:59.960
me is to actually comment on my video. I obsessed
1366
01:14:00.359 --> 01:14:04.239
watch my videos comments and read all of them. Oh no,
1367
01:14:06.159 --> 01:14:07.880
I know people have told me not too, but I
1368
01:14:07.920 --> 01:14:10.680
can't stop. That will be a new Year's resolution. But yeah,
1369
01:14:10.720 --> 01:14:12.680
you can actually leave a comment on any of my
1370
01:14:12.760 --> 01:14:14.479
video to let me know what video you want to
1371
01:14:14.520 --> 01:14:15.039
see next.
1372
01:14:15.359 --> 01:14:17.800
But you can also send me a DM on Twitter.
1373
01:14:17.880 --> 01:14:21.159
I'm at schutikapour zero eight my first name, last name,
1374
01:14:21.199 --> 01:14:24.079
and zero eight, which is my birthday. I'm obsessed with
1375
01:14:24.079 --> 01:14:27.520
my birthday just coming up in five days.
1376
01:14:27.880 --> 01:14:31.840
Oh you're you were born in December. I was yes,
1377
01:14:32.039 --> 01:14:34.560
so good for you mine as well. So I was
1378
01:14:34.560 --> 01:14:38.600
talking about the fact that I have these two conferences
1379
01:14:38.640 --> 01:14:42.079
on the fifteenth and the sixteenth. Actually, my wife's birthday
1380
01:14:42.119 --> 01:14:44.359
is on the fourteenth, and my own birthday is on
1381
01:14:44.399 --> 01:14:48.199
the seventeenth, so we have my wife's birthday, then one
1382
01:14:48.199 --> 01:14:50.960
conference and another conference, and then my birthday. So it
1383
01:14:51.359 --> 01:14:52.199
an interesting week.
1384
01:14:52.680 --> 01:14:54.880
It's like sandwich between conferences.
1385
01:14:54.920 --> 01:14:58.520
They can celebrate and then go enjoy the conferences and
1386
01:14:58.560 --> 01:15:01.920
then celebrate your amazing talks exactly.
1387
01:15:02.079 --> 01:15:04.720
So first, so happy birthday to you, thank you, and
1388
01:15:04.840 --> 01:15:08.479
to you, thank you very much. And I guess that
1389
01:15:08.640 --> 01:15:11.600
with that will will wrap up right.
1390
01:15:12.000 --> 01:15:14.439
Nothing more to add, nothing more to add.
1391
01:15:14.560 --> 01:15:16.680
So thank you very much to all our listeners. It's
1392
01:15:16.680 --> 01:15:19.199
been a great episode. Thank you Shouty for coming on
1393
01:15:19.239 --> 01:15:21.760
our show to talk about REACT nineteen or actually, more
1394
01:15:21.800 --> 01:15:25.039
accurately nineteen point two, even though we also talked about
1395
01:15:25.039 --> 01:15:28.239
REACT nineteen in general. And to all our listeners, thank
1396
01:15:28.279 --> 01:15:30.720
you very much for joining us and see you again
1397
01:15:30.760 --> 01:15:31.760
next time. Bye.
1398
01:15:32.159 --> 01:15:33.119
Thanks for having me