00:00:04.811 --> 00:00:07.231 Did anyone read that article that Caroline sent out?
00:00:09.611 --> 00:00:14.438 I did toward the end of the day yesterday, so I have like a
00:00:13.791 --> 00:00:13.921 Yep.
00:00:14.438 --> 00:00:19.506 general understanding of things, but I didn't go like in depth
00:00:19.506 --> 00:00:22.241 into like researching this topic.
00:00:23.031 --> 00:00:23.231 OK.
00:00:25.441 --> 00:00:25.851 Anybody else?
00:00:29.381 --> 00:00:32.321 Personally, I did not, but I'm gonna pull it up right now.
00:00:31.571 --> 00:00:31.821 Right.
00:00:33.341 --> 00:00:40.603 OK, so can anyone tell me even without reading article what a
00:00:35.251 --> 00:00:36.411 I did give it a glance over.
00:00:40.603 --> 00:00:41.891 closure is?
00:00:41.941 --> 00:00:44.983 I don't actually have a great definition, so if someone has a
00:00:44.983 --> 00:00:46.651 good definition, please share it.
00:00:49.841 --> 00:00:56.328 Umm, I mean, I don't know if it's a a great definition, but I
00:00:56.328 --> 00:01:00.721 feel like it has to do with the scope of.
00:01:03.121 --> 00:01:07.461 Like what functions and have access to?
00:01:07.541 --> 00:01:14.541 What data do to scope affects closure and then if you?
00:01:16.901 --> 00:01:18.841 That's where you could like run into problems.
00:01:18.851 --> 00:01:21.421 Basically, is what the article where that was going.
00:01:22.211 --> 00:01:22.391 Yeah.
00:01:23.461 --> 00:01:27.611 So anybody else before I say what I would call it.
00:01:29.751 --> 00:01:30.021 I don't.
00:01:30.031 --> 00:01:32.885 Yeah, I don't know if they have a clear definition, but it makes
00:01:32.885 --> 00:01:33.411 me think of.
00:01:36.541 --> 00:01:37.131 What?
00:01:37.181 --> 00:01:40.461 What functions have access to what variables when?
00:01:42.171 --> 00:01:45.921 Yeah, that's a that's a pretty good way of defining it.
00:01:46.801 --> 00:01:48.391 Umm Michael or Alex?
00:01:48.451 --> 00:01:49.441 You have another way.
00:01:52.981 --> 00:01:56.641 That was pretty well said, I think, yeah, I agree.
00:01:58.151 --> 00:01:59.871 What so?
00:01:59.661 --> 00:02:00.231 No, I don't.
00:02:00.241 --> 00:02:00.601 I don't know.
00:02:02.701 --> 00:02:06.597 OK, so how I would describe it is very similar to what Justin
00:02:06.597 --> 00:02:06.911 said.
00:02:06.921 --> 00:02:14.997 It's so a single closure as I understand it, is generally
00:02:14.997 --> 00:02:23.629 created by functions, and it's anything that the function has
00:02:23.629 --> 00:02:25.021 access to.
00:02:27.491 --> 00:02:32.653 Inside of it, when the function is made, that's kind of how I
00:02:32.653 --> 00:02:33.901 think about it.
00:02:33.911 --> 00:02:35.301 It's like so.
00:02:35.311 --> 00:02:37.191 Like I'll share my screen real quick.
00:02:39.691 --> 00:02:43.112 To visualize it, would that be like what's inside the curly
00:02:41.671 --> 00:02:41.831 Yeah.
00:02:43.112 --> 00:02:43.511 braces?
00:02:45.321 --> 00:02:49.461 Well, it would be not just what's inside of curly braces,
00:02:49.461 --> 00:02:53.743 but what is outside the curly braces that could be accessed
00:02:53.601 --> 00:02:53.921 OK.
00:02:53.743 --> 00:02:56.241 inside the curly braces the scope.
00:02:54.011 --> 00:02:54.311 OK.
00:02:54.701 --> 00:02:55.591 Gotcha. Yeah.
00:02:55.581 --> 00:02:57.341 Yeah, I'm thinking like a constructor.
00:02:58.411 --> 00:03:01.591 You could have functions already attached on the outside.
00:03:01.631 --> 00:03:06.423 You construct a new, uh, a new object that has those functions
00:03:01.871 --> 00:03:02.161 Umm.
00:03:06.423 --> 00:03:11.139 that are not within that set object, but they are because you
00:03:11.139 --> 00:03:13.421 defined it in the constructor.
00:03:14.011 --> 00:03:14.171 Yeah.
00:03:15.301 --> 00:03:15.481 Yep.
00:03:16.361 --> 00:03:19.111 And and what would be?
00:03:19.121 --> 00:03:22.091 As I understand it now, this is I didn't get a degree.
00:03:22.101 --> 00:03:25.470 So you know, this is kind of not the most technical definition,
00:03:25.470 --> 00:03:28.522 but as I understand it, what would be inside the function
00:03:28.522 --> 00:03:30.311 body would be considered descope.
00:03:31.681 --> 00:03:35.346 And what's inside and accessible to the function outside of it is
00:03:35.346 --> 00:03:38.622 considered the closure, so they're very similar terms, but
00:03:38.622 --> 00:03:40.121 they're not quite the same.
00:03:40.641 --> 00:03:40.951 Yeah.
00:03:40.961 --> 00:03:41.901 See that one more time.
00:03:41.081 --> 00:03:41.391 Umm.
00:03:43.021 --> 00:03:45.671 So like, we'll just make a function here real quick.
00:03:45.681 --> 00:03:48.041 Make it more obvious, alright?
00:03:48.051 --> 00:03:48.681 Trust some phone.
00:03:51.621 --> 00:03:54.751 So anything in here is scope.
00:03:57.391 --> 00:03:57.811 Right.
00:03:57.441 --> 00:03:59.621 Like anything that's just inside the function this scope.
00:04:02.281 --> 00:04:02.581 OK.
00:04:02.371 --> 00:04:05.371 And then anything, for instance here.
00:04:07.681 --> 00:04:14.011 This closure or anything up here would be closure, right?
00:04:12.421 --> 00:04:14.261 Umm interesting OK.
00:04:14.021 --> 00:04:14.851 Anything.
00:04:15.241 --> 00:04:20.322 Anything that this function can close over the value of would be
00:04:20.322 --> 00:04:22.041 considered as closure.
00:04:22.631 --> 00:04:23.181 Thatcher.
00:04:23.451 --> 00:04:24.451 That's good way to describe it.
00:04:25.771 --> 00:04:26.971 So. Umm.
00:04:26.831 --> 00:04:31.359 So would you would say that that function has closure over
00:04:31.359 --> 00:04:33.201 whatever the snippet is.
00:04:33.211 --> 00:04:34.891 That's in comments.
00:04:37.101 --> 00:04:41.504 Yeah, so this function has closure over like all of these
00:04:41.504 --> 00:04:46.133 variables, everything and use patients and these two, but it
00:04:46.133 --> 00:04:50.460 wouldn't have closure over what's returned cause this is
00:04:47.321 --> 00:04:47.621 Umm.
00:04:50.460 --> 00:04:55.241 like its own little block that that function never knows about
00:04:55.241 --> 00:05:00.023 and it wouldn't have it wouldn't close over anything inside of
00:05:00.023 --> 00:05:04.121 this use effect cause it's a separate function right?
00:05:01.491 --> 00:05:02.401 You support.
00:05:02.651 --> 00:05:03.311 That makes sense.
00:05:04.131 --> 00:05:09.868 So if I had constant X = 1 right like one is not in the closure
00:05:09.868 --> 00:05:11.481 of my custom funk.
00:05:14.621 --> 00:05:14.921 So.
00:05:16.481 --> 00:05:19.811 Umm O what a what?
00:05:19.821 --> 00:05:21.711 A steel closure is based on that.
00:05:21.721 --> 00:05:25.881 Is anyone care to like describe it or define it?
00:05:38.401 --> 00:05:39.411 I don't know.
00:05:38.711 --> 00:05:39.071 Well.
00:05:39.921 --> 00:05:40.131 Yeah.
00:05:40.141 --> 00:05:40.881 Go for it or anything.
00:05:41.831 --> 00:05:45.743 I was going to say like if you're using the words stale
00:05:45.743 --> 00:05:49.864 that would make me believe that at one point something had
00:05:49.864 --> 00:05:50.981 closure over it.
00:05:50.991 --> 00:05:54.715 And then because of some sort of changes that went on, it no
00:05:54.715 --> 00:05:58.071 longer does at the time that it's trying to access it.
00:06:00.051 --> 00:06:01.671 Almost, but not quite.
00:06:02.421 --> 00:06:07.696 Now I see this issue happen whenever we have something on
00:06:07.696 --> 00:06:13.244 the page that we want to render and we should be using state
00:06:13.244 --> 00:06:19.247 instead of just using a variable because it doesn't update on the
00:06:18.341 --> 00:06:18.601 Umm.
00:06:19.247 --> 00:06:19.701 page.
00:06:20.681 --> 00:06:20.911 Mm-hmm.
00:06:22.451 --> 00:06:23.931 Yep, that's great example.
00:06:23.941 --> 00:06:25.601 But how would you define like?
00:06:25.691 --> 00:06:27.121 What makes it stale?
00:06:27.511 --> 00:06:29.691 What's the word stale mean in this context?
00:06:31.631 --> 00:06:34.593 You're right that that is an example, but how would you
00:06:34.391 --> 00:06:34.901 Uh.
00:06:34.593 --> 00:06:35.121 define it?
00:06:36.021 --> 00:06:41.331 The variable that you created, it only got touched once on
00:06:41.331 --> 00:06:46.911 creation, and while it did get updated, it never went back to
00:06:46.911 --> 00:06:48.621 it to run it again.
00:06:50.081 --> 00:06:54.821 It stayed as its first initial value. Uh.
00:06:50.151 --> 00:06:50.331 Yeah.
00:06:54.201 --> 00:06:54.401 Yep.
00:06:56.501 --> 00:06:58.251 Yeah, that's pretty much the definition.
00:06:58.381 --> 00:07:05.451 So umm, so for instance this could close over patients right?
00:07:06.821 --> 00:07:12.841 Also dot log patients and as it stands, every time patients
00:07:12.841 --> 00:07:18.560 renders, this function runs again and without any custom
00:07:18.560 --> 00:07:25.081 hooks or anything special, this function gets made over and over
00:07:25.081 --> 00:07:28.091 again every time this renders.
00:07:29.881 --> 00:07:34.806 So if you're doing that, then you don't have a closure
00:07:34.806 --> 00:07:40.179 problem, because this function runs, so it grabs the newest
00:07:40.179 --> 00:07:45.731 value of patients, and then this function gets created and it
00:07:45.731 --> 00:07:47.611 closes over patients.
00:07:48.431 --> 00:07:51.321 So it has the newest value, right?
00:07:52.121 --> 00:07:52.511 Umm.
00:07:52.911 --> 00:07:59.613 But let's say that you use use callback now, then remember what
00:07:59.613 --> 00:08:01.811 you've callback does.
00:08:01.821 --> 00:08:03.071 I know, I told Justin.
00:08:03.081 --> 00:08:03.871 Does anyone else remember?
00:08:10.301 --> 00:08:12.191 At new senior I did not remember.
00:08:12.241 --> 00:08:17.946 I I do not even recall even having a valid definition so,
00:08:15.921 --> 00:08:16.091 OK.
00:08:17.946 --> 00:08:23.061 but I'm curious to dive in on what we got going on.
00:08:19.181 --> 00:08:19.341 OK.
00:08:22.661 --> 00:08:22.831 OK.
00:08:23.971 --> 00:08:25.921 Does anybody else wanna take a stab at it?
00:08:25.931 --> 00:08:26.651 Alex zerbini.
00:08:27.271 --> 00:08:28.001 Ohm.
00:08:28.951 --> 00:08:33.547 Something about being able to call that function at another
00:08:33.547 --> 00:08:35.691 time or something like that.
00:08:38.641 --> 00:08:39.171 Not really.
00:08:40.151 --> 00:08:40.371 No.
00:08:42.361 --> 00:08:45.331 Alex thinks that it don't know how much you can see.
00:08:45.341 --> 00:08:46.861 Is this big enough for you or you're on your phone?
00:08:47.961 --> 00:08:51.661 I think he's losing power in gaining and losing.
00:08:50.941 --> 00:08:51.251 Yeah.
00:08:51.301 --> 00:08:51.481 OK.
00:08:52.671 --> 00:08:52.941 OK.
00:08:52.851 --> 00:08:53.791 They're doing the flickering.
00:08:52.951 --> 00:08:53.351 Well, I'll just.
00:08:54.471 --> 00:08:57.354 I'll just assume he's not here and he can watch the recording,
00:08:57.354 --> 00:08:59.001 or if he times then then obviously.
00:08:59.011 --> 00:09:03.707 You know, having participate so use callback does something very
00:09:03.707 --> 00:09:08.186 simple and everyone should start using it today if you're not
00:09:08.186 --> 00:09:10.281 already using it, it's great.
00:09:10.671 --> 00:09:14.801 OK, so remember how I told you remember how I told you?
00:09:11.991 --> 00:09:12.401 There we go.
00:09:14.811 --> 00:09:17.575 Just a second ago that every time this component renders,
00:09:17.575 --> 00:09:18.671 this function will run.
00:09:20.911 --> 00:09:21.201 Umm.
00:09:21.091 --> 00:09:25.354 And that and that every time it renders, this would be a new
00:09:21.601 --> 00:09:21.861 OK.
00:09:25.354 --> 00:09:27.031 function like in memory.
00:09:29.011 --> 00:09:29.251 Yeah.
00:09:29.161 --> 00:09:29.961 OK. Yeah.
00:09:30.611 --> 00:09:34.705 So all you use callback does is prevents this from being made
00:09:34.705 --> 00:09:35.101 again.
00:09:36.721 --> 00:09:38.681 Oh, I like that.
00:09:39.641 --> 00:09:44.281 The only times it'll update are whenever something in the
00:09:44.281 --> 00:09:46.441 dependencies array changes.
00:09:48.471 --> 00:09:52.731 So as it stands, let's say that I run this and let's do a.
00:09:55.961 --> 00:10:00.704 Did a little here's effect here and we'll just just to show
00:10:00.704 --> 00:10:03.391 exactly what it still closure is.
00:10:04.151 --> 00:10:06.731 Umm, so we'll do a set interval.
00:10:09.161 --> 00:10:10.231 And run.
00:10:10.801 --> 00:10:11.091 Let's see.
00:10:13.211 --> 00:10:14.321 My custom funk.
00:10:16.681 --> 00:10:17.031 OK.
00:10:17.341 --> 00:10:19.351 And we'll just run it every like, I don't know.
00:10:19.501 --> 00:10:27.213 2nd so it's not excessive that and then out here we're going to
00:10:27.213 --> 00:10:34.201 do console dot log patients patients outside of function.
00:10:36.421 --> 00:10:36.861 Of.
00:10:39.211 --> 00:10:40.231 My custom funk.
00:10:42.601 --> 00:10:49.131 And then in here, we'll do patients insight of custom funk.
00:10:54.071 --> 00:10:55.521 Or my custom funk.
00:10:55.601 --> 00:10:56.381 That's why I called it.
00:10:56.391 --> 00:10:58.851 So we said it was system yourself.
00:11:01.751 --> 00:11:06.941 So just to give you a heads up, what we're expecting to happen
00:11:06.941 --> 00:11:11.883 would probably will happen is that this will tell my custom
00:11:11.883 --> 00:11:16.001 funk to run and it's gonna log this every second.
00:11:17.141 --> 00:11:20.180 But this the first time it since there's nothing in pensees
00:11:20.180 --> 00:11:22.611 array, this is just gonna get made once, right?
00:11:22.621 --> 00:11:26.188 It'll never get made again, and the first time it gets made,
00:11:26.188 --> 00:11:29.229 it's going to do capture or close over the value of
00:11:29.229 --> 00:11:31.801 patients, which will probably be undefined.
00:11:33.241 --> 00:11:37.528 But then later in more renders, you're gonna see that this will
00:11:37.528 --> 00:11:41.479 say patients actually is an array of things, but this will
00:11:41.479 --> 00:11:45.632 continue to log that is not an array of anything, that's just
00:11:45.632 --> 00:11:46.301 undefined.
00:11:47.351 --> 00:11:47.631 Umm.
00:11:49.601 --> 00:11:51.421 Please that make.
00:11:49.981 --> 00:11:52.961 So that is go ahead.
00:11:53.581 --> 00:11:55.211 No, I didn't say that makes sense.
00:11:55.221 --> 00:11:59.278 So it's essentially a way to cash a function and just have it
00:11:59.278 --> 00:12:03.139 update when the when something changes in the dependencies
00:12:03.139 --> 00:12:03.531 array.
00:12:03.741 --> 00:12:06.351 Kind of like use effect, but use effect runs.
00:12:03.991 --> 00:12:04.191 Yep.
00:12:06.981 --> 00:12:09.311 So I guess like what's?
00:12:08.261 --> 00:12:08.401 Yep.
00:12:09.391 --> 00:12:11.491 What's the benefit of using it?
00:12:11.501 --> 00:12:14.711 Just that it doesn't recreate the function every time.
00:12:14.721 --> 00:12:15.611 Performance benefits.
00:12:16.071 --> 00:12:17.551 Yeah, his performance benefits.
00:12:17.581 --> 00:12:21.021 Yeah, I imagine you save on RAM at the end of the day.
00:12:17.641 --> 00:12:18.971 That's all there is.
00:12:18.021 --> 00:12:18.241 OK.
00:12:20.331 --> 00:12:24.163 Yep, David Rim and you know garbage collection doesn't have
00:12:24.163 --> 00:12:27.867 to work quite as hard because like when you don't use use
00:12:27.111 --> 00:12:27.341 Mm-hmm.
00:12:27.867 --> 00:12:31.571 callback and of course garbage collection is really good.
00:12:31.641 --> 00:12:34.863 And so like, we don't need to feel terribly guilty about all
00:12:34.863 --> 00:12:37.451 the sites we've built up into this point, right?
00:12:37.721 --> 00:12:38.071 Umm.
00:12:37.861 --> 00:12:43.126 But garbage collection every time this renders, it's going to
00:12:43.126 --> 00:12:47.201 find the old one because this one's new, right?
00:12:47.251 --> 00:12:47.521 Right.
00:12:47.541 --> 00:12:47.891 Umm.
00:12:48.231 --> 00:12:50.802 So it looks at the old one says Ohh this isn't being used
00:12:50.802 --> 00:12:51.201 anywhere.
00:12:51.211 --> 00:12:54.021 Let's just destroy it, right?
00:12:54.191 --> 00:12:57.671 But if you use use callback, garbage collection doesn't have
00:12:57.671 --> 00:13:01.093 to destroy it except when the dependencies change, which is
00:12:58.811 --> 00:12:59.051 Umm.
00:13:01.093 --> 00:13:02.861 obviously not that often right?
00:13:02.871 --> 00:13:04.561 Like after like 3 or 4 renders.
00:13:05.291 --> 00:13:08.191 It's probably not going to change anymore, so.
00:13:08.121 --> 00:13:09.141 Right, right.
00:13:11.161 --> 00:13:14.141 So if I go turn it back on.
00:13:17.251 --> 00:13:21.411 Local and I've already on patients, so we should see.
00:13:23.941 --> 00:13:24.731 Should see it.
00:13:27.691 --> 00:13:28.931 To the thing pretty quickly.
00:13:58.461 --> 00:14:01.351 Well, maybe I should have killed these apples before I.
00:14:02.541 --> 00:14:05.631 Before I we started this training, that was a mistake.
00:14:08.661 --> 00:14:09.291 Obviate.
00:14:12.581 --> 00:14:15.855 So is it common that you put the variables used inside the
00:14:15.855 --> 00:14:18.961 function and the dependency array for the use callback?
00:14:20.481 --> 00:14:21.231 Yeah.
00:14:21.301 --> 00:14:21.861 Yeah, pretty.
00:14:21.871 --> 00:14:24.480 You can pretty much think about what dependencies go in here,
00:14:24.480 --> 00:14:26.541 just like you think of what goes and use affect.
00:14:26.891 --> 00:14:27.101 Yep.
00:14:27.001 --> 00:14:30.538 The only big difference is that this is just going to make this
00:14:30.538 --> 00:14:33.743 a new function as where this is actually going to run the
00:14:33.743 --> 00:14:34.571 function in it.
00:14:34.991 --> 00:14:35.521 Right.
00:14:35.531 --> 00:14:36.691 Yep, that makes sense.
00:14:37.381 --> 00:14:42.172 So yeah, so here you can see we have inside outside of my custom
00:14:42.172 --> 00:14:46.741 funk undefined and inside of my custom funk undefined because
00:14:46.741 --> 00:14:48.731 the data hasn't loaded yet.
00:14:47.341 --> 00:14:47.571 Umm.
00:14:49.041 --> 00:14:52.591 Right now you see outside of custom funk.
00:14:52.601 --> 00:14:56.441 Actually, this really is a valid array, right?
00:14:56.521 --> 00:15:00.092 Is really a data there, but inside of custom funk it's
00:14:58.151 --> 00:14:58.351 Yep.
00:15:00.092 --> 00:15:00.871 always null.
00:15:03.611 --> 00:15:07.614 So there really is a data, but inside of here inside of custom
00:15:07.614 --> 00:15:10.791 Funk doesn't know it because this wasn't updated.
00:15:11.331 --> 00:15:11.961 Right.
00:15:11.971 --> 00:15:16.741 It's using like the cached version and also yeah.
00:15:14.171 --> 00:15:15.841 It's using a steel closure right?
00:15:16.371 --> 00:15:19.501 Like the stale version of this right, it's just using the first
00:15:19.501 --> 00:15:21.261 one and never using an updated one.
00:15:22.351 --> 00:15:22.961 That makes sense.
00:15:24.021 --> 00:15:28.819 As to where and I guess I don't have to belabor the point here,
00:15:28.819 --> 00:15:32.941 but as to where if I add patients in here now whenever
00:15:32.941 --> 00:15:37.813 patients becomes non null, this will start logging what patients
00:15:37.813 --> 00:15:40.811 really is and a patient's ever changed.
00:15:40.821 --> 00:15:45.361 Again, it would start logging the newest version every time.
00:15:47.801 --> 00:15:48.261 Right.
00:15:50.791 --> 00:15:51.231 Umm.
00:15:52.341 --> 00:15:58.022 And so this might be like, OK, this doesn't seem like that big
00:15:58.022 --> 00:16:03.612 of a deal or that hard to deal with, but it can get very hard
00:16:03.612 --> 00:16:09.563 to deal with when you have a lot of use callbacks or a lot of use
00:16:09.563 --> 00:16:14.341 effects or a lot of different stuff going on, right?
00:16:15.481 --> 00:16:15.881 Umm.
00:16:17.381 --> 00:16:21.081 And so in the thing the thing about it is it's extremely hard
00:16:21.081 --> 00:16:24.721 to debug when you don't have a bunch of consolidate logs and
00:16:24.721 --> 00:16:28.361 like you're not intentionally setting up the problem, right?
00:16:26.731 --> 00:16:26.821 No.
00:16:29.331 --> 00:16:31.837 It's very hard to debug because you're not going to get a
00:16:31.837 --> 00:16:32.441 console error.
00:16:32.491 --> 00:16:34.931 You're just gonna get the wrong behavior.
00:16:36.121 --> 00:16:40.294 I like the site, just won't do what you wanted to do, but it
00:16:40.294 --> 00:16:41.661 isn't going to ever.
00:16:44.441 --> 00:16:49.331 It isn't going to like show you anything so.
00:16:51.771 --> 00:16:53.951 So that's why I thought it worth covering new training because.
00:16:56.091 --> 00:16:59.426 One day, if you haven't accounted already and maybe you
00:16:59.426 --> 00:17:02.581 have a, maybe you did and you just didn't know that.
00:17:02.591 --> 00:17:07.927 That's what it was, of course, is not as common if you're not
00:17:07.927 --> 00:17:13.091 using use callback and things like that, but now it should.
00:17:19.021 --> 00:17:20.731 Oh yeah, so here's the perfect example.
00:17:20.741 --> 00:17:22.861 OK, so I saved right?
00:17:23.111 --> 00:17:27.421 This isn't the override, it's compiling, and now I reload.
00:17:30.591 --> 00:17:32.841 And it's still always null.
00:17:34.021 --> 00:17:34.721 Does anyone know why?
00:17:41.041 --> 00:17:42.711 Put this on the right and not the left.
00:17:43.161 --> 00:17:45.977 I'm really glad I ran into this problem because this is a
00:17:45.977 --> 00:17:48.890 perfect example of it being a lot more complicated than you
00:17:48.890 --> 00:17:49.181 think.
00:17:54.711 --> 00:17:58.051 That because the intervals just running custom funk.
00:17:58.831 --> 00:18:08.594 Exactly set interval only gets the first version of my custom
00:18:04.431 --> 00:18:04.621 Again.
00:18:08.594 --> 00:18:10.641 funk and the.
00:18:08.871 --> 00:18:09.391 Right.
00:18:10.071 --> 00:18:11.831 Like the component isn't actually updating.
00:18:12.981 --> 00:18:13.371 Yeah.
00:18:13.381 --> 00:18:18.675 And so well, so the first version of this patience is null
00:18:18.675 --> 00:18:24.237 right to center interval just runs the first version over and
00:18:24.237 --> 00:18:26.031 over and over again.
00:18:27.121 --> 00:18:29.471 So patience is always null, null, null.
00:18:29.861 --> 00:18:33.365 So even though there's an updated version of this where
00:18:33.365 --> 00:18:36.994 patients would be read the version, that's from that that
00:18:36.994 --> 00:18:40.935 was put into set interval isn't the updated version, it's just
00:18:37.931 --> 00:18:38.231 Umm.
00:18:40.935 --> 00:18:42.061 the first version.
00:18:44.541 --> 00:18:46.771 So it's still closure within a style closure.
00:18:47.771 --> 00:18:52.271 Yes, like this is creating a style closure over this.
00:18:52.281 --> 00:18:55.411 So even though this isn't a still closer now this does.
00:18:56.351 --> 00:18:56.891 Makes sense.
00:18:58.211 --> 00:19:00.271 So yeah.
00:18:58.351 --> 00:18:59.371 That would be hard to debug.
00:19:01.861 --> 00:19:05.931 So, and that's like, I mean imagine if you have this in
00:19:05.931 --> 00:19:10.581 like, what if it was involving use patients and a use effect in
00:19:09.671 --> 00:19:11.861 Ohh so.
00:19:10.581 --> 00:19:12.761 here they can get bloody hard.
00:19:14.061 --> 00:19:18.281 Now, do you need to update that use effect with patients as well
00:19:18.281 --> 00:19:21.981 since use the callback and the use effect with patients.
00:19:20.581 --> 00:19:20.831 Umm.
00:19:22.431 --> 00:19:24.721 That's a great question and I don't know the answer.
00:19:25.381 --> 00:19:27.311 I feel like that would fix it.
00:19:27.321 --> 00:19:27.931 I'm gonna say yes.
00:19:29.581 --> 00:19:32.561 So we're going to put patients in here and safe.
00:19:42.671 --> 00:19:51.591 So inside of custom funk still null every time outside.
00:19:52.561 --> 00:19:52.851 Oh, no.
00:19:52.861 --> 00:19:53.291 Hold on.
00:19:53.861 --> 00:19:55.131 So no, no, I'm wrong.
00:19:55.221 --> 00:19:56.351 They're both inside.
00:19:56.401 --> 00:19:58.541 See that inside inside.
00:19:58.441 --> 00:20:03.291 So now it's running both, so that's a problem on itself.
00:20:01.051 --> 00:20:02.961 Which why?
00:20:03.031 --> 00:20:03.941 Why are there two?
00:20:03.341 --> 00:20:03.791 Or two.
00:20:04.091 --> 00:20:05.101 Yeah, it is a problem.
00:20:04.291 --> 00:20:08.090 Because we have like ohh don't know about a thread but we we
00:20:05.191 --> 00:20:05.441 Why?
00:20:08.090 --> 00:20:11.764 have something stuck on the first set interval and then it
00:20:11.764 --> 00:20:15.500 rerender the use effect on the second set interval with the
00:20:14.771 --> 00:20:17.361 Umm Yep.
00:20:15.500 --> 00:20:16.371 true patients.
00:20:19.431 --> 00:20:22.981 So this the whole the whole function runs once, right?
00:20:22.991 --> 00:20:28.525 Patience is null, so this logs patients null and then this runs
00:20:28.525 --> 00:20:33.800 the interval even though patient is null and then a rerender
00:20:33.800 --> 00:20:37.431 happens when patients becomes a non null.
00:20:38.411 --> 00:20:42.591 But this interval is already running, so now this function
00:20:42.591 --> 00:20:46.841 gets updated to have the array and this use effect notices.
00:20:46.941 --> 00:20:50.491 Hey, it's an array now it's not null start another interval.
00:20:51.441 --> 00:20:55.831 This closes over the updated version and so there's two.
00:20:55.881 --> 00:20:58.807 There's the old interval where it was null the first time, and
00:20:57.241 --> 00:20:57.471 And.
00:20:58.281 --> 00:20:58.651 Ah.
00:20:58.807 --> 00:21:01.361 there's the new one where it's actually a valid array.
00:21:01.951 --> 00:21:06.748 So we need a null check that use a fact before running the MIC
00:21:06.748 --> 00:21:07.661 custom funk.
00:21:07.501 --> 00:21:07.991 Yeah.
00:21:08.031 --> 00:21:13.115 So the the simple way would probably be if patients right as
00:21:13.115 --> 00:21:14.031 in if it's.
00:21:14.121 --> 00:21:20.262 If it's actually a thing, then set interval and run the custom
00:21:15.491 --> 00:21:15.711 Yep.
00:21:19.371 --> 00:21:22.542 Would that just be happening because of kind of how set
00:21:20.262 --> 00:21:20.651 bug.
00:21:22.542 --> 00:21:23.391 interval works?
00:21:23.461 --> 00:21:25.901 It essentially takes a function and then just keeps running it.
00:21:26.651 --> 00:21:28.041 Yeah, it's and.
00:21:28.051 --> 00:21:29.081 And you could get.
00:21:29.091 --> 00:21:33.643 You could get a lot more complicated, kind of what you're
00:21:33.643 --> 00:21:38.587 getting at is like you could do constant X equals set interval
00:21:38.587 --> 00:21:40.941 and then you could do what if.
00:21:43.121 --> 00:21:44.041 Patients.
00:21:48.201 --> 00:21:50.431 You'd have to use the ref at this point in the right like.
00:21:51.171 --> 00:21:55.728 Basically, if you want to know if patients changed or in our
00:21:55.728 --> 00:22:00.061 simple case, if patience is not null then clear interval.
00:22:00.581 --> 00:22:01.721 Umm, right.
00:22:01.731 --> 00:22:01.901 Yeah.
00:22:03.001 --> 00:22:06.800 X and then you can clear the old interval and then when it
00:22:03.871 --> 00:22:04.231 Brings you.
00:22:06.800 --> 00:22:10.921 updated, this wouldn't get hit right and you would just run the
00:22:09.091 --> 00:22:09.331 Yep.
00:22:10.921 --> 00:22:11.951 updated version.
00:22:13.071 --> 00:22:17.791 But yeah, but yeah, now you can see that it's right.
00:22:13.091 --> 00:22:14.601 Yep, that makes sense.
00:22:17.861 --> 00:22:21.659 What I always curious about is I wonder, and I don't know the
00:22:21.659 --> 00:22:25.518 answer to this, I'm just this is something I'm still very much
00:22:24.481 --> 00:22:24.711 Uh.
00:22:25.518 --> 00:22:26.191 benefiting.
00:22:26.681 --> 00:22:28.441 What if my constant funk is updated?
00:22:32.281 --> 00:22:32.551 Right.
00:22:32.561 --> 00:22:35.813 Because when patients changes, this will change and when this
00:22:35.813 --> 00:22:37.701 changes it'll run another interval.
00:22:36.011 --> 00:22:41.901 Ah, so remove the if patients piece too, then right.
00:22:42.751 --> 00:22:45.771 Where do I mean we still wanted to run with patients only.
00:22:46.171 --> 00:22:47.721 That'd be the proper way to do it.
00:22:48.541 --> 00:22:48.761 Yeah.
00:22:53.861 --> 00:22:55.491 Yeah, I'm curious if this work.
00:22:53.881 --> 00:22:54.221 Yeah.
00:22:54.231 --> 00:22:56.954 Well, and and really what you'd probably want to do is both,
00:22:56.954 --> 00:22:57.221 right?
00:22:57.321 --> 00:22:58.271 You wanna do both?
00:22:58.761 --> 00:22:59.851 Do all your checks.
00:23:01.531 --> 00:23:02.781 Well, I don't know if you'd want to do is.
00:23:02.791 --> 00:23:03.801 I don't even know if that matters.
00:23:03.811 --> 00:23:05.601 Actually interestingly.
00:23:04.981 --> 00:23:08.514 Yeah, if we're checking my custom phone and my custom funk
00:23:08.514 --> 00:23:12.227 is checking patients, I think if we check patients twice were
00:23:12.227 --> 00:23:14.981 over doing the work at that point feels like.
00:23:16.851 --> 00:23:19.131 You're saying like if I left patients here?
00:23:20.081 --> 00:23:23.381 Yeah, that's like duplicating the the check.
00:23:28.111 --> 00:23:31.861 Well, it kind of is, but The thing is you don't want to put.
00:23:31.871 --> 00:23:34.431 Let's say that this is like a 30 line function, right?
00:23:35.141 --> 00:23:36.951 You don't wanna put it inside the use effect.
00:23:37.041 --> 00:23:38.311 It should be its own function.
00:23:38.381 --> 00:23:41.311 It's better to leave things out of these effect, right?
00:23:42.451 --> 00:23:45.685 So this in my mind this would actually be the right way to do
00:23:45.685 --> 00:23:45.841 it.
00:23:48.551 --> 00:23:50.891 With double patients in the dependencies.
00:23:48.871 --> 00:23:49.051 Because.
00:23:51.551 --> 00:23:54.751 Yeah, because pretend this is like load, you know.
00:23:56.701 --> 00:23:59.261 Patient inventory or something, right?
00:23:59.951 --> 00:24:00.251 OK.
00:24:00.281 --> 00:24:04.129 It should be its own function and then here this would just
00:24:04.129 --> 00:24:07.785 watch for if patients low patient inventory right and of
00:24:07.785 --> 00:24:11.697 course load patient inventory would probably have a piece of
00:24:11.697 --> 00:24:13.621 state that got updated, right.
00:24:13.631 --> 00:24:17.031 So patients inventory, I'm using this because I just did it for
00:24:17.031 --> 00:24:17.721 this project.
00:24:21.441 --> 00:24:24.231 Equals your state, Mr Annie.
00:24:24.241 --> 00:24:26.371 For now, start out as null, right?
00:24:26.821 --> 00:24:28.741 And then I would probably do.
00:24:30.921 --> 00:24:34.930 Patient inventory res here and then do if patients and not
00:24:34.930 --> 00:24:39.278 patient inventory res cause I'm only expecting patients to ever
00:24:39.278 --> 00:24:40.501 change once right.
00:24:40.611 --> 00:24:43.381 And then once this is set, I don't wanna run this again.
00:24:43.391 --> 00:24:43.641 Why?
00:24:43.651 --> 00:24:44.141 Why?
00:24:44.151 --> 00:24:44.891 Why load it twice?
00:24:45.941 --> 00:24:46.371 Umm.
00:24:47.191 --> 00:24:51.213 And then here this would only have to depend on patients,
00:24:51.213 --> 00:24:55.305 because it's that's what it's gonna use for like the C API
00:24:55.305 --> 00:24:59.604 call right now wants dot page inventory or use the factory or
00:24:59.604 --> 00:25:00.921 whatever, you know.
00:25:02.001 --> 00:25:07.411 Umm dot then and then, you know, imagine this is good code.
00:25:07.821 --> 00:25:12.691 Umm, you know, that's how I would want to do it.
00:25:11.381 --> 00:25:12.141 You're right, David.
00:25:12.151 --> 00:25:12.521 I don't know.
00:25:12.531 --> 00:25:13.111 You're talking about.
00:25:14.341 --> 00:25:14.761 What's that?
00:25:15.761 --> 00:25:16.351 So that's all.
00:25:16.361 --> 00:25:16.771 You're right.
00:25:16.781 --> 00:25:17.561 I don't know what you're talking.
00:25:21.121 --> 00:25:22.751 That's all right.
00:25:23.971 --> 00:25:24.341 That's all.
00:25:24.351 --> 00:25:25.311 You write just good, good.
00:25:25.971 --> 00:25:28.301 Oh well, I wish.
00:25:28.311 --> 00:25:28.951 I wish that were true.
00:25:31.461 --> 00:25:33.171 So yeah, this is how I would want to do it right?
00:25:33.181 --> 00:25:36.858 And I want to put this outside of it to keep the logic
00:25:36.858 --> 00:25:38.261 independent like not.
00:25:38.271 --> 00:25:40.891 You don't want to bloat, use effect and so I would make this
00:25:40.891 --> 00:25:43.596 dependent patients because it needs the newest version when it
00:25:43.596 --> 00:25:44.411 gets the inventory.
00:25:44.521 --> 00:25:48.172 And then I would make this watch for patients and make sure it
00:25:48.172 --> 00:25:49.331 only runs this once.
00:25:50.391 --> 00:25:55.029 And that's what I would probably like realistically do is a
00:25:55.029 --> 00:25:56.961 situation like this. Umm.
00:25:59.121 --> 00:26:02.611 So and then I guess you would also need.
00:26:06.581 --> 00:26:09.051 This is where still closures get complicated, and I haven't
00:26:09.051 --> 00:26:10.121 brought my mind around it.
00:26:11.601 --> 00:26:13.731 Would you also need the newest version?
00:26:13.941 --> 00:26:16.394 No, you don't need the newest version of the function because
00:26:16.394 --> 00:26:18.451 you'll this will update the same time this updates.
00:26:17.051 --> 00:26:19.141 Yeah, I got patience, patience, patience.
00:26:18.781 --> 00:26:18.941 Yeah.
00:26:19.891 --> 00:26:21.851 Yeah, so.
00:26:24.011 --> 00:26:25.651 But yeah, you guys have seen it.
00:26:25.661 --> 00:26:28.491 Now it can get pretty complicated once you start
00:26:28.491 --> 00:26:32.072 actually using use callback the way you should and by the way
00:26:32.072 --> 00:26:35.422 another thing that's like use callback that I figured out
00:26:35.422 --> 00:26:36.461 recently use memo.
00:26:36.601 --> 00:26:39.681 Does anyone know what use memo does without looking to death?
00:26:38.701 --> 00:26:40.431 I was actually looking at that.
00:26:40.441 --> 00:26:43.631 Dang it, I I don't on W3 after you explained.
00:26:46.781 --> 00:26:47.021 Hmm.
00:26:49.441 --> 00:26:49.921 Tough.
00:26:50.161 --> 00:26:51.661 Uh, I'll stay silent for a moment.
00:26:50.161 --> 00:26:53.666 Feel like they mentioned it in the UM when I did training and
00:26:50.511 --> 00:26:50.871 Yeah. OK.
00:26:53.666 --> 00:26:57.227 like the react course that we took, I feel like they mentioned
00:26:57.227 --> 00:26:59.431 it, but I can't remember what it does.
00:27:00.441 --> 00:27:00.621 OK.
00:27:01.261 --> 00:27:05.621 I feel like it also uses memoization, but maybe for a
00:27:05.621 --> 00:27:07.881 value instead of a function.
00:27:08.741 --> 00:27:10.111 Yep, that's exactly what it does.
00:27:10.321 --> 00:27:10.741 Yeah, cool.
00:27:11.821 --> 00:27:12.441 I've never used.
00:27:12.021 --> 00:27:15.071 So yeah, you guys should start using it.
00:27:15.081 --> 00:27:15.541 It's cool.
00:27:15.711 --> 00:27:18.001 So like here you'd return.
00:27:18.311 --> 00:27:19.311 So let's say you have.
00:27:21.641 --> 00:27:22.231 Well, let's see.
00:27:22.241 --> 00:27:24.843 Let's see if I've actually used it somewhere, because I think I
00:27:24.843 --> 00:27:25.981 have just one or two places.
00:27:28.621 --> 00:27:29.601 OK, so here's an example.
00:27:30.581 --> 00:27:37.761 Variance have colors is used in the variant wizard. Umm.
00:27:40.131 --> 00:27:44.545 And only when they're actually is a list of variants does it
00:27:44.545 --> 00:27:49.320 change what it returns, and then it just returns the color of the
00:27:49.320 --> 00:27:49.971 products.
00:27:50.971 --> 00:27:53.341 It's just a list of colors, right?
00:27:54.041 --> 00:27:57.498 But like, you don't need to recreate this variable every
00:27:57.498 --> 00:27:57.801 time.
00:27:57.811 --> 00:28:01.309 This renders you only need to recreate it if the list of
00:28:01.309 --> 00:28:04.991 products is actually different, and so that's what it does.
00:28:05.001 --> 00:28:05.611 It doesn't.
00:28:05.621 --> 00:28:07.651 It doesn't make this a new function.
00:28:08.081 --> 00:28:11.251 Notice that use callback.
00:28:11.361 --> 00:28:13.937 It looks kind of similar, but use callback is actually
00:28:13.937 --> 00:28:15.061 returning this function.
00:28:16.371 --> 00:28:21.267 Use memo is returning the thing that the function returns, so
00:28:21.267 --> 00:28:21.661 this.
00:28:22.931 --> 00:28:23.161 Umm.
00:28:25.721 --> 00:28:29.051 But yeah, that's as far as I understand it.
00:28:29.061 --> 00:28:29.931 That's the only difference.
00:28:30.201 --> 00:28:33.243 One of them returns the whole function, the other one just
00:28:30.421 --> 00:28:30.811 Golf.
00:28:33.243 --> 00:28:36.387 returns whatever the function returns and again, it can help
00:28:36.387 --> 00:28:39.738 you know with garbage collection and help save renderers and all
00:28:39.738 --> 00:28:40.511 that stuff. So.
00:28:43.631 --> 00:28:46.101 Anyway, there you go.
00:28:47.181 --> 00:28:50.712 That's stale closures, and they're really a pain to figure
00:28:50.712 --> 00:28:50.951 out.
00:28:50.961 --> 00:28:53.784 I still have one on PBC that I couldn't figure out, like I had
00:28:53.784 --> 00:28:55.531 to use the table ref to get around it.
00:28:56.311 --> 00:29:00.891 Umm, wraps are one way to deal with this tail closure problem.
00:29:01.021 --> 00:29:06.241 So like if you have just before we, we can hop soon.
00:29:06.251 --> 00:29:12.401 But once to say I have like a it's called me headlines scam
00:29:12.401 --> 00:29:13.631 likely. Yay.
00:29:19.171 --> 00:29:21.851 I don't, OK.
00:29:23.071 --> 00:29:23.841 Umm.
00:29:25.731 --> 00:29:32.193 So let's say, like constant whatever some ref equals you
00:29:32.193 --> 00:29:39.448 through and then Noel and then let's say in here still need all
00:29:39.448 --> 00:29:41.261 this stuff? Umm.
00:29:45.581 --> 00:29:52.264 Let's say in here you do like some ref dot current equals
00:29:52.264 --> 00:29:53.761 whatever 123.
00:29:56.201 --> 00:30:02.336 Umm, I believe it's the case that even if you don't have some
00:30:02.336 --> 00:30:07.975 ref in here, if it's not a dependency, it will still yet
00:30:07.975 --> 00:30:11.141 the latest value inside of this.
00:30:11.201 --> 00:30:13.281 Get the latest value inside of this.
00:30:13.741 --> 00:30:13.961 Uh.
00:30:15.901 --> 00:30:20.051 Inside of this callback here umm.
00:30:25.231 --> 00:30:26.051 I think that's the case.
00:30:31.031 --> 00:30:33.841 So if we do you.
00:30:38.561 --> 00:30:38.961 Let's see.
00:30:44.541 --> 00:30:47.068 There's all these all these function names are just garbage
00:30:47.068 --> 00:30:47.741 now, right? But.
00:30:52.181 --> 00:30:54.461 Change it so.
00:30:56.551 --> 00:31:03.850 So if we do log some Rep in here and we make current change after
00:31:03.850 --> 00:31:04.181 it.
00:31:07.141 --> 00:31:09.451 Uh, what is it complaining about?
00:31:09.461 --> 00:31:10.251 Did I miss?
00:31:10.381 --> 00:31:12.941 Did I miss her simple?
00:31:15.421 --> 00:31:16.361 Somewhere.
00:31:20.991 --> 00:31:22.561 I miss something somewhere.
00:31:22.651 --> 00:31:23.181 What did I miss?
00:31:23.711 --> 00:31:25.851 Yeah, I have too much on 43.
00:31:25.341 --> 00:31:26.831 I.
00:31:29.521 --> 00:31:33.619 I think all of 43 can can go right because you have the
00:31:29.991 --> 00:31:30.261 Really.
00:31:33.619 --> 00:31:36.911 yellow closing parenthesis at the end of 42.
00:31:35.731 --> 00:31:39.411 Ohh no, this is the problem right?
00:31:39.421 --> 00:31:41.721 Some some set interval takes a.
00:31:43.701 --> 00:31:46.320 Number, while OK, like maybe that was just part of the
00:31:46.320 --> 00:31:46.701 problem.
00:31:47.971 --> 00:31:48.521 Say that again.
00:31:50.011 --> 00:31:50.301 Yeah.
00:31:50.311 --> 00:31:52.241 Everything on 43 should be able to go.
00:31:52.251 --> 00:31:56.580 We have, uh, the yellow parenthesis on for use effect
00:31:56.580 --> 00:31:57.301 going on.
00:31:57.811 --> 00:32:00.721 See are we missing a curly bracket?
00:32:04.361 --> 00:32:04.881 After.
00:32:08.351 --> 00:32:09.021 I'll just do it again.
00:32:12.851 --> 00:32:13.511 It'll be faster.
00:32:13.481 --> 00:32:15.701 Uh, it's a curly bracket before the comma.
00:32:17.951 --> 00:32:21.811 Currently bracket before like right here.
00:32:22.451 --> 00:32:23.151 The next comma.
00:32:25.161 --> 00:32:26.751 Are here that feels right.
00:32:26.351 --> 00:32:26.661 Yeah.
00:32:26.671 --> 00:32:31.631 Between that, it's between the the comma and the parenthesis.
00:32:30.381 --> 00:32:30.721 Comma.
00:32:32.331 --> 00:32:35.281 Yeah, you probably killed that come up above, right?
00:32:38.331 --> 00:32:38.861 There we go.
00:32:39.051 --> 00:32:39.581 Goodness.
00:32:39.591 --> 00:32:39.761 OK.
00:32:41.781 --> 00:32:46.160 So yeah, I think, as weird as it cause refs are kind of just an
00:32:46.160 --> 00:32:48.691 escape hatch out of the react world.
00:32:50.641 --> 00:32:51.911 You say it's not fine.
00:32:51.921 --> 00:32:55.021 That's fair cause I didn't actually use it.
00:32:56.581 --> 00:32:57.131 Are imported.
00:33:03.041 --> 00:33:10.881 So yeah, unexpectedly logged, some ref happens.
00:33:12.611 --> 00:33:16.541 And you can see here it happens in line 34.
00:33:16.871 --> 00:33:17.121 Whoops.
00:33:18.211 --> 00:33:22.287 And the first time current is null because that's what user
00:33:22.287 --> 00:33:26.431 starts out as and the next time, even though set interval is
00:33:26.431 --> 00:33:28.061 closed over log sum ref.
00:33:29.751 --> 00:33:33.532 Magically, when it consoled out logged some ref, it actually has
00:33:33.532 --> 00:33:34.521 the array and it.
00:33:39.121 --> 00:33:44.521 Which that's weird, but current Knoll current array.
00:33:46.881 --> 00:33:50.247 So anyway, if you ever run into a closure problem, just remember
00:33:50.247 --> 00:33:52.421 that sometimes rough refs are a solution.
00:33:52.431 --> 00:33:55.701 You can try them out and see if they work for you, but.
00:33:58.511 --> 00:33:59.791 Tried out as the last solution.
00:34:00.401 --> 00:34:02.311 Yeah, try to avoid using reps.
00:34:02.321 --> 00:34:05.866 You should always try to avoid using reps like as a general
00:34:05.866 --> 00:34:09.706 rule in react you should not be using refs unless it's like some
00:34:09.706 --> 00:34:13.309 exceptionally weird animation problem or something, but it's
00:34:13.309 --> 00:34:15.731 very rare that you should be using them.
00:34:16.051 --> 00:34:19.651 So anyway, well, that's all I got.
00:34:20.121 --> 00:34:21.281 Anybody have any questions?
00:34:21.381 --> 00:34:26.751 I'm not sure that I could answer them, but anyone has one.
00:34:26.021 --> 00:34:31.463 No, I think after this now I've got a a good enough kind of
00:34:31.463 --> 00:34:36.995 brain definition of use callback and potentially use memo to
00:34:36.995 --> 00:34:39.171 actually implement them.
00:34:39.221 --> 00:34:42.937 I feel like using a new hook or just something new in program is
00:34:39.941 --> 00:34:40.201 Good.
00:34:42.937 --> 00:34:44.651 kind of like using a new word.
00:34:44.721 --> 00:34:48.473 You gotta just do it once and then once you use it like
00:34:46.101 --> 00:34:46.331 Yeah.
00:34:48.473 --> 00:34:51.621 successfully, you're more apt to use it again.
00:34:52.511 --> 00:34:53.101 Captain.
00:34:53.191 --> 00:34:53.951 Completely agree.
00:34:54.221 --> 00:34:54.481 You know.
00:34:55.871 --> 00:34:56.261 Yeah.
00:34:56.261 --> 00:34:57.281 Yeah, this is pretty exciting.
00:34:56.311 --> 00:34:58.541 And start off with something simple, you know?
00:34:58.551 --> 00:34:59.641 Like, don't, don't try.
00:34:59.651 --> 00:35:02.028 Don't pick some big function that a lot of things depend on,
00:35:01.211 --> 00:35:03.761 Right, Yep.
00:35:02.028 --> 00:35:02.261 right?
00:35:02.271 --> 00:35:05.772 Go find a small one and then like here, here's the perfect
00:35:05.772 --> 00:35:06.661 example. Right.
00:35:06.731 --> 00:35:07.861 Get patient inventory.
00:35:08.211 --> 00:35:13.356 All it does is just make an API call and set the response in the
00:35:13.356 --> 00:35:13.831 state.
00:35:14.751 --> 00:35:15.191 That's it.
00:35:16.791 --> 00:35:20.171 So something like that, you know 10 lines, not too dangerous.
00:35:21.181 --> 00:35:21.641 Umm.
00:35:22.931 --> 00:35:27.201 And also keep in mind that you can leave out stuff that you
00:35:27.201 --> 00:35:28.481 know won't change.
00:35:28.651 --> 00:35:32.396 So for instance, set patient inventory res is always gonna be
00:35:32.396 --> 00:35:35.898 the same function from you state like the first time this
00:35:35.898 --> 00:35:36.381 renders.
00:35:36.831 --> 00:35:39.588 It's the same function as the last time it renders, it will
00:35:39.588 --> 00:35:40.461 never be different.
00:35:40.651 --> 00:35:45.435 So even though this calls it, I don't need to include it in the
00:35:45.435 --> 00:35:49.920 dependency array because it will never be a different state
00:35:49.920 --> 00:35:50.891 setter right?
00:35:50.901 --> 00:35:55.839 Like it will always be the same function in memory, so you don't
00:35:55.839 --> 00:36:00.549 have to put every single thing that a function could possibly
00:36:00.549 --> 00:36:05.183 use in the dependencies, only the things that would actually
00:36:05.183 --> 00:36:07.461 affect, like it working right?
00:36:07.471 --> 00:36:11.613 So like another one you see here is set running well, only one
00:36:11.613 --> 00:36:15.557 version of this function will ever exist in this component,
00:36:15.557 --> 00:36:15.951 right?
00:36:17.021 --> 00:36:19.771 Because ultimately, that's the set state thing too.
00:36:20.871 --> 00:36:25.736 Umm so I don't have to depend on step running in here because set
00:36:25.736 --> 00:36:29.715 running will never be a different updated function in
00:36:29.715 --> 00:36:30.231 memory.
00:36:31.821 --> 00:36:35.315 So hopefully that didn't put anyone's like brain over the
00:36:35.315 --> 00:36:36.881 top, but yeah, try it out.
00:36:36.891 --> 00:36:37.321 It's not.
00:36:37.331 --> 00:36:40.204 It's not as scary as you think, even though it's brand new, it's
00:36:40.204 --> 00:36:41.971 it's, it's really, really not that bad.
00:36:42.961 --> 00:36:47.650 Yeah, I I would say if you're working a front end task, you
00:36:44.231 --> 00:36:44.411 So.
00:36:47.650 --> 00:36:51.791 know give yourself 1015 minutes to just use it once.
00:36:51.861 --> 00:36:54.071 And then, yeah, I think you'll you'll probably use it more.
00:36:52.501 --> 00:36:52.691 Umm.
00:36:54.081 --> 00:36:55.071 That's myself included.
00:36:55.081 --> 00:36:57.900 I don't think I've ever written they use callback or use memo,
00:36:57.900 --> 00:36:59.421 but we should know how they work.
00:37:00.591 --> 00:37:00.921 Yeah.
00:37:00.961 --> 00:37:06.151 There they are useful so yeah.