1 00:00:00,180 --> 00:00:01,060 Now, this is nice. 2 00:00:01,230 --> 00:00:07,180 So we're updating our document title each and every time we click on a button. 3 00:00:07,530 --> 00:00:10,550 And of course, we do that using the use. 4 00:00:11,280 --> 00:00:18,720 However, what if we would want to change our functionality a little bit around where we what if I wouldn't 5 00:00:18,720 --> 00:00:22,190 want to showcase but I have zero messages. 6 00:00:22,290 --> 00:00:23,640 What if I would want to do that? 7 00:00:23,640 --> 00:00:28,640 Only when essentially I have value bigger than zero. 8 00:00:28,920 --> 00:00:32,980 So I only want to showcase that if I have the actual messages. 9 00:00:33,040 --> 00:00:40,860 So what I'm trying to say is I would only want to run it when my value is bigger than zero, because 10 00:00:40,860 --> 00:00:48,390 at the moment notice, of course, we render the component and then sends usufruct runs after every 11 00:00:48,390 --> 00:00:58,080 render well, which we right away do, the functionality that is within the user and our national thinking 12 00:00:58,650 --> 00:01:07,650 would be something like this, where if value is bigger than zero, then of course we would want to 13 00:01:07,650 --> 00:01:08,310 run yours. 14 00:01:09,060 --> 00:01:10,820 Sounds pretty reasonable, right? 15 00:01:11,400 --> 00:01:20,820 But remember, seems like eternity ago when I talked about general rules and I said that we cannot we 16 00:01:20,820 --> 00:01:25,260 cannot place hooks as far as conditionals. 17 00:01:25,950 --> 00:01:33,630 So this work, we right away have a big fat complaint because we cannot call hooks conditionally. 18 00:01:33,960 --> 00:01:40,230 And at that time I said that it doesn't make sense for me to place a USB stick in the conditional. 19 00:01:40,230 --> 00:01:43,600 However, I will do that once we get to a use effect. 20 00:01:43,770 --> 00:01:50,850 And of course, we have finally arrived at the user, for example, which technically would make sense 21 00:01:50,850 --> 00:01:52,270 to place it in the conditional. 22 00:01:52,480 --> 00:01:56,670 However, we cannot do that because of the rules of the House. 23 00:01:56,970 --> 00:01:58,230 So just keep that in mind. 24 00:01:58,590 --> 00:02:02,210 Now, the question, of course, is, well, how we can fix that? 25 00:02:02,520 --> 00:02:10,030 And one of the ways how we can do that is by setting up if and else inside of the callback function. 26 00:02:10,530 --> 00:02:17,400 So the point of this video is to showcase that even though you cannot place hooks in the conditional, 27 00:02:17,640 --> 00:02:24,420 similarly how we work with a set function where we set up a conditional and then depending on the value, 28 00:02:24,630 --> 00:02:31,290 we called the set function with some specific value, the same thing we can do in the use effect. 29 00:02:31,710 --> 00:02:37,140 Where inside of that callback function, yes, we can set up a if an all statement. 30 00:02:37,410 --> 00:02:38,640 So how is that going to look like? 31 00:02:38,640 --> 00:02:47,620 Well, in here I could say if value is bigger than one, only then I would want to update document title. 32 00:02:47,970 --> 00:02:48,810 So what happens? 33 00:02:48,810 --> 00:02:51,630 Norrish on the initial render? 34 00:02:51,900 --> 00:02:55,890 Nothing happens even though we still call this user. 35 00:02:56,700 --> 00:02:57,780 So we still call it. 36 00:02:58,110 --> 00:03:04,230 However, in the years affecting the callback function, we have a conditional where I'm checking the 37 00:03:04,230 --> 00:03:10,810 value and I only would want to update document title if the value is bigger than one. 38 00:03:11,250 --> 00:03:14,250 So on our initial render, nothing happens. 39 00:03:14,250 --> 00:03:16,060 However, once I click the button. 40 00:03:16,380 --> 00:03:18,790 Now, of course, the value is one. 41 00:03:19,260 --> 00:03:20,940 So again, nothing happens. 42 00:03:21,190 --> 00:03:28,560 So I guess in this case we can either look for bigger or equals and you'll notice how now once the actual 43 00:03:28,800 --> 00:03:29,990 number is one. 44 00:03:30,270 --> 00:03:36,800 And of course, I'm also updating right away the title because it matches my condition. 45 00:03:37,230 --> 00:03:42,060 Hopefully that makes sense where we cannot place the hooks in the conditionals, something we already 46 00:03:42,060 --> 00:03:42,820 covered before. 47 00:03:43,090 --> 00:03:49,590 However, as far as setting up the conditionals within the callback function, yes, we can definitely 48 00:03:49,590 --> 00:03:50,040 do that. 49 00:03:50,250 --> 00:03:52,500 And it is not against the rules.