1 00:00:01,110 --> 00:00:02,910 ‫Let's start this section 2 00:00:02,910 --> 00:00:06,480 ‫by understanding what the Context API is 3 00:00:06,480 --> 00:00:08,493 ‫and what problem it solves. 4 00:00:09,840 --> 00:00:11,310 ‫And we're actually gonna start 5 00:00:11,310 --> 00:00:15,000 ‫with the problem that the Context API solves. 6 00:00:15,000 --> 00:00:17,790 ‫So let's say that in our application, 7 00:00:17,790 --> 00:00:19,890 ‫we need to pass some state 8 00:00:19,890 --> 00:00:23,190 ‫into multiple deeply nested child components 9 00:00:23,190 --> 00:00:26,610 ‫just like in this fictional example. 10 00:00:26,610 --> 00:00:31,050 ‫So in this application, the components B and F 11 00:00:31,050 --> 00:00:34,650 ‫both need access to the count state variable. 12 00:00:34,650 --> 00:00:37,980 ‫And so that's the task that we need to solve. 13 00:00:37,980 --> 00:00:41,040 ‫Now, the first solution that comes to mind is 14 00:00:41,040 --> 00:00:45,480 ‫to simply pass the state variable as props all the way down 15 00:00:45,480 --> 00:00:50,010 ‫until it reaches the components that need the count state. 16 00:00:50,010 --> 00:00:52,860 ‫However, this then creates a new problem, 17 00:00:52,860 --> 00:00:56,310 ‫because passing props down through multiple levels 18 00:00:56,310 --> 00:01:01,140 ‫of the tree can quickly become cumbersome and inconvenient. 19 00:01:01,140 --> 00:01:05,040 ‫And we actually talked about exactly this problem before, 20 00:01:05,040 --> 00:01:08,520 ‫a problem that we call prop drilling. 21 00:01:08,520 --> 00:01:12,060 ‫Now, back then I told you that one good solution 22 00:01:12,060 --> 00:01:16,980 ‫to prop drilling is to compose components in a better way. 23 00:01:16,980 --> 00:01:20,490 ‫However, doing so is not always possible. 24 00:01:20,490 --> 00:01:22,710 ‫And so component composition 25 00:01:22,710 --> 00:01:25,710 ‫with the children prop as we have learned before 26 00:01:25,710 --> 00:01:29,040 ‫doesn't always solve this problem. 27 00:01:29,040 --> 00:01:32,790 ‫So instead, what we need is actually a way 28 00:01:32,790 --> 00:01:37,050 ‫of directly passing the state from a parent component 29 00:01:37,050 --> 00:01:40,170 ‫into a deeply nested child component. 30 00:01:40,170 --> 00:01:44,310 ‫So that would immediately solve the problem, right? 31 00:01:44,310 --> 00:01:48,750 ‫Well, it turns out that React has actually thought of that, 32 00:01:48,750 --> 00:01:53,750 ‫and has given us the Context API to do just that. 33 00:01:53,820 --> 00:01:57,600 ‫So the Context API basically allows components 34 00:01:57,600 --> 00:02:02,460 ‫everywhere in the tree to read state that a context shares. 35 00:02:02,460 --> 00:02:06,063 ‫But so let's now look at that in a bit more detail. 36 00:02:07,020 --> 00:02:10,920 ‫So first of all, the Context API is a system 37 00:02:10,920 --> 00:02:14,700 ‫to pass data throughout the application without having 38 00:02:14,700 --> 00:02:18,330 ‫to manually pass props down the component tree. 39 00:02:18,330 --> 00:02:22,650 ‫It essentially allows us to broadcast global state, 40 00:02:22,650 --> 00:02:24,960 ‫so state that should be available 41 00:02:24,960 --> 00:02:28,683 ‫to all the child components of a certain context. 42 00:02:29,640 --> 00:02:31,290 ‫Now, in order to learn about 43 00:02:31,290 --> 00:02:33,840 ‫the different parts of this system, 44 00:02:33,840 --> 00:02:37,143 ‫let's bring back the component tree from the previous slide. 45 00:02:38,010 --> 00:02:42,720 ‫So the first part of the Context API is the provider, 46 00:02:42,720 --> 00:02:44,880 ‫which is a special React component 47 00:02:44,880 --> 00:02:49,880 ‫that gives all child components access to a so-called value. 48 00:02:50,220 --> 00:02:54,210 ‫And this provider can sit everywhere in the component tree, 49 00:02:54,210 --> 00:02:57,093 ‫but it's common to place it at the very top. 50 00:02:57,960 --> 00:03:00,960 ‫Now, this value that I was talking about 51 00:03:00,960 --> 00:03:03,780 ‫is the data that we want to make available, 52 00:03:03,780 --> 00:03:07,920 ‫so the data that we want to broadcast through the provider. 53 00:03:07,920 --> 00:03:12,270 ‫And so we pass this value into the provider. 54 00:03:12,270 --> 00:03:16,110 ‫Usually, this value contains one or more state variables 55 00:03:16,110 --> 00:03:18,990 ‫and even some setter functions. 56 00:03:18,990 --> 00:03:21,360 ‫Finally, we have consumers, 57 00:03:21,360 --> 00:03:24,390 ‫which are all the components that read the value 58 00:03:24,390 --> 00:03:27,090 ‫that we passed into the provider. 59 00:03:27,090 --> 00:03:28,350 ‫So in other words, 60 00:03:28,350 --> 00:03:32,700 ‫consumers are the components that subscribe to the context, 61 00:03:32,700 --> 00:03:37,050 ‫and so they're able to read the value from the context, 62 00:03:37,050 --> 00:03:39,600 ‫and we can create as many consumers 63 00:03:39,600 --> 00:03:43,380 ‫as we want for any context provider. 64 00:03:43,380 --> 00:03:47,580 ‫Now okay, so that's how the Context API works. 65 00:03:47,580 --> 00:03:51,750 ‫But what happens when the context value actually changes, 66 00:03:51,750 --> 00:03:54,360 ‫so when it gets updated? 67 00:03:54,360 --> 00:03:57,990 ‫Well, this is where the interesting part begins. 68 00:03:57,990 --> 00:04:01,380 ‫So whenever the context value is updated, 69 00:04:01,380 --> 00:04:04,830 ‫all consumers will automatically be re-rendered, 70 00:04:04,830 --> 00:04:09,000 ‫so all the components that are reading the context value. 71 00:04:09,000 --> 00:04:12,750 ‫So, again, whenever the value that is shared 72 00:04:12,750 --> 00:04:14,940 ‫is updated in some way, 73 00:04:14,940 --> 00:04:18,240 ‫the provider will immediately notify the consumers 74 00:04:18,240 --> 00:04:19,980 ‫about the value change, 75 00:04:19,980 --> 00:04:23,790 ‫and it'll then re-render those components. 76 00:04:23,790 --> 00:04:27,750 ‫And so this means that now we have a new way 77 00:04:27,750 --> 00:04:31,470 ‫in which component instances can be re-rendered. 78 00:04:31,470 --> 00:04:33,030 ‫So we already knew 79 00:04:33,030 --> 00:04:36,690 ‫that state updates re-render a component instance, 80 00:04:36,690 --> 00:04:38,790 ‫but now we know that an update 81 00:04:38,790 --> 00:04:43,110 ‫to a context value also re-renders a component as long 82 00:04:43,110 --> 00:04:47,493 ‫as that component is subscribed to that exact context. 83 00:04:48,570 --> 00:04:53,520 ‫All right, and that is the fundamentals of the Context API 84 00:04:53,520 --> 00:04:56,670 ‫and how it solves the prop drilling problem. 85 00:04:56,670 --> 00:05:00,960 ‫We can create as many contexts as we want in our application 86 00:05:00,960 --> 00:05:05,070 ‫and place them wherever we want in the component tree. 87 00:05:05,070 --> 00:05:07,650 ‫And so all this allows for new 88 00:05:07,650 --> 00:05:10,470 ‫and interesting ways of managing state 89 00:05:10,470 --> 00:05:13,413 ‫as we're gonna explore throughout this section.