Init Callback

[00:00] All right, let's make our function, getQueryParam, and we're going to take this stuff, move it up, return initial query, and then we can put this right in there. Dun-dun-dun-dun. This is functionally equivalent to a function. Call the function.

[00:17] But, yeah, we just stick the function in there, and now we don't have to worry about this running. So we could add a console.log, hello, and if we initialize this to have a query, cat, dog, that totally works, no problem. If we look at our console right here, we get hello,

[00:36] but as we make changes, we're not going to get that hello again. And, yeah, if we actually change this to actually call the function, then you notice that's going to call every single time, and that's unnecessary because we only care about the first initial time. So that's what the optimization is for.

[00:53] It's to just make it so that you're not computing the initial value a whole bunch of times. You just compute it the one time that it's actually used, and then the rest of the times, other renders, the function's not called.

[01:09] We could also, just for the fun of it, stick this right in here directly. That also works just fine, and I sometimes do that as well, just stick the function right in there. You're going to be allocating space and memory for that function. It'll get garbage collected. It'll be fine.

[01:26] Not a big problem either way, but in this case, we're extracting it because we're actually going to be using this function pretty soon. So there you go. That is the lazy initializer for useState.

[00:00] There's one more thing we need to learn about with use state and this initial value that we're passing here. And that is that it has a special capability for performance optimization. And not just performance, but yeah, mostly it's for performance reasons.

[00:16] And what it can do is solve this particular problem. So let's talk about this calculate initial value here. So we have our initial values based on whatever this calculate initial value thing is doing. Let's pretend for a second that doing that is very expensive.

[00:34] Maybe it is parsing a giant JSON object, like just an enormous JSON object or something. Or it's like a string of JSON is parsing that to calculate this initial value. Maybe it's computing a Fibonacci sequence, or it's computing pi out to 100 decibels, whatever.

[00:53] It's doing something that is going to be computationally expensive. Because React is going to call our function every time whenever we update this value, then this computation is going to happen every time. Where we call the function again, calculate initial value, here's our initial value, pass it to the first argument

[01:12] of use state, and then proceed. But remember that the initial value only matters on the initial render. Thereafter, it's whatever gets passed to set value. And so having this computation every single render after the first is unnecessary because it's

[01:31] going to be ignored after that initial render. So that is kind of wasteful. So what you can do instead is you can say, hey, use state, here's a function that you can call to get that initial value. And so if we turn this into a function and then call get initial value in there,

[01:49] or calculate initial value, now React is going to only call this function whenever it's necessary to get that initial value. Let me rewrite this a little bit just to make it a tiny bit more clear. Here's our initial value. And we'll say initialVal as a return.

[02:06] So React will re-render our components. We'll pass it this function again that does this computation. But because this is not the initial render, React doesn't bother calling it. And therefore, we don't bother calling this, which is the expensive thing. So this is just a simple optimization

[02:23] to avoid having to perform a computation unnecessarily after the initial render. Now, I'll just add a little caveat to this that if what you're doing is computationally expensive, maybe find a way to make that faster anyway because it is going to be called in the initial render. And if it's really that slow, then maybe it's

[02:42] not a good thing to do on the initial render either. But at least this allows us to offload a little bit of work on subsequent renders, which I think is a win. So we're going to be doing this in our app here for computing that initial value of our search term

[03:01] by turning this into a function that we can then call when we need that initial value. And we don't have to bother creating the search params and getting a search param or the query param unnecessarily because we only actually need that the first time. So put it in a function. React will only call it on the first time. Then you don't bother creating that variable

[03:20] every single time you render. So that is your job. Put that in a function. We'll see you when you're done.

Learn React hooks to add interactivity to your apps and build dynamic websites. You'll learn the core React hooks including useState, useEffect, and useRef.

React Hooks

React Hooks

Transcript

Init Callback

Transcript