 All right, I think we're operational. Yeah, let me give it just a second. It's not quite nine o'clock yet But yeah, if you if you join say hi, I put a link to the code sandbox in there. So yeah Today is gonna be exciting again another day where I'll be doing stuff that I know nothing about So yeah, we got two minutes 45 seconds. Hey, Adam. Good morning. How are you doing this morning? Hello, John? Welcome. Welcome Starting just A handful of seconds. It's be fun Yeah, hit me up if you This is gonna be new territory for me. I'm not sure if we'll be able to make since these are like Performance-y things. I'm not sure that we'll be able to make out like great use of these But you know, you never know At least we might learn how they work It's always such a good reminder to turn these things off All right, welcome. Thank you so much for tuning in this morning. I'm glad you're here Today is gonna be another kind of bump around the edges day for me I am not too familiar with what we're gonna tackle today are so we did use effect on Monday or say use state on Monday Tuesday use effects use context I just threw those into a playlist if you wanted to watch any of those or missed them we did use reducer yesterday and Today I was I was hoping to look at these three now these are I'm doing good at them. Thank you for asking doing good I wish that y'all could see me like moments before I do this because I'm just like like brushing my teeth real fast Not that that matters here, but um just Wash my hair and getting getting ready real fast. Got myself some water another hydro flask. I Should really ask them if they do sponsorships for for these kinds of things Oh, yeah, yeah, you know, I always forget to do that the I'll click Adam says to I'll click the notifications I always forget to do that But yeah, that is brilliant. So it just kind of turns off the notifications. I have not built it into my muscle memory yet But maybe maybe now that you reminded me alive, I'll I'll think about it So yeah, so so we did we use reducer yesterday? That was very Educational for me because I am not one who uses reducers often, but I really did I really did like this This is really awesome And I could see how this would be significantly better than Kind of as we were talking about in use state that you can mask some of that API stuff It seems like use reducer would Kind of does that by default So like the expectation is that you are going to expose actions As opposed to like use state where you're gonna be just updating this one thing. So that that was super interesting to me So yeah, so today we're gonna focus on these three again I don't know what that is about and then these two are just kind of scheduling things for use effect things that In an app the size that we're building it might be almost impossible to determine how that scheduling happens But if you had a more robust app, maybe you would see a bigger difference Again, that's gonna be the case today, too Where we're not gonna actually see the performance difference from these things. Yeah, man hydro flask the best this one's great I had I had a white one of the what's this? This is a 32 ounce. I had the bigger one. It's like 40 ounce, I don't know it was slightly bigger and it was white and I loved it and I left it at a park And it sucks So I stole this one from my wife Yeah, so so this is what we're gonna focus on today These As far as what I've seen are pretty similar. They just have they're just called differently Which I thought was kind of interesting and then I've never even looked at use rough So I guess let's just go and order this morning and See see what we can learn So use callback so we would Set a variable that memoizes this callback And then it's kind of has that same type of signature so and the call use callback And it looks like it has like a similar signature as use use effect with this kind of array of Values as the second argument the ones to track for changes And so it returns a memoized callback. They have a link here, so I'm curious what that is. Let's follow that Um See in computing memoization or memoization is an optimization technique used primarily to speed up computer programs By storing the result of expensive function calls and returning the cash result when the same input occur Inputs occur again Memoization have also Well can't read this morning has also been used in other contexts and For purposes other than speed gains such as simple mutually recursive descendant parsing. Okay, so already I don't I'm already lost So yeah, so this is this parts for people smarter than me My understanding is this that basically you track the inputs and Then if like the inputs don't change then you know I mean if you have pure functions then you know that the results of this is going to be the same So you just return the answer from the previous time That's my understanding of memoization And that seems to be at least a decent mental model for the API that we have here So let's see so pass an inline callback an array of inputs. Okay, so it looks like this might be in this case mandatory Unlike optional and use effect which would make sense because If you're using this instead of just using the callback directly You're using it to memoize this that thing so you need to pass in the inputs Use callback will return a memoized version of the callback that only changes if one of the inputs has changed This is useful when passing callbacks to optimize children Components that rely on reference equality to prevent unnecessary renders Should component update now. I'm not typically like a big performance nut. So I actually didn't use should Component update a lot. I found that in my cases it caused more Debugging problems than it was worth again my my work is I work a lot with designers Um, and it was just a real debugging nightmare for them a lot of times using components that I had exposed with should component update I just kind of broke their mental model and like expectations Um, so I don't honestly use this one use this optimization a lot. Um, so I don't have a lot of context for you there So yeah, so again use callback, um the function Or an anonymous function that calls whatever our Functional or memoizing is um Is equivalent to use memo Okay, interesting. Yeah, so this is where the note on like use memo. So again, these just called slightly differently Um, which we will we'll tackle that one in a second Um, okay, cool. So a note regarding those inputs Um, the rate of inputs is not passed as arguments to the callback conceptually though That's what they represent every value referenced inside the callback should also appear in the inputs array in the future As sufficiently advanced compiler could create this array automatically. Oh, interesting. So Basically like the idea is that you would just use use callback and this chunk and then The compiler would add any of the arguments that you had. Um, that would be nice. Um That would be nice Um, it kind of makes me wonder if you could and this is this is stupid, but like if you could just take the reference And then have the second argument be the the things to apply onto that function um, but This is fine. Uh, and it's what we got. So I'm I'm more than happy with it Okay, cool. So I'm gonna pull that in and I'm gonna see how we can kind of tinker with it. Um So, let's see. I'm gonna take Use callback Use memo use wrap Okay, so What do we have here? Okay, so the way this is formed right now. I'm getting these little like, uh, eslan errors Um, would you mean to believe that I am supposed to Put it Inside of my function component like that. Uh, would you make sense? This is a hook. Um So those need to go inside of components. Um, unless they're inside of other functions Yeah, yeah, absolutely. Um, yeah adam says he likes how it's like simplified Where this like second thing is like if these things change then do the thing. Um, yeah, it's a really nice mental model and And I agree and I also Like you said, I like the symmetry between this and use effect. Um, so, you know as you learn to use one You know how to use the others. Um, it's it It's good. It's really good. They did a good job So use callback. Um, I think what I'm gonna Do right now is I mean, this is just kind of my like a default Kind of like super basic example of um Of anything is like having like a greeting component that has that takes, um name Or let's say it takes, uh, two names. So first What name first first name? Let me get more space here Yeah, and again, this is gonna be, um So as I had, um as I mentioned, um, this is not going to be I'm gonna show you how these things work or I'm gonna explore how these things work But this is not a good case for them. Um in Really what I would do in like real life is I would wait until I have a performance problem until I have like Found a performance problem or like use my profile and discover that something Could be improved and then I would add this I would never do something like this by default This is just to explore and I don't have a significantly large enough app to to explore. So um Again, so let's say also just for reference, um So I actually don't have these installed so you can actually watch me install these because I don't use this I use firefox typically um But this one was cleaner for for the display So, um, let's add this extension. So if you're not too familiar with this extension These are all of the react tools dev tools Um, and if we were on a react app Which uh, I don't think this one is We would see oh, wow. I got an error. Oh out of date version of react. Yes. That is true I should probably fix that Um, so when you uh install these dev tools you get this, um handy new thing Um, which isn't showing up here for whatever reason Interesting. So they have some new profiler tools and they're not showing up for me and I'm not totally sure why um But anyway, they would normally be Like right here So and I don't know if that's just because I'm on like using a production build Um, and it doesn't have access to those or what but um Yes, anyway, download those tools. There is a profiler in there I will probably do a lesson at some point about the profilers. Um, also A brian von gave a talk. He's the one who made it. Um at react. Um at react comp this year. Um, so this is again These things like use callback use memo, um are going to be things that you use only when you identify a problem Not not as a first line of defense, which I'm doing right now just to explore Um, okay, cool. So memo is callback. So let's just do something like like this. So let's take, um Let's just structure these off. So first name last name Um, then let's write a function called do something Oh What what happened? Uh Hey ruby Uh, I have no idea what combinations of keystrokes that I hit accidentally to make that happen But uh, I do apologize that sucked Um Wow bummer, okay. Yeah, I I think you're right. I think it needs to be in development I think maybe it doesn't profile the production build Oh outdated react. Uh, yeah, that could be it too. That could absolutely be it Um, I do remember them saying that you had to be on a certain version of react Um, I think that site is on 16 something. Um, if you have a site that it works with, um Post that in um, and then I'll open it up so we can show off the profile there. Um, I think yeah Both of those could be the reason though. I definitely need to get my ass in gear and Fix that Okay, so we'll start from the outside in very sorry that that happened So I'm not even gonna say name this time Oops Function greeting props Return, uh, so let's see. So we're gonna copy this out Again that goes in the component So memoized callback Um, and I think we would just call that here I just call back prop stop first stop last I guess the order probably doesn't matter here Okay, cool. Now. Let's um, let's define do something what we'll do is we're taking First and last and we're gonna Put those together like so Use callback. I gotta pull that off Okay, cool. Now. I didn't call this right. Um, so because this is actually a memoized function. So I think that if I call that Um, it should show up It does not What I do so cons memoize callback equals Oh, yeah dev mode dev mode Hmm, let's see. Did I spell anything wrong? Okay, so passing in first last Comes in here as props. I'm calling That function with so I'm giving it a function which calls this thing And changes if I any of these props change Get first and last and I'm returning this template literal string with first and last Interpolated out. Okay, let's Let's try something else first Okay, it should be working Interesting. Let's see if there's any help for me on the docs. Okay, so memoize callback Hmm I'm wondering if this is just not the right use for this Or not a Right example console log debugging Okay, so This is working. It's returning that value So when we log out do something of that that's great. So Let's take this whole memoization thing out for a second Um Let's just make sure the function works. So whoop. Okay. Okay, so do something wise callback Let's take these out So we take our inputs out Still nothing. Oh do I need to I've tried it recently and it works well when used with An input element. Oh interesting Oh Interesting. So should this be returned? Oh, so I'm wondering. Uh, so I guess this makes sense. So I guess the question is Maybe this is for Effects really so like so right now I'm using it to get a return Value. Um, so I have to add this in here, but I wonder if maybe it's for uh, memoizing Other effects that doesn't necessarily make sense Um because I would use if use effect for that Yeah, unfortunately the examples are a little bit sparse on what the ideal use of that is so I on change Okay, so john's saying that a good example is on change Use callback method Okay We can try that Yeah, let's try that. Why not got nothing but time type text I guess so we'll use this then with uh With state If you can send me john if you could send me a code uh code sandbox or whatever kind of a thing That might be a little bit easier if you don't mind me. Well mind sending me that Um, then I can open it. I can open the link up here. Okay, cool. So, um, let's come back to that Let's skip ahead to use memo. So, um, Yeah, so I so this is still an open question of my mind But I think use memo might be actually for what I'm trying to do here Um, so let's jump ahead to that for a second. We'll scoot back So returns a memoized value Pass a create function and array of inputs use memo will only Recompute the memoized value when one of the inputs is changed this optimization helps to avoid expensive calculations on every render So if no array is provided a new value be computed every time Okay, cool. No problem. Uh, that totally makes sense Awesome john posted the thing in uh, let's uh, I'll get that in just a second. Okay, so let's change this to, um Change what we got here to use memo I think maybe that is kind of a little bit more can do what I'm doing right here Use memo. Um, let's see. So Again, it takes the function. Oh, yeah So it doesn't have the block which Kind of makes me think that yeah, the other one is for other types of effects Like so I did token Yep, that's not right Check get that out of here Use memos not defined. Yep Use memo Memos So we'll call this full name And this one, but we don't have to call it's um, it's just kind of it rich We get a value implicitly from this, um, which is awesome So again, this would this would not be a very good use of this now This is going to re-render every time. I'm curious if we can test that um In a simple way or Re-doing something Um, and then kind of maybe I'll just use my Regular trick of putting this in a function um All in render Every second Set internal internal Okay, let's see what we got here Okay, so that is Re-computing every second as we expected Um, and so then what happens if we say props dot first And props dot last interesting Okay, cool. So that um works So another way we could test that out is that um Let's see. We'll hide this And then I'm going to render this Oh, nope See I'm going to render the greeting component directly Um, a way to see that this changed three times I think Is just to give it different names So let's try this That should only do once. Yep, cool. So we see that it's memoized So even though I'm calling render four times, um, it does that so if I change this Um, it should do it a couple times. Oh, yeah, so three times So it renders this it renders this change and then renders it back Um, if I do this again, it should be four times. Yep, cool Cool, cool, cool. So um, that is that is awesome. That's doing exactly what it says on the tin Which I'm pleased with. Um, so the nice thing about this about use memo Is that um, we can kind of just call it as just expect a value In response and so it it occurs to me now that this is what I wasn't thinking that use callback was doing Which it is not so So now for me, I know that Use memo is when I would want to get something as a value So if I had some like really crazy computation on these names That that would be that would be the case. Um, and it is possible that I could do like so so I have um Let's say I wanted to Like uppercase those and I have these extra functions and um, maybe I spit out Tens of thousands of names on a page. Actually, I wonder Yeah, and in any case, um Maybe we have like a form that's spitting out tens of thousands of names But then it's like it only re-renders when I like other parts of the data change We want to kind of hand we have a bunch of functions that Change the or capitalize things or whatever and we want to make sure that that only happens once for that part of it um That that could that could be a good use for that. Okay, cool. So let's jump into the, um, code sandbox that john sent us for The use callback See what we got here Okay, so that use state use callback and use effects. Um, and then let's jump down to the bottom We're rendering app Um, we're taking a Password set password on change and trim from use input with a default value of empty string Okay, cool. Uh, let's look at use input real quick. So we jump up to use input Uh empty string and options Okay So we have set uh, we have So let's say with the input, uh, which Uh, unless we've passed something in starts as an empty string, which I believe is what we're seeing here um Yep, cool. Um, so then we get these two we just structure these two values off of that password and set password um on change We're then See giving it a function To set the password With event target value um Now this is gonna Return a new function every time I think because we um aren't passing inputs into it. Um, that's fine Uh, let's see let trim equals use callback Oh, okay, so we're just Taking the input calling set password With a trimmed value. Okay, again with no, okay, cool. Um Return on change Passwords a password and trim. Okay, so we're returning kind of like an api for this thing. Um Okay, let's see what we got so trim Trims off extra white space. I think so if I tab off of this Yeah, cool. It takes off that extra white space. Oh It's like a os 10 feature we can So come back double that. Okay, cool. Yep. Gotcha. Gotcha. Um Okay, cool. So we have set password Oh, I see. Okay. So you're using use callback to memoize the set passwords Which makes sense. We don't have any way. I don't have any way of Getting in there To like to to log out what we're doing. Um, but that makes sense. Um, again, this is like one of those things where In any of these examples, we're gonna have our time actually seeing the result. Um Because this is this is really something you'd be doing in your profiler. Um, But okay, so I'm starting to I'm starting to see where this is like how this is taking shape Um where you would like have a callback that is like taking a value and then you're doing something with it um, so in this case, um What would you be putting in the Arrays like would you be putting this whole thing in there? So like e dot target dot value and i dot trim That seems that seems weird or I guess no Yeah, you wouldn't want to call that function to test To test the input because then you're calling that function anyway Um, it's yeah, so I guess we'd be putting i um And then yeah, uh ye dot oh, but we don't have access to that interesting um Right because this is just part of this this function It's not part of like we would need something in this scope So I guess maybe if the input doesn't change Yeah, I don't know that's a big question mark from my mind and I'm not sure that I have um, I think that maybe um In a future video, I would need to find something that was Unperformant that was that had these types of callbacks and use the profiler to actually dive into um Dive into why it was slow and use use callback to optimize those to to memorize those callbacks Um, yeah, so sorry that uh, sorry that this doesn't Feel like a like a clear clear win yet. Um, that is my faults But use memo. I think I think we were able to see visually that it does Like how those inputs track and that we can do something even in a small scale like that That we can kind of extract that Let's look at use ref Um Yeah, so I still have a big question mark on my head about use callback. Um, if if as you are Uh, kind of starting to play with this in your app. You find something that is really like an amazing example of it I'd love to see it. All right use ref So const ref container equals use ref of initial value So i'm really curious what this actually does Uh use ref returns a mutable ref object whose dot current property is initialized to the past argument initial value Okay Um, the returned object will persist for the full lifetime of the component All right, I definitely need to see that to To get a better understanding of what any of that means Um, let's see Yep, okay Right to the chat Okay, so I like that this one has an example at least so that's helpful. Um, a common use case is to access a child Imperatively, okay That I understand. Um, so when I need to uh do something imperatively with a child I would reach for use ref Um, or you do something imperatively with a child and a function component. I would use use ref Uh, note that use ref is useful for more than the ref attribute It's handy for keeping any mutable value around similar to how you'd use instance fields in classes Is there something like instance variables, so I'm just following these to kind of get a better sense of what's going on Uh, yes Ref object is a generic container whose current property is mutable. You can hold any value similar to instance property on a class You can write it from inside use effect Okay, hold on I can't right now. I can do it in just a little bit though. Okay, give me like 20 20 minutes. Okay Okay No, no, don't wait here Because we got we got a bunch of I'm working on something Hey, ruby Um, I'm sorry for the interruption. Um, let's see. So, okay, cool. So use effect Okay, cool. Let's um, I'll keep this open in case we need it Um, this is kind of interesting Yeah I'm definitely like when we're done. I'm gonna be diving into this because that seems very interesting. Um this Relevant to my interests. Um So I might actually maybe next week dive into a lot of this stuff Looks like this could be handy for like drag and drop um positioning business Okay, let's just see if uh, I can get it working Um, so yeah, so use ref. So this is a really nice simple example So I'm just going to copy and paste that over and tinker with it. Um, like we always do Um, let's see. So how robust is this text input with focus button? Perfect. Um, I will just Take this whole thing and then here in my app. I'll do text input with focus button Use ref is not defined. Yep use ref Okay, cool. So we have another input here um Michael awesome Okay Nice simple example here. So, um, let's Kind of tinker around with it. So on button click So this is what they were saying with the current so We got to call this current that so we have um, we have our reference and then we call dot current is like the the property that we access to call things on So Yeah, this example just kind of seems to do everything for me. So, um, so let's look at the lick from the outset. So we have input We're using ref and we Oh, gotcha. Okay, so we decide we define a variable Say use ref of null And then when this gets rendered, uh, I think that replaces that there Okay, cool. Um, let's do um Let's just do let's do another one of these. So let's say Let's implement it up from scratch Keep it around As a reference. Um, so but I just want to I need to get my I need to get my fingers on it. Um, so, uh, we're gonna return Saturn return um Right now we're just returning A fragment because there's going to be two elements nested in here And uh, let's put that input out first type equals Text And I'm having a I'm having a hard go over this morning. These ones are these ones are significantly harder to demo. So, um Yeah, thank you for for helping me out and sticking around. Um, so yeah, so, okay So we got a text input great and then we need a um button type button And this is going to be um focus the input Okay Okay, so now it's going to do nothing because it's not wired up to do anything So we can add an on click And this is going to handle click We have to define that function handle click And uh, what we need to what we need is we need a reference Reference that we would call focus on Now we don't have a reference yet. So this is where we would we would use Use ref now it looks from the example that they've given us that we can't just kind of like create the ref Like we wouldn't create the ref Dynamically here. We need to allow that to happen in render If we could create it dynamically here, we wouldn't need a we wouldn't have a use for ref at all Um, now I did I do know that there was a way that you used to be able to do this In function components Before I think I actually have a video of that um I think I might I'm going to find it and then like paste a link to it. Um It's a pretty old way of doing it, but functional components. I don't want to play on callback ref So this is a video on how you could get a ref to the um Uh the the DOM element um in a functional component or a function component uh a while ago kind of curious How that works Okay, so we would do like let element equals null And then we would pass in a ref and I'm kind of a similar approach honestly handle click We'd define that function Um, so so what does that look like in the end? Okay, cool. So we would Element dot inner text. Whoa Okay, so this was uh possible before but This um, you kind of had to do like a little bit of this and so it's nice that they have like a little bit They have a more thorough api and it sounds like this is kind of makes it able to be passed around to children a little bit better Um, so cool. So let's do that. So We're going to say let um Let's see. What was it uh input ref equals use ref for input ref dot current as we Let's I hear current property dot focus And then we need to look at me Cool That was not too painful I'd like to take this one step further Just for my own satisfaction of seeing how these things can be Oh Let's see actually that wouldn't that wouldn't make a difference I was going to say I was going to put this into kind of create a component for this But that wouldn't make a difference because I'd just be passing down the handler which would be called in this context anyway um Yeah, I don't know So yeah, so that's it. Um I'm trying to think of other uses if you can think of another use for it Let me know And before we before we close this thing down um I do apologize that this one was this this this whole set of this video kind of covered a bunch of apis It were I was kind of tempted to not do this one at all Just because I know that these are a little bit more like performancey oriented But anyway, it is nice to know this is um significantly better than the way that I had to do it before in my functional components um So I like I like that I like that it is like kind of well documented and well defined Um, let's see if they have that document forwarding refs Can I make a ref to a functional component? um Yeah, so anyway, so now So so in this doc right here is where they used to have that technique that I showed that I um kind of linked in the video And now they're saying to use the um that use imperative method took so anyway, that is uh Which is um, okay cool. So yeah, so this is Oh interesting So this is telling you to wrap that element focus in that um Really interesting. Okay, cool. Well, um, this was uh kind of Unsatisfying for me. Um, I apologize. I think um, I haven't decided on a theme for next week But I think next week is definitely going to be a lot more action oriented I have a whole list of hooks that I need to make for my work. So I was thinking that I might um do that um That sounds interesting. Um, we could do that The the idea that I was playing with is is that I would actually kind of write the hooks that we need to write um kind of setting up a mono repo to to um Kind of distribute all of those to our team Um, yeah, so I was thinking about doing that or I have a bunch of other stuff that it could be awesome to um I was thinking about I've been thinking a lot about Having a component uh workshop, uh, which I thought was a cool word that Brad Frost used for his thing. Um I'm kind of setting up a a like code sandbox type environment for um our components. Um, which would Kind of show different different uses have different demos and have kind of like a A flexi layout so you could see how things um, you know, various permutations and whatnot So, uh, anyway hit me up. Tell me what you'd like to see in these streams. Um, I'm going to be I'm kind of doing something completely different next Next week. So you can tell me what you want to see. Uh, anyway, uh, thanks for sticking around Um, if you want to see those uh next videos, whatever they end up being, uh, just subscribe And uh, or follow me on twitter and you'll see those kind of links go out. Um, anyway, yeah, thanks for sticking around I appreciate your time. Thanks for the help. Actually, um, john, um, and adam I appreciate your your feedback on all those. That was really, um, helpful. Um, but yeah, next time I want to find something a little bit better the demos a little bit better with the code that I have. Um Have an awesome friday and enjoy your weekend