Once we get back our data essentially our products we might be tempted to use set products function
to change the state value for the products from the empty array to whatever data we're getting back
to whatever products we're getting back.
And even though the first part is correct we are going to use said products.
Please don't run the function right now because your application is going to crash and together we're
gonna figure out why.
Now first I'm gonna change right now my parameter from set products to just simply response response
and then instead of console logging when I set up the curly braces.
And then within the function body we're gonna write whatever logic we would want.
And like I said since I wouldn't want to run right away my function I'm just gonna set up a comment
and then I'm going to write set products.
And then in here we're gonna write response data.
So we have a data property within data property.
We have our product.
And then of course we're going to run set products.
However before we run it we're going to have to set up our second argument because if we just uncommon
this and right away invoke set products our application is gonna crash and let's figure out why.
Well use fact he is going to run after every render by default.
But what triggers a re render in react while if the state changes or the proper change and what are
we doing with said products.
Are we changing the state value.
So essentially what happens is we have use effect when we have a callback function.
Now that callback function runs once the component months correct but within a callback function we
call a set product that updates the state.
Now that triggers a rear.
And then once we re render again recall the callback function.
So essentially we set up a infinite loop of actually requests and then of course our application crashes.
So in order to avoid that we would need to use our second argument that we can pass right after the
callback function where we pass in the array of values or dependencies.
So essentially we don't want our callback function to run by default after every render we're going
to set rules of when this callback function runs.
And if we just pass in the empty array this callback function is just going to run once once the component
mounts.
And that's exactly what we're looking for in this case.
So let me save it and now let me um comment the response data and if we're gonna head over now to a
product.
Yes.
And by the way we can also navigate to a page if I'm going to control log the product you're going to
see that.
Now we're not going to have an empty array.
Instead we're going to have array of whatever products we got back.
So let me console log the products and we're going to see in a console that initially we had an empty
array and then once the component mounted our product complex mountain.
And then of course we're getting back our data with all our products.