1 00:00:00,510 --> 00:00:02,610 Our initial setup works well. 2 00:00:02,969 --> 00:00:05,850 Now we're updating the local state. 3 00:00:06,060 --> 00:00:12,420 But before we can set up the entire functionality, we need to cover the bounce. 4 00:00:12,420 --> 00:00:12,990 Gotcha. 5 00:00:12,990 --> 00:00:17,190 In React and I already kind of talked about it in the previous video. 6 00:00:17,400 --> 00:00:23,700 So let's just try to set up the bounce, the basic setup, and then see where's the gotcha and what 7 00:00:23,700 --> 00:00:24,660 would be the fix. 8 00:00:24,930 --> 00:00:27,090 We're going to start by creating a function. 9 00:00:27,390 --> 00:00:29,490 And let's call this the bounce. 10 00:00:30,060 --> 00:00:31,200 That's our function. 11 00:00:31,200 --> 00:00:34,040 And essentially we want to return another function, correct? 12 00:00:34,050 --> 00:00:37,650 That's going to be our eventual setup. 13 00:00:37,740 --> 00:00:40,440 So before we do anything, let's just log. 14 00:00:41,370 --> 00:00:46,560 The bounce and then let's return that function, Let's say your function. 15 00:00:46,650 --> 00:00:52,770 And then in that function, like I said, eventually we'll run this set local search. 16 00:00:52,980 --> 00:00:55,380 And as you can see, it's looking for event. 17 00:00:55,620 --> 00:01:00,900 So since this is the function that we're returning, we need to pass here the event as well. 18 00:01:00,900 --> 00:01:04,050 And then let's just take this functionality again. 19 00:01:04,140 --> 00:01:10,020 First, we'll just try to do it like we did in vanilla jazz, and then we'll see the gotcha that we 20 00:01:10,020 --> 00:01:15,300 need to be aware of since we're working in React or not anymore in vanilla and jazz. 21 00:01:15,330 --> 00:01:18,000 And now, just like before, what do we want to do? 22 00:01:18,030 --> 00:01:20,340 We want to go with the bounce and invoke it. 23 00:01:20,340 --> 00:01:21,000 Correct. 24 00:01:21,540 --> 00:01:28,290 So we have the bounce function we have over here log and see when basically we're calling it, we invoke 25 00:01:28,290 --> 00:01:33,600 it right from the get go, and then we return a function that's going to be invoked technically every 26 00:01:33,600 --> 00:01:35,130 time we click, correct. 27 00:01:35,220 --> 00:01:39,750 So let's save it and let's see how many times we'll have that bounce in a console. 28 00:01:40,850 --> 00:01:47,420 So let me go back console and now notice I have a bunch of the bounces and then pretty much every time 29 00:01:47,420 --> 00:01:49,600 I'll type, what are we doing? 30 00:01:49,610 --> 00:01:52,250 We are setting the state value, correct? 31 00:01:52,430 --> 00:01:54,050 What happens when we trigger you? 32 00:01:54,060 --> 00:01:56,630 State we trigger re render. 33 00:01:57,050 --> 00:02:03,560 So basically, every time we will invoke this the bounds and that's not what we want because we want 34 00:02:03,560 --> 00:02:06,230 to clear eventually that timeout. 35 00:02:06,500 --> 00:02:08,120 This is very, very important. 36 00:02:08,270 --> 00:02:09,800 Now how we can fix that? 37 00:02:09,800 --> 00:02:11,870 We can use use memo. 38 00:02:12,670 --> 00:02:16,210 So use memo is only going to run this once. 39 00:02:17,110 --> 00:02:24,610 And essentially it's going to get back this function and then we'll pass this function as a callback. 40 00:02:25,300 --> 00:02:32,470 So the code is going to look something like this where we're going to go to const and then optimized. 41 00:02:33,290 --> 00:02:37,940 So as the naming is really up to you, but I'm going to go with optimized. 42 00:02:38,790 --> 00:02:39,870 The bounce. 43 00:02:39,990 --> 00:02:43,440 And then we go with use memo, which we just imported. 44 00:02:43,440 --> 00:02:45,000 And it's looking for two things. 45 00:02:45,000 --> 00:02:51,330 It's looking for the function that's going to be invoked. 46 00:02:51,420 --> 00:02:56,940 And basically we also have the dependency array, just like with use effect, for example. 47 00:02:56,970 --> 00:02:59,220 And in my case, I'm going to leave this empty. 48 00:02:59,220 --> 00:03:01,220 So I only want to run this once. 49 00:03:01,230 --> 00:03:08,070 And then as far as the callback function from that callback function, I want to return whatever I get 50 00:03:08,070 --> 00:03:10,320 back when I invoked the bounds again. 51 00:03:10,320 --> 00:03:15,930 Hopefully it's clear by now that what I'm getting back from that the bounce is this function. 52 00:03:17,110 --> 00:03:19,270 This is where we'll have all our logic. 53 00:03:19,630 --> 00:03:23,380 But the key here is I only want to get it once. 54 00:03:23,500 --> 00:03:27,430 Essentially, I only want to run that the bounce one time. 55 00:03:27,430 --> 00:03:27,940 That's it. 56 00:03:27,940 --> 00:03:33,010 When the application loads, we run that the bounce and then we get the callback function and that's 57 00:03:33,010 --> 00:03:36,270 where we get all the goodies. 58 00:03:36,280 --> 00:03:39,660 So let me keep scrolling and then we'll change this around. 59 00:03:39,670 --> 00:03:43,540 We're not going to invoke the bounce directly in a handle change. 60 00:03:43,720 --> 00:03:47,050 We'll go with optimised and then the bounce. 61 00:03:47,050 --> 00:03:54,010 So this is proper callback function and now let's go back and now once we refresh, check it out. 62 00:03:54,010 --> 00:03:57,520 We only have it once and we can keep typing. 63 00:03:57,520 --> 00:03:58,540 Everything is correct. 64 00:03:58,540 --> 00:04:02,110 We're updating the state value, but the key here is that that's it. 65 00:04:02,110 --> 00:04:08,410 We have only one the bounce in the console, which is awesome because up next, I want to set up that. 66 00:04:09,120 --> 00:04:11,670 Time out, and then I want to clear it. 67 00:04:12,210 --> 00:04:17,160 So just like in the vanilla setup and I think I'm going to remove the lock, I don't think you need 68 00:04:17,160 --> 00:04:17,820 it anymore. 69 00:04:18,060 --> 00:04:21,690 Let's go with let and then timeout ID. 70 00:04:22,110 --> 00:04:23,190 That's the first step. 71 00:04:23,400 --> 00:04:24,600 And then in here. 72 00:04:25,460 --> 00:04:26,720 In the return. 73 00:04:27,520 --> 00:04:31,080 First, what I want to do is set up the local search. 74 00:04:31,090 --> 00:04:32,630 So set local search. 75 00:04:32,650 --> 00:04:35,560 I want to keep on updating the local value. 76 00:04:35,770 --> 00:04:36,760 That is correct. 77 00:04:37,030 --> 00:04:42,370 But we also want to clear a timeout, the previous one, if there was one. 78 00:04:42,370 --> 00:04:43,790 So we want to clear that one. 79 00:04:43,810 --> 00:04:45,550 We'll pass in the timeout. 80 00:04:46,120 --> 00:04:48,940 And then lastly, we need to set up that new timeout. 81 00:04:49,510 --> 00:04:53,260 So what do we want to do in that one second, 2 seconds or whatever? 82 00:04:53,500 --> 00:04:58,210 Well, remember, we have that context variable, correct. 83 00:04:58,210 --> 00:04:59,660 And how we were accessing it. 84 00:04:59,680 --> 00:05:05,500 We were going with handle change and the name is equal to event the target name, and then the value 85 00:05:05,500 --> 00:05:07,510 is event that target that value. 86 00:05:08,020 --> 00:05:10,920 So we have set local search, we have clear timeout. 87 00:05:10,930 --> 00:05:14,990 So now we're clearing the previous one and now we want to set up the new one, Right? 88 00:05:15,010 --> 00:05:17,380 So again, we need to go with timeout ID. 89 00:05:17,410 --> 00:05:20,680 So that's the ID that we'll use in the next. 90 00:05:21,830 --> 00:05:24,710 Run basically the next time we invoke this function. 91 00:05:24,710 --> 00:05:30,440 So let's go with a set timeout and then let's passing that callback function. 92 00:05:30,740 --> 00:05:36,620 So now we need to decide in how long and how long we want to run this one. 93 00:05:36,860 --> 00:05:39,250 Well, in my case, I'm going to go with one second. 94 00:05:39,260 --> 00:05:42,180 So one second after the last keystroke. 95 00:05:42,230 --> 00:05:43,670 And what do we want to do here? 96 00:05:43,700 --> 00:05:46,370 Well, like I said, we want to go with this handle change. 97 00:05:47,060 --> 00:05:50,330 So instead of invoking this on every keystroke. 98 00:05:50,420 --> 00:05:52,340 Now, wait for the last one. 99 00:05:52,760 --> 00:05:56,270 Then we'll wait for one more second, and then we will invoke it. 100 00:05:56,690 --> 00:05:58,700 So again, this is really up to you. 101 00:05:58,730 --> 00:06:00,720 You can go here with search. 102 00:06:00,740 --> 00:06:03,500 Just make sure that it's actually your state value. 103 00:06:04,660 --> 00:06:11,230 Because this will always be search regardless, just make sure that there is no typo and it matches 104 00:06:11,230 --> 00:06:14,080 or you can keep it as a random targeted name. 105 00:06:14,080 --> 00:06:17,380 Since in here the name are going to search so I can leave it like that. 106 00:06:17,740 --> 00:06:23,110 And again, the gotcha here is that since we're passing this event, we'll always have that event, 107 00:06:23,110 --> 00:06:24,370 that target, that value. 108 00:06:24,640 --> 00:06:26,220 But don't make this mistake. 109 00:06:26,230 --> 00:06:32,680 Don't go with local search, because technically you could say, well, these one should match, right? 110 00:06:32,680 --> 00:06:35,050 Because we're updating the local state. 111 00:06:35,350 --> 00:06:42,100 Yeah, we're updating the local state, but we're getting the value when we return this function. 112 00:06:42,460 --> 00:06:44,100 So what is the value initially? 113 00:06:44,110 --> 00:06:46,420 Well, initially it is empty string. 114 00:06:46,420 --> 00:06:47,470 Hopefully this is clear. 115 00:06:47,470 --> 00:06:51,400 So now we can go with even that target value. 116 00:06:52,000 --> 00:06:56,560 And lastly, let's also not forget about clear filters functionality. 117 00:06:57,470 --> 00:06:59,690 Since we switched to local search. 118 00:07:00,340 --> 00:07:09,610 Now we want to set local search equal to an empty string right before we clear filters in handle submit. 119 00:07:09,790 --> 00:07:14,110 And as a result of all these acrobatics. 120 00:07:15,150 --> 00:07:16,770 If we go to the console. 121 00:07:17,500 --> 00:07:22,420 Well, notice that let's say I keep typing and then only at the very end. 122 00:07:23,130 --> 00:07:23,910 I got this one. 123 00:07:23,910 --> 00:07:24,990 I got this search. 124 00:07:25,410 --> 00:07:34,740 So unlike previously where we were setting up requests for every letter or when we were just delaying 125 00:07:34,740 --> 00:07:37,890 it with is loading, now we just bounce it. 126 00:07:38,460 --> 00:07:41,070 Now we delay the execution. 127 00:07:41,930 --> 00:07:45,200 By one second after the last keystroke. 128 00:07:45,230 --> 00:07:46,730 Hopefully this was clear. 129 00:07:47,000 --> 00:07:51,440 I know this is somewhat of a more complex topic for sure. 130 00:07:51,590 --> 00:07:56,780 And also, keep in mind that you don't have to create this function from the scratch each and every 131 00:07:56,780 --> 00:07:56,990 time. 132 00:07:57,020 --> 00:07:59,510 Like I said, there is a. 133 00:08:00,270 --> 00:08:02,100 Function right away in the low dash. 134 00:08:02,100 --> 00:08:04,290 So you can just imported that, you can execute it. 135 00:08:04,320 --> 00:08:08,700 Of course, you need to take a look at the docs, what they require, but you can actually pass in whatever 136 00:08:08,700 --> 00:08:13,040 functionality you want to run and you also can pass in how long and all that. 137 00:08:13,050 --> 00:08:15,300 I just thought that it's very important. 138 00:08:16,010 --> 00:08:23,630 When we do this for the first time, that we clearly understand the main principles of the bonds. 139 00:08:23,630 --> 00:08:28,330 And I guess the biggest gotcha with React is the fact that you get those re renders. 140 00:08:28,340 --> 00:08:30,590 It's not like previously in vanilla Juice. 141 00:08:31,220 --> 00:08:37,880 So in here we need to make sure we use that use memo and then we just get whatever value we get back 142 00:08:37,880 --> 00:08:38,870 from the bonds. 143 00:08:39,260 --> 00:08:40,880 And only once. 144 00:08:40,880 --> 00:08:43,460 Only when the application loads.