WEBVTT 1 00:00:05.480 --> 00:00:10.279 Hello everybody, and welcome to another exciting episode of JavaScript Jabber. 2 00:00:10.560 --> 00:00:12.720 Today in our show, we've got Shooting Kapoor. 3 00:00:13.240 --> 00:00:15.679 Hi, Shooty, Hey Dan, how are you. 4 00:00:16.000 --> 00:00:18.760 I'm kind of on the tail end of a head cold. 5 00:00:18.839 --> 00:00:23.359 Hopefully I won't sound too stuffy today, but that's I'm 6 00:00:23.359 --> 00:00:26.120 back on at work, so that means I guess that 7 00:00:26.120 --> 00:00:31.600 I'm feeling better. The weather here is actually pretty nice. 8 00:00:31.640 --> 00:00:34.439 I'm in Tel Aviv, Israel, and it's not really cold 9 00:00:34.479 --> 00:00:36.479 and it's pretty sunny, but it's you know, it's a 10 00:00:36.600 --> 00:00:41.399 season for the snuffles. So here's what it is. So, 11 00:00:42.119 --> 00:00:43.799 and where are you coming from today? 12 00:00:44.320 --> 00:00:46.920 So I'm in Seattle and the weather here is cold, 13 00:00:47.439 --> 00:00:51.840 really cold, and rainy and rainy and dark and gloomy. 14 00:00:52.359 --> 00:00:55.399 But I've got some lights up, actually not in the background. 15 00:00:55.560 --> 00:00:56.560 I've got some lights. 16 00:00:56.399 --> 00:00:58.840 Up at my house, so it makes me feel better. 17 00:00:59.000 --> 00:01:01.759 Good for you, Good for you, and Shooty, you are 18 00:01:01.799 --> 00:01:04.120 an independent content creator? Correct? 19 00:01:04.480 --> 00:01:07.799 Yeah? So earlier this year I used to work. 20 00:01:07.640 --> 00:01:11.040 As slack and I quit my job in April to 21 00:01:11.200 --> 00:01:14.920 start developer education full time. I've actually been doing this 22 00:01:15.000 --> 00:01:17.879 part time for a long time. I made courses on 23 00:01:17.920 --> 00:01:20.840 O'Reilly as well, and I really like that, So I 24 00:01:21.079 --> 00:01:24.159 was like, why do we need stability, Let's just drop 25 00:01:24.200 --> 00:01:27.200 our job and go full time, make no money, and 26 00:01:27.239 --> 00:01:28.680 do all the education stuff. 27 00:01:30.239 --> 00:01:33.760 So you're now an independent content creator talking about what? 28 00:01:34.560 --> 00:01:37.439 So I talked about React and AI and web development 29 00:01:37.599 --> 00:01:39.000 and JavaScript and. 30 00:01:39.040 --> 00:01:42.280 Handstack and next Days and all of the good stuff. 31 00:01:42.319 --> 00:01:45.719 So everything related to web development specializing in reacting cool. 32 00:01:45.760 --> 00:01:47.719 And that's what we're going to be talking about today. 33 00:01:47.840 --> 00:01:50.480 We're going to be talking about what's new and exciting 34 00:01:50.640 --> 00:01:54.079 in React nineteen. Correct, yes, And are there things that 35 00:01:54.120 --> 00:01:56.040 are new and exciting in React nineteen. 36 00:01:56.560 --> 00:02:00.239 There's actually three things in React nineteen update that I'm 37 00:02:00.280 --> 00:02:03.079 super excited about, which I would love to get into 38 00:02:03.159 --> 00:02:07.680 in a bit. But I think this updates specifically. Although 39 00:02:07.719 --> 00:02:10.240 this is like a minor update, it's nineteen point two, 40 00:02:10.680 --> 00:02:13.240 I think it has as a ton of really cool features, 41 00:02:13.319 --> 00:02:16.479 which is really exciting for me because it's going to 42 00:02:16.479 --> 00:02:19.280 help me write less code and for other people as 43 00:02:19.280 --> 00:02:22.280 well who are building client side apps. So I'm pretty 44 00:02:22.280 --> 00:02:25.479 excited about it. This really is actually focuses on client 45 00:02:25.520 --> 00:02:28.599 side developers a lot, not client side developers app developers 46 00:02:28.639 --> 00:02:30.759 a lot, as opposed to like frameworks there are some 47 00:02:30.840 --> 00:02:35.280 framework features, but the main kind of audience is app developers, 48 00:02:35.520 --> 00:02:38.120 which is perfect for me because I'm an app developer. 49 00:02:38.199 --> 00:02:42.039 When you're saying app development, are you talking about web 50 00:02:42.080 --> 00:02:45.479 apps or you're talking about native apps like React native 51 00:02:45.680 --> 00:02:46.120 or both. 52 00:02:47.039 --> 00:02:49.759 So I'm not talking about React native. There are updates 53 00:02:49.759 --> 00:02:53.960 and reactnative as well. I just completely ignore Reactnative because 54 00:02:54.000 --> 00:02:56.800 I'm a full web developer, So I'm talking about app 55 00:02:56.840 --> 00:03:00.439 development in web. But there are updates and reacnative as well. 56 00:03:00.599 --> 00:03:04.360 Interesting, So do we want to talk about both React 57 00:03:04.439 --> 00:03:07.120 nineteen in general and nineteen point two or do we 58 00:03:07.159 --> 00:03:09.000 want to focus just one one or the other. 59 00:03:09.879 --> 00:03:12.680 Let's focus on point two because there's a lot to 60 00:03:12.719 --> 00:03:15.039 talk about, and then if we have time, we can 61 00:03:15.039 --> 00:03:17.840 talk about nineteen. There's a ton of features that we 62 00:03:17.879 --> 00:03:21.159 can get into with nineteen point two, and this is 63 00:03:21.199 --> 00:03:23.280 the third update this year, so there's a lot to 64 00:03:23.280 --> 00:03:23.840 talk about. 65 00:03:23.840 --> 00:03:27.199 Cool. So, first of all, if there's so much stuff 66 00:03:27.240 --> 00:03:31.240 in it, and if I recall correctly, React nineteen itself 67 00:03:31.360 --> 00:03:34.680 was released something like almost two years ago, why is 68 00:03:34.719 --> 00:03:36.919 it nineteen point two and not twenty? 69 00:03:37.680 --> 00:03:40.240 I think the features are kind of incremental to what 70 00:03:40.439 --> 00:03:43.919 nineteen has shared, which is like concurrent rendering, but like 71 00:03:44.000 --> 00:03:47.159 some updates on top of it, it's not a complete 72 00:03:47.240 --> 00:03:50.560 paradigm shift. So eighteen was a big update because concurrent 73 00:03:50.680 --> 00:03:54.639 rendering and automatic patching was introduced. Nineteen introduced some new 74 00:03:54.680 --> 00:03:58.159 features like actions, and then what we have today kind 75 00:03:58.159 --> 00:04:00.879 of builds on top of it. It's it's a lot 76 00:04:00.879 --> 00:04:05.280 of focus on async react, a lot of focus on suspense. 77 00:04:05.800 --> 00:04:08.159 So that's why it's like a small update. It's like 78 00:04:08.199 --> 00:04:10.639 a minor update, not like a whole paradigm. 79 00:04:10.280 --> 00:04:13.759 Chef, and I assume that it contains no nothing that's 80 00:04:13.919 --> 00:04:18.920 kind of breaking changes or significant API changes or stuff 81 00:04:18.959 --> 00:04:19.279 like that. 82 00:04:19.639 --> 00:04:23.560 Correct, Yeah, probably the reason, Yeah, exactly. 83 00:04:23.800 --> 00:04:26.920 Okay, then so what isn't you and exciting about nineteen 84 00:04:27.040 --> 00:04:27.680 point two. 85 00:04:27.920 --> 00:04:30.560 So there's a bunch of features. Let's talk about like 86 00:04:30.600 --> 00:04:32.759 the feature set I introduced. So first of all, there 87 00:04:32.839 --> 00:04:35.639 is an activity component. I'll list ot all the features 88 00:04:35.639 --> 00:04:37.680 and then we can kind of dive into them one 89 00:04:37.720 --> 00:04:41.199 by one. So we've got the activity component, We've got 90 00:04:41.720 --> 00:04:45.560 a view transition component. We've got performance tracks that come 91 00:04:45.639 --> 00:04:48.800 part of Chrome depv tools, which is awesome because we've 92 00:04:48.839 --> 00:04:51.959 been debugging with profiler and performance tracks is sort of 93 00:04:52.040 --> 00:04:55.800 like a magnified version of what your component is doing, 94 00:04:55.839 --> 00:04:58.360 so it helps in debugging. We've got use effect event 95 00:04:58.480 --> 00:05:01.639 a new hook, and we have React compiler is now stable, 96 00:05:01.800 --> 00:05:05.240 and I know I'm missing one, but I can't remember 97 00:05:05.279 --> 00:05:05.639 with one. 98 00:05:06.240 --> 00:05:09.959 Well, you'll probably it will probably pop into your head 99 00:05:10.040 --> 00:05:12.360 as we talk about the other stuff. By the way, 100 00:05:12.920 --> 00:05:16.439 as you mentioned react compiler, I do want to mention 101 00:05:16.600 --> 00:05:20.959 to our listeners that we had Joe Savona and Satya 102 00:05:21.160 --> 00:05:24.879 from the Meta react core team, which is no longer 103 00:05:24.920 --> 00:05:28.680 part of Meta, and we had them on the show 104 00:05:28.720 --> 00:05:32.600 talking specifically about react compiler. So if our listeners are 105 00:05:32.639 --> 00:05:37.720 interested in what react compiler is and the details of 106 00:05:37.879 --> 00:05:40.240 what it does and what it doesn't do, I highly 107 00:05:40.279 --> 00:05:44.639 recommend listening to that episode. I'll find them. I'll include 108 00:05:44.639 --> 00:05:47.319 the link in the show notes, but you can pretty 109 00:05:47.360 --> 00:05:50.920 easily find it if you search through the podcast catalog. 110 00:05:51.160 --> 00:05:53.639 But if you you know. Nonetheless, if you want to 111 00:05:53.720 --> 00:05:57.439 remind our listeners what react compiler is and what is 112 00:05:57.480 --> 00:05:59.959 it all about and why we actually wanted to. 113 00:06:00.079 --> 00:06:03.680 Need it, Yeah, so actually react compiler is extremely exciting 114 00:06:03.800 --> 00:06:07.600 people remember, or like the way to memorize apps currently, 115 00:06:07.959 --> 00:06:10.639 or like the way to kind of improve the performance 116 00:06:10.680 --> 00:06:13.240 of your app, the first thing you would think about is, well, 117 00:06:13.319 --> 00:06:15.800 let me add use memo, use callback, right, That's like 118 00:06:15.839 --> 00:06:17.839 the first hook that comes to mind whenever you think 119 00:06:17.879 --> 00:06:21.360 about improving the performance of your app. Sometimes you blindly 120 00:06:21.399 --> 00:06:23.560 app use memo and use callbacks to all of our 121 00:06:23.600 --> 00:06:27.480 components and all of our functions just because they are 122 00:06:27.639 --> 00:06:30.639 kind of hard to figure out where to add use 123 00:06:30.680 --> 00:06:32.639 memo and use callbyck, you have to use the profile 124 00:06:32.759 --> 00:06:35.800 to figure out which components are slow, which functions are slow, 125 00:06:35.879 --> 00:06:39.079 where it's the expensive calculations, and then memois that and 126 00:06:39.199 --> 00:06:41.680 even then it is a hard thing to do. Now 127 00:06:41.720 --> 00:06:44.720 with the React compiler, memoization is given to you out 128 00:06:44.759 --> 00:06:46.639 of the box, so you don't need to add use 129 00:06:46.720 --> 00:06:49.680 memo and use callback at all. In fact, at React 130 00:06:49.680 --> 00:06:51.959 cons I was leading the panel with the core team 131 00:06:52.000 --> 00:06:53.759 and this is the question that I asked them, that 132 00:06:54.079 --> 00:06:56.800 can you really remove use memo and use callbacks from 133 00:06:56.839 --> 00:06:59.399 your code right now? And the answer is yes, it 134 00:06:59.439 --> 00:07:01.680 is safe to I will use memo and use callback. 135 00:07:01.920 --> 00:07:06.399 So reactin compiler helps to enable auto memorization, which means 136 00:07:06.439 --> 00:07:08.800 that your code is auto memoiz. You don't need to 137 00:07:08.800 --> 00:07:11.560 add UMO use callback to make sure that it is 138 00:07:11.639 --> 00:07:12.800 optimizer performance. 139 00:07:13.639 --> 00:07:18.439 I would even argue that it's beyond safe. It's even 140 00:07:18.800 --> 00:07:26.279 preferable because if I recall correctly, when React compiler sees 141 00:07:26.639 --> 00:07:30.439 let's say, use memo in a component, it basically bails 142 00:07:30.519 --> 00:07:36.000 out out of optimizing that component. So theoretically, at least 143 00:07:36.199 --> 00:07:40.160 React compiler, if it's you know, working correctly and does 144 00:07:40.199 --> 00:07:44.399 what it's supposed to do, can actually optimize your component 145 00:07:44.600 --> 00:07:51.079 beyond the specific manual optimizations that you implemented using memo 146 00:07:51.199 --> 00:07:56.480 or use memo, So in effect, it can do extra ammorization. 147 00:07:56.759 --> 00:08:00.439 And if you have your own explicit use memo, you're 148 00:08:00.519 --> 00:08:02.959 kind of forcing it to bail out because it says, hey, 149 00:08:03.040 --> 00:08:05.079 you know what you want to do. I'm not going 150 00:08:05.120 --> 00:08:08.000 to get in your way, and then you might actually 151 00:08:08.040 --> 00:08:10.079 lose out on some optimizations. 152 00:08:10.319 --> 00:08:12.759 Yeah, and the way they both do memorization is a 153 00:08:12.800 --> 00:08:15.720 little bit different. Reacompiler memoris is a different way than 154 00:08:16.079 --> 00:08:21.399 use memos. So yeah, like when you do manual memorization, 155 00:08:21.560 --> 00:08:24.040 reac compilers like you seem to know what you're doing, 156 00:08:24.079 --> 00:08:25.959 so you go ahead and do your thing. 157 00:08:26.160 --> 00:08:29.759 Yeah, just to remind our listeners in case they forgot 158 00:08:30.000 --> 00:08:34.960 the benefits of memorization is like threefold, as I recall correctly. 159 00:08:35.000 --> 00:08:41.519 First of all, it avoids unnecessary computations. Second it avoids 160 00:08:41.720 --> 00:08:49.759 unnecessary renders, and third it retains referential consistency, which avoids 161 00:08:49.799 --> 00:08:53.279 rerenders down the line. It basically, if you think about 162 00:08:53.759 --> 00:08:58.279 the dependency arrays in use effect and stuff like that, 163 00:08:59.159 --> 00:09:05.679 they are referential identity, not value identity. And if you 164 00:09:05.799 --> 00:09:10.879 get referential identity, you avoid even more rerenders than you 165 00:09:11.639 --> 00:09:15.720 and stuff like that. Then you would otherwise perform. And 166 00:09:15.759 --> 00:09:19.440 I think even the rendering engine itself, when it sees 167 00:09:19.480 --> 00:09:23.200 the referential identity, it knows to cut out and not 168 00:09:23.679 --> 00:09:27.279 totally not traverse certain parts of the v doom tree 169 00:09:27.720 --> 00:09:32.000 because it can immediately identify that nothing has changed. So 170 00:09:32.000 --> 00:09:36.159 you're effectively making the entire system just basically faster and 171 00:09:36.200 --> 00:09:36.840 more efficient. 172 00:09:37.399 --> 00:09:39.879 Yeah, And the given example of what that means is, 173 00:09:39.960 --> 00:09:42.519 let's say you have a function where let's just say 174 00:09:42.519 --> 00:09:44.879 you're calling console log or fetching an ampair or whatever, 175 00:09:45.000 --> 00:09:47.720 just simple function, and that function has a dependency of 176 00:09:47.840 --> 00:09:51.240 use effect. So what referential identity means is that when 177 00:09:51.279 --> 00:09:54.639 you haven't added any callback or things, every time you 178 00:09:54.759 --> 00:09:58.200 render that is a new function. So when reaclub said it, 179 00:09:58.200 --> 00:10:00.799 it's like, oh, dependency of use if I change, so 180 00:10:00.840 --> 00:10:02.919 I need to run this effect again. So this way 181 00:10:02.919 --> 00:10:05.639 you're running effect multiple times. If you have a function 182 00:10:05.840 --> 00:10:09.039 as a dependency. But if you add a used callback 183 00:10:09.080 --> 00:10:12.320 to that function, now React as memois that and now 184 00:10:12.360 --> 00:10:15.159 it knows that this is the same reference as previous time, 185 00:10:15.399 --> 00:10:18.440 so it won't rerender if nothing changed. So that reduces 186 00:10:18.480 --> 00:10:21.480 the amount of times you you ruan the use effects 187 00:10:21.600 --> 00:10:22.080 and again. 188 00:10:22.240 --> 00:10:26.320 With React compiler, you basically just remove all your explicit 189 00:10:26.440 --> 00:10:30.519 uses of memo, use memo, and use callback and just 190 00:10:30.759 --> 00:10:34.320 let React compiler do its magic. By the way, another 191 00:10:34.519 --> 00:10:38.200 advantage of React compiler from my perspective, potentially even a 192 00:10:38.480 --> 00:10:42.799 greater advantage from my perspective, is that it's effectively a 193 00:10:42.840 --> 00:10:48.360 React linter. It knows the rules of React with the 194 00:10:49.000 --> 00:10:53.360 best practices of React, and will actually warn you if 195 00:10:53.360 --> 00:10:57.960 you're violating any of these React best practices. Correct. 196 00:10:58.720 --> 00:11:00.960 I don't know if the compiler that I know there's 197 00:11:01.480 --> 00:11:04.159 the plug in, yeslamp plugin actually wants you when you're 198 00:11:04.159 --> 00:11:07.720 breaking React rules and in fact when the compiler, so 199 00:11:07.759 --> 00:11:10.200 one way to see that you're breaking React rules is 200 00:11:10.360 --> 00:11:12.559 when you look at the compile code, if you see 201 00:11:12.559 --> 00:11:15.559 that your code is intact and hasn't been memoirs, it's 202 00:11:15.600 --> 00:11:18.879 because the compiler bailed because you haven't followed rules of React. 203 00:11:19.080 --> 00:11:21.480 So that way it's easy to kind of see where 204 00:11:21.480 --> 00:11:22.799 you're breaking rules of React. 205 00:11:23.039 --> 00:11:25.519 So yeah, yeah, it does know when you're. 206 00:11:25.399 --> 00:11:27.519 Breaking rules of React, and it just like bails out 207 00:11:27.519 --> 00:11:28.200 for those things. 208 00:11:28.240 --> 00:11:32.799 Cool. And you said that in React version nineteen point two, 209 00:11:33.080 --> 00:11:36.559 compiler is now officially a stable part of the release. 210 00:11:36.960 --> 00:11:39.639 Yeah, yeah, so the babble plug in, so React compiler 211 00:11:39.679 --> 00:11:41.240 is still available as a babble plug in. 212 00:11:41.559 --> 00:11:42.440 Now it is stable. 213 00:11:42.960 --> 00:11:46.039 It was in our C stage for a long time 214 00:11:46.240 --> 00:11:49.399 and the community was wondering when it's going to be stable. 215 00:11:49.480 --> 00:11:52.279 So if React content was announced that it is stable. 216 00:11:52.600 --> 00:11:54.679 And what's cool is that it not only works for 217 00:11:54.720 --> 00:11:57.559 React nineteen, but it also works for eighteen and seventeen, 218 00:11:57.840 --> 00:12:01.000 so which is really cool because now you can you 219 00:12:01.080 --> 00:12:03.519 have backwards compatibility, so you can go ahead and remove 220 00:12:03.720 --> 00:12:04.200 use memos. 221 00:12:04.279 --> 00:12:06.840 Oh that's interesting. I didn't know that. So if you've 222 00:12:06.879 --> 00:12:10.399 got a project that's built on top of React eighteen 223 00:12:10.480 --> 00:12:13.639 and you don't feel like an upgrade you can. Basically 224 00:12:13.679 --> 00:12:16.879 what you're saying is just drop in React compiler and 225 00:12:16.919 --> 00:12:17.639 hope for the best. 226 00:12:17.919 --> 00:12:18.200 Yeah. 227 00:12:18.360 --> 00:12:20.159 Yeah, I mean you can install a babble plug in 228 00:12:20.279 --> 00:12:25.440 and your compiler will start memoizing. I've actually added reac 229 00:12:25.480 --> 00:12:29.120 compiler to an app where I didn't change anything else. 230 00:12:29.159 --> 00:12:31.919 I just added reac compiler, just added the plug in, 231 00:12:32.480 --> 00:12:36.799 and I noticed that my renders, like rerenders were reduced 232 00:12:36.799 --> 00:12:39.279 from thirty two to just seven, which is crazy. 233 00:12:39.320 --> 00:12:44.519 Wow. Yes, definitely it is. That's pretty significant. Yeah, you know, 234 00:12:45.120 --> 00:12:47.759 rerenders are kind of the bane of our existence, is 235 00:12:47.799 --> 00:12:48.759 React developers. 236 00:12:49.039 --> 00:12:52.519 Yeah, and even for the ones, so even for the 237 00:12:52.519 --> 00:12:55.720 ones that were being re rendered, the amount of time 238 00:12:55.759 --> 00:12:58.039 it took to render that was reduced as well, so 239 00:12:58.120 --> 00:13:00.320 the height of the graph like in React with when 240 00:13:00.360 --> 00:13:02.919 you look at the graph of the components, the height 241 00:13:02.960 --> 00:13:05.840 of the bar itself was lower, so it took lesser 242 00:13:05.879 --> 00:13:08.919 time to vendor by just adding React compiler, which is 243 00:13:08.960 --> 00:13:09.960 crazy interesting. 244 00:13:10.039 --> 00:13:14.039 We have a React eighteen projects where I work, and 245 00:13:14.200 --> 00:13:17.440 upgrading is not trivial because it's kind of it kind 246 00:13:17.480 --> 00:13:22.919 of shares the React library instance between multiple micro front ends, 247 00:13:23.559 --> 00:13:25.559 so we kind of need to upgrade all of them. 248 00:13:25.559 --> 00:13:27.720 In order to upgrade one of them. That's the way 249 00:13:27.759 --> 00:13:30.720 it's currently implemented for us. And being able to just 250 00:13:30.960 --> 00:13:33.600 you know, drop in maybe React compiler to see some 251 00:13:33.639 --> 00:13:37.720 performance improvements should be pretty interesting something I should definitely 252 00:13:37.799 --> 00:13:38.360 look into. 253 00:13:38.799 --> 00:13:42.080 Yeah, and the newest plug in So with React nineteen 254 00:13:42.120 --> 00:13:45.159 point two, the es plugin also got an upgrade, so 255 00:13:45.200 --> 00:13:47.480 it's v six now and it also has. 256 00:13:47.559 --> 00:13:49.840 React compiler rules built in. 257 00:13:50.159 --> 00:13:52.080 So I haven't actually used the plug in, but my 258 00:13:52.159 --> 00:13:54.200 guess is that it also warned you when you're breaking 259 00:13:54.279 --> 00:13:55.080 rules of reacty. 260 00:13:55.120 --> 00:13:58.679 That's really that's really useful. So okay, so one great 261 00:13:58.720 --> 00:14:03.080 thing about React versus nineteen point two is the stable 262 00:14:03.200 --> 00:14:05.240 React compiler. What else? 263 00:14:06.080 --> 00:14:09.320 The other thing that I'm excited about is the activity component. 264 00:14:09.519 --> 00:14:12.000 So this component is really cool because one of the 265 00:14:12.000 --> 00:14:14.600 biggest things that bes app developers have been doing is 266 00:14:14.639 --> 00:14:16.879 storing the state of where we are in the app, 267 00:14:17.440 --> 00:14:20.600 especially a component, and then resuming from it. So an 268 00:14:20.639 --> 00:14:22.879 example would be, let's say you type something in search 269 00:14:23.320 --> 00:14:25.480 and then the user clicks away from search and then 270 00:14:25.519 --> 00:14:26.600 they open it back again. 271 00:14:26.799 --> 00:14:29.000 You kind of want to show them what they had type, right, 272 00:14:29.279 --> 00:14:29.519 or you. 273 00:14:29.440 --> 00:14:31.840 Want to kind of keep the results that they were 274 00:14:31.879 --> 00:14:35.360 looking for now. Currently, the way to do that or 275 00:14:35.399 --> 00:14:38.519 pre nineteen point two, is by storing that state and 276 00:14:38.559 --> 00:14:40.879 then when the user pops up again and you check 277 00:14:40.919 --> 00:14:44.000 if the component is open, and you reload from that state. 278 00:14:44.519 --> 00:14:47.720 With nineteen point two, this activity component actually gives it 279 00:14:47.759 --> 00:14:49.399 to you out of the box. So all you got 280 00:14:49.480 --> 00:14:52.240 to do is wrap your component in activity and it 281 00:14:52.360 --> 00:14:55.279 understands to store the state, and it's actually going to 282 00:14:55.320 --> 00:14:58.279 give you that state that you've written in the text 283 00:14:58.279 --> 00:15:00.919 input for free, so when you open and close and 284 00:15:00.919 --> 00:15:03.679 then open again, you'll see what you've stored so far. 285 00:15:04.320 --> 00:15:08.279 So I built an example component with Netflix where you. 286 00:15:08.240 --> 00:15:10.919 Know how in Netflix when you are on a or 287 00:15:10.919 --> 00:15:14.399 even YouTube actually, but when you are on a when 288 00:15:14.399 --> 00:15:17.120 you're watching, when you're on the homepage and you're watching 289 00:15:17.159 --> 00:15:19.679 a trailer, like when you have it on an item, 290 00:15:19.879 --> 00:15:21.919 the trailer starts playing and then you move away, and 291 00:15:21.919 --> 00:15:24.360 then you come back and the trailer restarts. 292 00:15:24.840 --> 00:15:27.759 I hate that. I wanted to continue from where I 293 00:15:27.840 --> 00:15:28.840 was because. 294 00:15:28.480 --> 00:15:31.320 Actually that's what YouTube does for me, and sometimes I 295 00:15:31.440 --> 00:15:35.399 really hate it, yeah, because it starts playing muted when 296 00:15:35.399 --> 00:15:38.080 you hover on top, and then when you click it, 297 00:15:38.080 --> 00:15:41.559 it starts playing with full audio, but you're already somewhere 298 00:15:41.600 --> 00:15:43.720 inside the video, so now if you want to hear 299 00:15:43.759 --> 00:15:45.879 it from the beginning, you kind of have to rewind 300 00:15:45.919 --> 00:15:48.519 each and every time. It can be annoying, exactly. 301 00:15:49.120 --> 00:15:53.000 I hate that, and in Netflix specifically because like it 302 00:15:53.120 --> 00:15:55.039 starts like I want to see the trailer, yes, but 303 00:15:55.120 --> 00:15:57.399 it starts off and it's loud and everything, and then 304 00:15:57.879 --> 00:16:00.279 I move away and then it restarts the trailer, so 305 00:16:00.320 --> 00:16:01.799 I kind of want to continue from where. 306 00:16:01.679 --> 00:16:02.120 It was working. 307 00:16:02.200 --> 00:16:03.960 Yeah, that I definitely agree with. 308 00:16:04.440 --> 00:16:07.440 Yeah, And so I added So I made a Netflix 309 00:16:07.440 --> 00:16:10.360 clone and I added activity component to it, and that's 310 00:16:10.360 --> 00:16:10.799 all I did. 311 00:16:10.840 --> 00:16:13.399 So I had, like a trailer, it would AutoPlay. 312 00:16:12.879 --> 00:16:14.320 When you have it on it, and then when you 313 00:16:14.320 --> 00:16:16.080 move away, it would stop playing, and then when you 314 00:16:16.080 --> 00:16:19.080 come back, AutoPlay again. And all I did was add 315 00:16:19.120 --> 00:16:21.480 activity to that component. And then when I hovered away 316 00:16:21.519 --> 00:16:24.159 and came back, it remembered my state, so it knew 317 00:16:24.200 --> 00:16:26.559 how much video was played, which was cool. 318 00:16:26.279 --> 00:16:28.159 Because I had to do nothing else to fix that 319 00:16:28.279 --> 00:16:29.240 and it was so awesome. 320 00:16:29.399 --> 00:16:33.519 So just to understand correctly, so you kind of wrapped 321 00:16:33.559 --> 00:16:36.799 your component in an activity component, kind of like what 322 00:16:36.879 --> 00:16:40.440 you used to have with higher order components. My understanding, 323 00:16:40.559 --> 00:16:43.480 and what state does it store the props that are 324 00:16:43.559 --> 00:16:45.279 passed into that component. 325 00:16:46.080 --> 00:16:49.320 It remembers your dom state basically, So like when you're 326 00:16:49.320 --> 00:16:50.279 playing the video. 327 00:16:50.080 --> 00:16:52.399 It's the DOM state or the v doom state. 328 00:16:52.360 --> 00:16:53.159 The vdom state. 329 00:16:53.320 --> 00:16:57.559 So if you have a video, the amount that has 330 00:16:57.600 --> 00:17:00.000 been buffered, the amount that has been played. It remembers 331 00:17:00.200 --> 00:17:03.200 that same with like input, if it knows that you 332 00:17:03.279 --> 00:17:06.119 have put something in, it remembers that same with like 333 00:17:06.200 --> 00:17:08.799 scrolling a feed. So another thing that you could do 334 00:17:08.960 --> 00:17:11.400 is if you have a sidebar and you've got like 335 00:17:11.519 --> 00:17:14.839 ten different items and you've scrolled down to let's say 336 00:17:14.920 --> 00:17:17.400 the fifth or sixth item, and you're on the second 337 00:17:17.480 --> 00:17:20.599 or fourth page, it remembers where in them you are, 338 00:17:20.680 --> 00:17:22.960 like where in the scroll position you are, so it 339 00:17:23.000 --> 00:17:27.440 remembers that. So I think it's beyond props because these 340 00:17:27.440 --> 00:17:29.440 are not props that you would pass to your component. 341 00:17:29.680 --> 00:17:33.279 This is just coming from downstate, right, So it remembers. 342 00:17:32.799 --> 00:17:35.759 Your state, I understand. So it's kind of like freeze 343 00:17:36.400 --> 00:17:40.599 drawing the component state. I assume stuff like all the 344 00:17:40.720 --> 00:17:44.319 data that's kind of stored in hooks is somehow preserved 345 00:17:44.400 --> 00:17:50.039 between calls or between rerenders in a sense, I would 346 00:17:50.079 --> 00:17:52.920 definitely have to look at it. I understand what you're saying, 347 00:17:52.960 --> 00:17:57.799 but I'm still kind of wondering exactly what it does. 348 00:17:57.960 --> 00:18:01.480 So it's definitely something that I will look into following 349 00:18:01.519 --> 00:18:05.039 our conversation, because it's, like you said, it sounds like 350 00:18:05.079 --> 00:18:09.319 a very useful functionality that you're effectively getting for free, 351 00:18:09.359 --> 00:18:11.720 as it were. Yeah, that's really cool. 352 00:18:12.839 --> 00:18:13.640 Yeah. 353 00:18:13.680 --> 00:18:17.039 Are there any gotchas though with this kind of thing 354 00:18:17.319 --> 00:18:20.680 if you run into problems or issues like that can 355 00:18:20.920 --> 00:18:24.559 bite people if they use the activity, Yes, because otherwise 356 00:18:24.720 --> 00:18:28.519 you might just wrap your entire application in this huge 357 00:18:29.000 --> 00:18:32.720 activity at the like at the root of your v 358 00:18:32.799 --> 00:18:34.599 doom tree and hope for the best. 359 00:18:35.240 --> 00:18:35.599 Yeah. 360 00:18:35.839 --> 00:18:37.960 So, actually, one of the things that I noticed when 361 00:18:37.960 --> 00:18:42.559 I was implementing this video player component was that when 362 00:18:42.599 --> 00:18:46.920 I hovered away, sometimes a video keeps playing. It's not consistent, 363 00:18:47.079 --> 00:18:49.599 but sometimes the video will keep playing. So one of 364 00:18:49.599 --> 00:18:51.599 the things I had to add was, now, because the 365 00:18:51.640 --> 00:18:54.319 video is in the dom and React doesn't actually have 366 00:18:54.559 --> 00:18:56.440 control on the dorm, it only has control of a 367 00:18:56.559 --> 00:18:59.000 v doom, so sometimes a video keeps playing. So one 368 00:18:59.000 --> 00:19:01.319 of the things that I had to do was make 369 00:19:01.400 --> 00:19:05.240 sure when activity was make sure that in my component 370 00:19:05.319 --> 00:19:08.680 I add a new hook called use layout effect, which 371 00:19:08.720 --> 00:19:11.559 actually stops the video from playing when the component has 372 00:19:11.599 --> 00:19:16.000 been unmounted. So sometimes there might be weird edge cases 373 00:19:16.160 --> 00:19:18.079 when your component has been unmounted. 374 00:19:18.440 --> 00:19:20.240 In activity, Okay. 375 00:19:20.119 --> 00:19:22.880 I also assume it has a certain amount of overhead. 376 00:19:23.039 --> 00:19:25.279 Yeah, I mean I can assume that. 377 00:19:25.640 --> 00:19:28.200 I can understand that because your components are kind of 378 00:19:28.279 --> 00:19:32.640 in state, so it can definitely have some overhead, especially 379 00:19:32.720 --> 00:19:35.039 if you have like multiple different tabs and you've got 380 00:19:35.079 --> 00:19:37.480 like data loading in each of those tabs. I have 381 00:19:37.519 --> 00:19:40.680 an experimental with that myself to know what the implications are, 382 00:19:40.720 --> 00:19:42.759 but I can totally imagine that could be the case. 383 00:19:43.559 --> 00:19:47.200 Also, how many levels down does it go? I mean, 384 00:19:47.319 --> 00:19:50.759 like I said, what happens if I put an activity 385 00:19:52.319 --> 00:19:56.559 wrapper around the entire application? Is it like preserving the 386 00:19:56.720 --> 00:20:01.000 entire state of every subcomponent in the v doom tree. 387 00:20:01.519 --> 00:20:03.680 Wow, I haven't tried that. That would be fun to try. 388 00:20:03.799 --> 00:20:06.920 I imagine, like your app probably just breaks at that point. 389 00:20:07.519 --> 00:20:10.119 I don't think your state would be restored, but that 390 00:20:10.160 --> 00:20:12.559 would be fun to try. Like have like maybe like 391 00:20:12.599 --> 00:20:15.319 ten different inputs and just put activity on top of everything. 392 00:20:15.519 --> 00:20:18.720 Interesting anyway, like you said, it sounds really interesting and 393 00:20:18.759 --> 00:20:23.119 potentially very useful. So this is definitely something that I'll 394 00:20:23.400 --> 00:20:27.200 look at and play with after our conversation. Well, probably 395 00:20:27.240 --> 00:20:31.960 not immediately after because it's actually pretty late here in Israel, 396 00:20:32.119 --> 00:20:36.759 but you know, maybe tomorrow. But it does sound really 397 00:20:36.920 --> 00:20:41.759 really interesting and, like I said, potentially very useful. Anything 398 00:20:41.799 --> 00:20:44.720 else about activity before we move on to your next 399 00:20:44.759 --> 00:20:47.079 favorite thing about React nineteen point two. 400 00:20:47.799 --> 00:20:50.160 So I think activity is really cool because a lot 401 00:20:50.200 --> 00:20:53.480