1 00:00:01,170 --> 00:00:02,850 ‫With the context provider 2 00:00:02,850 --> 00:00:07,050 ‫and value now in place, let's consume the context value 3 00:00:07,050 --> 00:00:09,990 ‫in multiple components and get rid 4 00:00:09,990 --> 00:00:13,653 ‫of all the annoying props that we have in our app. 5 00:00:15,210 --> 00:00:18,240 ‫And let's actually start by removing props 6 00:00:18,240 --> 00:00:21,390 ‫from one component at a time. 7 00:00:21,390 --> 00:00:23,880 ‫So starting here with the header 8 00:00:23,880 --> 00:00:26,670 ‫let's get rid of all of this 9 00:00:26,670 --> 00:00:30,030 ‫so that we can then recreate the same functionality 10 00:00:30,030 --> 00:00:33,930 ‫only by reading the value out of the context. 11 00:00:33,930 --> 00:00:38,190 ‫So as we save this now we will get tons of errors here 12 00:00:38,190 --> 00:00:40,620 ‫because for now these components, 13 00:00:40,620 --> 00:00:43,323 ‫of course still rely on the props. 14 00:00:44,670 --> 00:00:47,880 ‫But anyway, moving now into the header component 15 00:00:47,880 --> 00:00:51,570 ‫where we just removed those props from. 16 00:00:51,570 --> 00:00:53,430 ‫Let's see if this component 17 00:00:53,430 --> 00:00:56,373 ‫actually does need some data from the context. 18 00:00:58,110 --> 00:01:02,340 ‫So here we can remove all these props. 19 00:01:02,340 --> 00:01:05,490 ‫And so if all we have is props, then it means 20 00:01:05,490 --> 00:01:09,090 ‫that this component itself doesn't need any data. 21 00:01:09,090 --> 00:01:11,850 ‫So any value out of the context. 22 00:01:11,850 --> 00:01:13,470 ‫But actually it does 23 00:01:13,470 --> 00:01:17,730 ‫because here we have this onClear Posts prop, 24 00:01:17,730 --> 00:01:20,910 ‫which again this component really needs. 25 00:01:20,910 --> 00:01:24,090 ‫And so therefore we now need to get this 26 00:01:24,090 --> 00:01:27,870 ‫onClear Posts function from the context. 27 00:01:27,870 --> 00:01:30,480 ‫So of course, let's remove all the props there 28 00:01:30,480 --> 00:01:33,450 ‫because we are no longer receiving props. 29 00:01:33,450 --> 00:01:36,250 ‫And instead, let's now read 30 00:01:37,350 --> 00:01:39,813 ‫this function right here from the context. 31 00:01:41,220 --> 00:01:45,750 ‫So to do that, it's time to meet yet another React hook. 32 00:01:45,750 --> 00:01:48,603 ‫And this one is simply called useContext. 33 00:01:50,610 --> 00:01:53,973 ‫So make sure that you import it from React. 34 00:01:55,140 --> 00:01:56,860 ‫So just like this 35 00:01:58,260 --> 00:02:00,900 ‫because it is indeed another function 36 00:02:00,900 --> 00:02:03,750 ‫that is coming from the React library. 37 00:02:03,750 --> 00:02:05,640 ‫And then here what we need to do 38 00:02:05,640 --> 00:02:09,300 ‫is to pass in the entire context object. 39 00:02:09,300 --> 00:02:10,420 ‫So that's PostContext 40 00:02:11,640 --> 00:02:16,350 ‫and not PostContext.provider or dot consumer 41 00:02:16,350 --> 00:02:19,863 ‫which also exists, but really only PostContext. 42 00:02:21,690 --> 00:02:24,420 ‫So this will then return something 43 00:02:24,420 --> 00:02:29,420 ‫and let's just call that X for now and take a look at it. 44 00:02:29,730 --> 00:02:31,680 ‫Now this is not going to work 45 00:02:31,680 --> 00:02:34,470 ‫because of all the errors that we have here. 46 00:02:34,470 --> 00:02:37,860 ‫So let's just comment all of this out 47 00:02:37,860 --> 00:02:41,550 ‫which you don't have to do, but this is just to show you 48 00:02:41,550 --> 00:02:44,520 ‫what this hook here actually returns. 49 00:02:44,520 --> 00:02:48,180 ‫And so here we can see that it does basically 50 00:02:48,180 --> 00:02:52,773 ‫return the entire value that we passed into the context. 51 00:02:54,600 --> 00:02:57,030 ‫So this object right here. 52 00:02:57,030 --> 00:02:59,400 ‫So the result of the useQuery hook 53 00:02:59,400 --> 00:03:03,390 ‫is exactly this value that we passed in here. 54 00:03:03,390 --> 00:03:06,900 ‫And so we can then de-structure that here 55 00:03:06,900 --> 00:03:10,620 ‫and basically take out only the part that we want. 56 00:03:10,620 --> 00:03:13,503 ‫So that's unClearPosts in this case. 57 00:03:15,840 --> 00:03:19,770 ‫Okay, but that of course still gives us errors 58 00:03:19,770 --> 00:03:22,590 ‫and that's because results and search posts 59 00:03:22,590 --> 00:03:25,143 ‫of course also rely on some props. 60 00:03:26,460 --> 00:03:28,050 ‫So let's move on here 61 00:03:28,050 --> 00:03:32,613 ‫and let's also give them their value from the context. 62 00:03:34,050 --> 00:03:37,110 ‫So here let me just place a comment, 63 00:03:37,110 --> 00:03:40,470 ‫just to complete our sequence. 64 00:03:40,470 --> 00:03:43,260 ‫So one, two, and now three 65 00:03:43,260 --> 00:03:48,260 ‫which is consuming the context value. 66 00:03:49,320 --> 00:03:51,420 ‫And so this is then the third step 67 00:03:51,420 --> 00:03:54,390 ‫of what we need to do when we use the context. 68 00:03:54,390 --> 00:03:57,480 ‫And so now all we need to do is the same thing 69 00:03:57,480 --> 00:04:00,213 ‫in all the components that need the data. 70 00:04:01,140 --> 00:04:06,140 ‫So here what we need is searchQuery and set searchQuery 71 00:04:08,340 --> 00:04:11,133 ‫which we are going to get from useContext. 72 00:04:13,050 --> 00:04:17,590 ‫So PostContext, and that's not yet it 73 00:04:20,250 --> 00:04:24,180 ‫because our next component 74 00:04:24,180 --> 00:04:27,750 ‫that is also included in the header 75 00:04:27,750 --> 00:04:31,440 ‫so search posts or actually results, 76 00:04:31,440 --> 00:04:34,860 ‫so results also needs a prop 77 00:04:34,860 --> 00:04:37,950 ‫that was passed into the header component. 78 00:04:37,950 --> 00:04:40,230 ‫So let's grab that here as well, 79 00:04:40,230 --> 00:04:42,990 ‫which is in this case just posts. 80 00:04:42,990 --> 00:04:44,913 ‫So as we can see down here, 81 00:04:46,620 --> 00:04:50,160 ‫so useContext, PostContext 82 00:04:50,160 --> 00:04:53,070 ‫give it a save and, beautiful. 83 00:04:53,070 --> 00:04:55,053 ‫Now we are back to working. 84 00:04:55,920 --> 00:04:58,780 ‫So let's see our component tree here again 85 00:04:59,910 --> 00:05:01,920 ‫and can make this really large 86 00:05:01,920 --> 00:05:05,820 ‫because the application is not really that important. 87 00:05:05,820 --> 00:05:09,420 ‫So what matters is that we post in the value 88 00:05:09,420 --> 00:05:14,040 ‫into the context provider, which we can actually see here. 89 00:05:14,040 --> 00:05:16,230 ‫And then for example here 90 00:05:16,230 --> 00:05:21,230 ‫in the results, we can see that through the Context hook, 91 00:05:21,570 --> 00:05:24,360 ‫we get access to all the data here. 92 00:05:24,360 --> 00:05:27,930 ‫So even though we only read the posts data 93 00:05:27,930 --> 00:05:32,930 ‫here we can still see the entire content of the Context. 94 00:05:33,300 --> 00:05:36,660 ‫So the entire value, but what really matters here 95 00:05:36,660 --> 00:05:39,030 ‫is that we got the posts data 96 00:05:39,030 --> 00:05:41,460 ‫into this really nested component 97 00:05:41,460 --> 00:05:44,430 ‫without having to pass in any props. 98 00:05:44,430 --> 00:05:48,420 ‫And so that's exactly the functionality of the context API 99 00:05:48,420 --> 00:05:52,320 ‫that we learned at the very first lecture of this section. 100 00:05:52,320 --> 00:05:56,250 ‫So this posts data is basically now being broadcasted 101 00:05:56,250 --> 00:06:00,300 ‫by this provider and injected into the results 102 00:06:00,300 --> 00:06:03,570 ‫without ever having to pass through the header. 103 00:06:03,570 --> 00:06:07,410 ‫And so the prop drilling really is gone, 104 00:06:07,410 --> 00:06:10,470 ‫at least for that part because 105 00:06:10,470 --> 00:06:13,950 ‫as you see we still have a few props here. 106 00:06:13,950 --> 00:06:17,790 ‫Now, actually, I want to leave this for you as a challenge. 107 00:06:17,790 --> 00:06:21,720 ‫So I want you to do what we just did, which is to remove 108 00:06:21,720 --> 00:06:24,600 ‫all of the props and all of the components, 109 00:06:24,600 --> 00:06:26,550 ‫and then simply use the context value 110 00:06:26,550 --> 00:06:28,740 ‫to give each component access 111 00:06:28,740 --> 00:06:31,560 ‫to the data that it actually needs. 112 00:06:31,560 --> 00:06:34,380 ‫So pause the video now and then meet me back here 113 00:06:34,380 --> 00:06:37,113 ‫in a minute where I will give you the solution. 114 00:06:39,150 --> 00:06:44,150 ‫Okay, so let's just cut everything here. 115 00:06:45,600 --> 00:06:49,833 ‫So all the props, we don't need them anymore. 116 00:06:53,700 --> 00:06:55,840 ‫This main component here really 117 00:06:56,820 --> 00:06:59,370 ‫doesn't need any of this data. 118 00:06:59,370 --> 00:07:02,880 ‫So all it did with this props was to pass it down 119 00:07:02,880 --> 00:07:07,110 ‫into these other components, and the same even for this one. 120 00:07:07,110 --> 00:07:10,473 ‫So even this post component doesn't really do anything. 121 00:07:11,310 --> 00:07:15,810 ‫So it doesn't need the posts data. 122 00:07:15,810 --> 00:07:19,650 ‫Who needs the post data is this list component. 123 00:07:19,650 --> 00:07:21,633 ‫So let's go there actually. 124 00:07:22,890 --> 00:07:27,890 ‫And so let's give it depost data. 125 00:07:28,920 --> 00:07:33,920 ‫So destructuring the result of the useContext hook. 126 00:07:37,170 --> 00:07:40,683 ‫So PostContext, okay. 127 00:07:41,610 --> 00:07:44,940 ‫And here we don't even get any error. 128 00:07:44,940 --> 00:07:45,930 ‫And since we're here 129 00:07:45,930 --> 00:07:49,983 ‫let's just also add dysfunction right here. 130 00:07:51,600 --> 00:07:56,243 ‫So on at post useContext, PostContext, 131 00:08:00,240 --> 00:08:04,230 ‫and yeah, then let's move back up 132 00:08:04,230 --> 00:08:06,033 ‫because here we have another one. 133 00:08:08,238 --> 00:08:11,290 ‫So this one also doesn't need the prop benefits 134 00:08:12,270 --> 00:08:17,270 ‫that we now get that it was on at post 135 00:08:18,210 --> 00:08:19,760 ‫from useContext. 136 00:08:22,770 --> 00:08:25,053 ‫And I think that's actually it. 137 00:08:26,070 --> 00:08:27,780 ‫So let's just check. 138 00:08:27,780 --> 00:08:31,080 ‫And indeed, none of our components now 139 00:08:31,080 --> 00:08:33,210 ‫receive props anymore. 140 00:08:33,210 --> 00:08:37,230 ‫And notice how much cleaner here is our JSX. 141 00:08:37,230 --> 00:08:39,030 ‫I mean, we still have this button here, 142 00:08:39,030 --> 00:08:42,960 ‫which is kind of ugly, and which we could actually extract 143 00:08:42,960 --> 00:08:44,700 ‫into its own component. 144 00:08:44,700 --> 00:08:48,210 ‫And so if you want to do that, feel free to take this 145 00:08:48,210 --> 00:08:50,790 ‫and probably also this effect. 146 00:08:50,790 --> 00:08:52,530 ‫And so then this whole thing here 147 00:08:52,530 --> 00:08:54,720 ‫becomes even more clean. 148 00:08:54,720 --> 00:08:58,410 ‫And of course, it's not only about being clean, 149 00:08:58,410 --> 00:09:02,250 ‫so it also makes the components 150 00:09:02,250 --> 00:09:04,950 ‫a bit more independent and standalone. 151 00:09:04,950 --> 00:09:09,450 ‫So take for example this list component right here. 152 00:09:09,450 --> 00:09:14,070 ‫If before we wanted to reuse this list somewhere else 153 00:09:14,070 --> 00:09:17,130 ‫then we would have to first pass the props 154 00:09:17,130 --> 00:09:20,490 ‫to that place where we wanted to reuse it. 155 00:09:20,490 --> 00:09:23,220 ‫So let's just as an example say 156 00:09:23,220 --> 00:09:25,890 ‫that for some reason we wanted this list 157 00:09:25,890 --> 00:09:28,863 ‫inside the footer, so why not? 158 00:09:30,360 --> 00:09:34,800 ‫So just like this, and since we are now using context 159 00:09:34,800 --> 00:09:36,840 ‫this is really all we have to do. 160 00:09:36,840 --> 00:09:38,460 ‫So we can give it a safe. 161 00:09:38,460 --> 00:09:39,730 ‫And if we then come here 162 00:09:40,650 --> 00:09:44,230 ‫we will see that inside the footer 163 00:09:45,840 --> 00:09:48,573 ‫well, can't really see that right now. 164 00:09:50,730 --> 00:09:53,253 ‫But well, let's see it here in our component tree. 165 00:09:54,120 --> 00:09:56,550 ‫So we see that here inside the footer 166 00:09:56,550 --> 00:09:59,070 ‫we have indeed now this list 167 00:09:59,070 --> 00:10:02,130 ‫and all we had to do was to place it there 168 00:10:02,130 --> 00:10:06,000 ‫so we didn't have to pass any props first to the footer 169 00:10:06,000 --> 00:10:09,630 ‫and then into the list, which we would have to do before 170 00:10:09,630 --> 00:10:13,410 ‫when we didn't have to context API yet, right? 171 00:10:13,410 --> 00:10:16,830 ‫And so this list was a bit less reusable 172 00:10:16,830 --> 00:10:18,840 ‫and less standalone. 173 00:10:18,840 --> 00:10:22,500 ‫But again, with this, we can now just place this anywhere 174 00:10:22,500 --> 00:10:25,650 ‫even if the parent component doesn't have access 175 00:10:25,650 --> 00:10:27,500 ‫to the posts prop. 176 00:10:27,500 --> 00:10:29,283 ‫So which is the case right here. 177 00:10:31,148 --> 00:10:34,080 ‫Okay, so with this we finished 178 00:10:34,080 --> 00:10:36,630 ‫actually implementing our context 179 00:10:36,630 --> 00:10:41,220 ‫and as you see, it was actually pretty easy, right? 180 00:10:41,220 --> 00:10:44,280 ‫We can however do a couple of improvements 181 00:10:44,280 --> 00:10:48,390 ‫to the way that we use the context API in practice. 182 00:10:48,390 --> 00:10:50,793 ‫And so let's do that in the next video.