Transcrição completa de What’s New in React 19.2: Compiler, Activity, and the Future of Async React - JSJ 700

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