1
00:00:00,240 --> 00:00:06,300
Once we get back our data essentially our products we might be tempted to use set products function

2
00:00:06,660 --> 00:00:11,820
to change the state value for the products from the empty array to whatever data we're getting back

3
00:00:12,090 --> 00:00:14,160
to whatever products we're getting back.

4
00:00:14,700 --> 00:00:19,200
And even though the first part is correct we are going to use said products.

5
00:00:19,230 --> 00:00:24,060
Please don't run the function right now because your application is going to crash and together we're

6
00:00:24,060 --> 00:00:25,100
gonna figure out why.

7
00:00:25,470 --> 00:00:32,040
Now first I'm gonna change right now my parameter from set products to just simply response response

8
00:00:32,100 --> 00:00:36,010
and then instead of console logging when I set up the curly braces.

9
00:00:36,150 --> 00:00:40,170
And then within the function body we're gonna write whatever logic we would want.

10
00:00:40,200 --> 00:00:45,360
And like I said since I wouldn't want to run right away my function I'm just gonna set up a comment

11
00:00:45,450 --> 00:00:48,580
and then I'm going to write set products.

12
00:00:48,990 --> 00:00:51,900
And then in here we're gonna write response data.

13
00:00:51,900 --> 00:00:54,600
So we have a data property within data property.

14
00:00:54,600 --> 00:00:55,740
We have our product.

15
00:00:55,890 --> 00:00:58,060
And then of course we're going to run set products.

16
00:00:58,170 --> 00:01:04,050
However before we run it we're going to have to set up our second argument because if we just uncommon

17
00:01:04,050 --> 00:01:10,080
this and right away invoke set products our application is gonna crash and let's figure out why.

18
00:01:10,620 --> 00:01:16,550
Well use fact he is going to run after every render by default.

19
00:01:16,890 --> 00:01:23,760
But what triggers a re render in react while if the state changes or the proper change and what are

20
00:01:23,760 --> 00:01:25,220
we doing with said products.

21
00:01:25,380 --> 00:01:27,420
Are we changing the state value.

22
00:01:27,420 --> 00:01:31,980
So essentially what happens is we have use effect when we have a callback function.

23
00:01:32,070 --> 00:01:38,670
Now that callback function runs once the component months correct but within a callback function we

24
00:01:38,670 --> 00:01:42,020
call a set product that updates the state.

25
00:01:42,090 --> 00:01:43,800
Now that triggers a rear.

26
00:01:44,280 --> 00:01:47,620
And then once we re render again recall the callback function.

27
00:01:47,640 --> 00:01:53,940
So essentially we set up a infinite loop of actually requests and then of course our application crashes.

28
00:01:53,940 --> 00:01:59,790
So in order to avoid that we would need to use our second argument that we can pass right after the

29
00:01:59,790 --> 00:02:03,970
callback function where we pass in the array of values or dependencies.

30
00:02:03,990 --> 00:02:10,330
So essentially we don't want our callback function to run by default after every render we're going

31
00:02:10,330 --> 00:02:13,410
to set rules of when this callback function runs.

32
00:02:13,560 --> 00:02:20,130
And if we just pass in the empty array this callback function is just going to run once once the component

33
00:02:20,130 --> 00:02:20,420
mounts.

34
00:02:20,490 --> 00:02:23,060
And that's exactly what we're looking for in this case.

35
00:02:23,070 --> 00:02:29,940
So let me save it and now let me um comment the response data and if we're gonna head over now to a

36
00:02:29,940 --> 00:02:30,710
product.

37
00:02:30,820 --> 00:02:31,530
Yes.

38
00:02:31,600 --> 00:02:36,480
And by the way we can also navigate to a page if I'm going to control log the product you're going to

39
00:02:36,480 --> 00:02:36,780
see that.

40
00:02:36,780 --> 00:02:38,790
Now we're not going to have an empty array.

41
00:02:38,850 --> 00:02:42,510
Instead we're going to have array of whatever products we got back.

42
00:02:42,960 --> 00:02:48,420
So let me console log the products and we're going to see in a console that initially we had an empty

43
00:02:48,420 --> 00:02:53,440
array and then once the component mounted our product complex mountain.

44
00:02:53,520 --> 00:02:57,300
And then of course we're getting back our data with all our products.