1 00:00:00,180 --> 00:00:05,880 And the last thing that I would want to showcase, just like I promised, there's another use case for 2 00:00:05,880 --> 00:00:09,810 use called back, and that is essentially when we're fetching data. 3 00:00:10,050 --> 00:00:13,980 And an awesome example is over here. 4 00:00:13,980 --> 00:00:21,300 If we check the terminal, we can see that I have this morning where react use of fact has a missing 5 00:00:21,300 --> 00:00:26,670 dependency get product either included or removed from dependency. 6 00:00:26,700 --> 00:00:26,940 Right. 7 00:00:27,300 --> 00:00:32,080 And of course, that is, in my custom, the use feature. 8 00:00:32,430 --> 00:00:34,730 So let's say we'll navigate over there. 9 00:00:34,740 --> 00:00:41,490 We have our custom hooks and then we have our use, which and I can see that the react is complaining 10 00:00:41,490 --> 00:00:42,240 that, hey, listen. 11 00:00:43,120 --> 00:00:50,260 You have got product function over here, so you need to add it as dependency, but before you jump 12 00:00:50,260 --> 00:00:57,660 over it and add it as a dependency, let me warn you that you will create infinite loop y. 13 00:00:58,150 --> 00:00:59,410 Well, let's see. 14 00:00:59,740 --> 00:01:01,690 We have get products. 15 00:01:02,050 --> 00:01:02,500 Correct. 16 00:01:02,770 --> 00:01:04,570 And what is this get products doing. 17 00:01:05,210 --> 00:01:12,710 Well it is calling set products so it sets the stage value which triggers the array render. 18 00:01:12,730 --> 00:01:21,220 So if Al Gore here and you falsey get product is my dependency the first time I'll call the get product, 19 00:01:21,220 --> 00:01:22,320 I'll change that value. 20 00:01:22,630 --> 00:01:30,510 And then since this needs to rerun every time, of course, when we change something about this value 21 00:01:30,790 --> 00:01:39,520 well, since get products once we added there, since it will get created from the scratch once we render, 22 00:01:39,760 --> 00:01:45,310 that's why it will create a infinite loop, because again, the same scenario like we had or here with 23 00:01:45,320 --> 00:01:53,090 index where we have the add to cart each and every time you render you create that function from scratch. 24 00:01:53,380 --> 00:01:55,820 So if this gets added to dependency. 25 00:01:55,840 --> 00:02:03,760 Right, technically each and every time when it gets created from scratch, well, you will render the 26 00:02:03,760 --> 00:02:04,320 component. 27 00:02:04,570 --> 00:02:08,560 Now in function, though, you'll also change the state value. 28 00:02:08,830 --> 00:02:11,040 So you'll have that infinite loop. 29 00:02:11,290 --> 00:02:12,760 And what is the solution? 30 00:02:12,940 --> 00:02:16,210 Well, remember, we have our used callback, right? 31 00:02:16,480 --> 00:02:21,160 So we can go here with use callback and then I can set it equal. 32 00:02:21,490 --> 00:02:22,720 I can say use. 33 00:02:23,930 --> 00:02:26,210 Knock over here what? 34 00:02:26,960 --> 00:02:33,620 So let me wrap everything and now I need to say, well, one, I would want to create that function. 35 00:02:33,970 --> 00:02:39,220 Of course, the answer is when I have a you are all changed. 36 00:02:39,590 --> 00:02:46,490 So once the real change changes, yeah, please recreate that function from the scratch. 37 00:02:46,730 --> 00:02:54,440 And of course, once we have this setup, I can bravely go to use fact and just add my get products 38 00:02:55,160 --> 00:02:55,580 like me. 39 00:02:55,580 --> 00:03:03,170 Reemphasize the point where previously before we added this huge callback, if we simply would add this 40 00:03:03,470 --> 00:03:07,130 product, we would get a infinite loop. 41 00:03:07,430 --> 00:03:07,910 Why? 42 00:03:08,180 --> 00:03:12,170 Because of this would get created each and every time. 43 00:03:12,440 --> 00:03:18,430 Now we only create a new function once the euro changes. 44 00:03:18,680 --> 00:03:22,840 And of course, as a result, we're not getting this infinite loop. 45 00:03:22,850 --> 00:03:27,440 So that would be another use case for use callback hoc.