1 00:00:02,560 --> 00:00:13,450 In this section, we are going to talk about context API where what is Context API and why do we need 2 00:00:13,450 --> 00:00:13,840 it? 3 00:00:14,140 --> 00:00:23,350 Before I explain that, before you can become a full stack web developer using React, we need to know 4 00:00:23,350 --> 00:00:33,700 how to manage state and we have what is called use state, which is a way of managing state in React. 5 00:00:34,000 --> 00:00:42,640 And also we have third party libraries like Redox, which is also a way of managing state. 6 00:00:42,820 --> 00:00:51,070 So Context API is a built in hook for state management in React. 7 00:00:51,370 --> 00:01:01,450 So if a familiar with Redux may be asking what is a differences between context API and Redux, I have 8 00:01:01,450 --> 00:01:03,070 used Redux for quite long. 9 00:01:03,070 --> 00:01:07,990 Likewise, context API both have the same logic. 10 00:01:07,990 --> 00:01:15,760 For example, if talked about reducers actions, they all share the same logic, but it's syntax that 11 00:01:15,760 --> 00:01:24,640 differs and for the syntax two four reduces is almost the same as redux unique redux if you want to 12 00:01:24,640 --> 00:01:28,090 build enterprise or large applications. 13 00:01:28,120 --> 00:01:32,800 Likewise Context API we can achieve the same concept. 14 00:01:33,040 --> 00:01:39,070 We also use context API to avoid what is called prop drilling. 15 00:01:39,070 --> 00:01:40,210 What does it mean? 16 00:01:40,210 --> 00:01:49,390 Let's say that we have ten component and we want a particular prop from component A down to the last 17 00:01:49,390 --> 00:01:50,290 component. 18 00:01:50,290 --> 00:01:58,600 Unless we pass that prop between these components before it can get to the final component. 19 00:01:58,930 --> 00:02:06,190 And also we add component responsibility is to render what is called gsx. 20 00:02:06,550 --> 00:02:13,090 So which means that we need to separate our data for the component. 21 00:02:13,090 --> 00:02:16,210 So let's see how this is going to help us. 22 00:02:16,570 --> 00:02:18,070 Let's explain more. 23 00:02:18,100 --> 00:02:26,680 Using this diagram, let's say that we are building an application with this component that is component 24 00:02:26,680 --> 00:02:29,170 A, that is a main component. 25 00:02:29,170 --> 00:02:37,810 And down we have component B and then component DX and the same component A, we can have component 26 00:02:37,840 --> 00:02:44,230 C, D and F and this is our component tree. 27 00:02:44,230 --> 00:02:53,980 And let's take it that we have a data code user is logged in and we want to display inside the component 28 00:02:53,980 --> 00:03:02,230 F we cannot pass indirectly from component A and then we skip the other component and then we pass in 29 00:03:02,230 --> 00:03:02,800 here. 30 00:03:02,920 --> 00:03:06,940 It will not work unless we pass it as a prop. 31 00:03:07,420 --> 00:03:16,180 So using what is called prop drilling, unless we pass the data to component C and then component C, 32 00:03:16,180 --> 00:03:25,900 also pass to component D, then finally to component F, these two components don't need that prop, 33 00:03:25,900 --> 00:03:33,880 but because of this component F, unless we pass it down, let's say that we have ten component unless 34 00:03:33,880 --> 00:03:41,380 we pass it as a prop before it gets to the last component or the component that we want, display that 35 00:03:41,380 --> 00:03:42,040 user. 36 00:03:42,160 --> 00:03:43,840 So we need to avoid this. 37 00:03:43,840 --> 00:03:47,470 That is why Context API comes into play. 38 00:03:47,560 --> 00:03:52,650 So for context API, we are going to have separation of consent. 39 00:03:52,690 --> 00:03:59,770 We are going to have our data sitting somewhere and any component that need to access this particular 40 00:03:59,770 --> 00:04:06,270 data, that component can access it directly without any intermediate components. 41 00:04:06,280 --> 00:04:13,090 So in the next video, let's get into code and let's see how we can implement context API.