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.