1 00:00:00,990 --> 00:00:03,240 ‫A very common beginner question 2 00:00:03,240 --> 00:00:07,380 ‫or sometimes even an interview question is this, 3 00:00:07,380 --> 00:00:11,220 ‫what's the difference between state and props? 4 00:00:11,220 --> 00:00:14,730 ‫Well, we actually already learned almost everything 5 00:00:14,730 --> 00:00:16,590 ‫to answer that question, 6 00:00:16,590 --> 00:00:19,440 ‫but let's still make the difference between state 7 00:00:19,440 --> 00:00:22,440 ‫and props crystal clear in this lecture, 8 00:00:22,440 --> 00:00:23,730 ‫which will also serve 9 00:00:23,730 --> 00:00:26,523 ‫as a nice summary to this entire section. 10 00:00:28,500 --> 00:00:32,640 ‫So as we already know, state is internal data. 11 00:00:32,640 --> 00:00:34,050 ‫So data that is owned 12 00:00:34,050 --> 00:00:36,900 ‫by the component in which it is declared, 13 00:00:36,900 --> 00:00:38,250 ‫and we can see that nicely 14 00:00:38,250 --> 00:00:42,060 ‫in this small example with two components. 15 00:00:42,060 --> 00:00:45,780 ‫Now, on the other hand, props is external data. 16 00:00:45,780 --> 00:00:48,900 ‫So data that is owned by the parent component, 17 00:00:48,900 --> 00:00:52,350 ‫and you can think of props as function parameters. 18 00:00:52,350 --> 00:00:55,260 ‫So as a communication channel between parent 19 00:00:55,260 --> 00:00:57,840 ‫and child components where parents 20 00:00:57,840 --> 00:01:00,630 ‫can pass data into children. 21 00:01:00,630 --> 00:01:03,030 ‫State on the other hand can be thought of 22 00:01:03,030 --> 00:01:04,920 ‫as the component's memory 23 00:01:04,920 --> 00:01:07,530 ‫because it can hold data over time, 24 00:01:07,530 --> 00:01:10,590 ‫so across multiple re-renders. 25 00:01:10,590 --> 00:01:14,130 ‫Now state can be updated by the component itself 26 00:01:14,130 --> 00:01:16,260 ‫and as we already know, this will then 27 00:01:16,260 --> 00:01:20,220 ‫cause the component to be re-rendered by React. 28 00:01:20,220 --> 00:01:22,050 ‫Therefore, we use this mechanism 29 00:01:22,050 --> 00:01:25,440 ‫of state to make components interactive. 30 00:01:25,440 --> 00:01:28,590 ‫On the other side props work very differently. 31 00:01:28,590 --> 00:01:31,950 ‫They are read only, so they cannot be modified 32 00:01:31,950 --> 00:01:34,980 ‫by the component that is receiving them. 33 00:01:34,980 --> 00:01:36,930 ‫However, and this is something 34 00:01:36,930 --> 00:01:38,910 ‫that we haven't learned before, 35 00:01:38,910 --> 00:01:42,960 ‫when the child component receives new updated props, 36 00:01:42,960 --> 00:01:46,980 ‫that will actually also cause the component to re-render, 37 00:01:46,980 --> 00:01:50,970 ‫and let's actually analyze that here in this code example. 38 00:01:50,970 --> 00:01:54,600 ‫So one of the props that was passed to question 39 00:01:54,600 --> 00:01:56,190 ‫is called "Up Votes", 40 00:01:56,190 --> 00:01:59,580 ‫and that up votes variable is actually state 41 00:01:59,580 --> 00:02:02,040 ‫and the parent component, right? 42 00:02:02,040 --> 00:02:04,560 ‫It's created using the useState Hook 43 00:02:04,560 --> 00:02:08,340 ‫and therefore up votes is in fact state. 44 00:02:08,340 --> 00:02:11,880 ‫Now if this piece of state is updated, of course 45 00:02:11,880 --> 00:02:14,370 ‫the question component who owns the state 46 00:02:14,370 --> 00:02:15,990 ‫will be re-rendered, 47 00:02:15,990 --> 00:02:18,840 ‫but it makes sense that the child component 48 00:02:18,840 --> 00:02:22,260 ‫who basically receives that state as props, 49 00:02:22,260 --> 00:02:24,990 ‫should also be re-rendered right? 50 00:02:24,990 --> 00:02:27,990 ‫Because how else would the button component 51 00:02:27,990 --> 00:02:32,283 ‫be kept in sync with the state that it received as a prop? 52 00:02:33,210 --> 00:02:36,960 ‫So in conclusion, whenever a piece of state is passed 53 00:02:36,960 --> 00:02:39,990 ‫as a prop, when that state updates, 54 00:02:39,990 --> 00:02:42,540 ‫both components are re-rendered. 55 00:02:42,540 --> 00:02:45,180 ‫So both the component owning the state 56 00:02:45,180 --> 00:02:48,630 ‫and the component receiving the state as a prop, 57 00:02:48,630 --> 00:02:52,530 ‫and so this is a very important connection between state 58 00:02:52,530 --> 00:02:55,590 ‫and props that you should keep in mind. 59 00:02:55,590 --> 00:02:59,010 ‫Now finally, while state is used by developers 60 00:02:59,010 --> 00:03:01,170 ‫to make components interactive, 61 00:03:01,170 --> 00:03:04,020 ‫props are used to give the parent component 62 00:03:04,020 --> 00:03:07,860 ‫the ability to configure their child components. 63 00:03:07,860 --> 00:03:10,200 ‫So basically props can be seen 64 00:03:10,200 --> 00:03:12,780 ‫as settings in child components, 65 00:03:12,780 --> 00:03:16,830 ‫which the parent component can define as they wish, 66 00:03:16,830 --> 00:03:18,780 ‫and that's it. 67 00:03:18,780 --> 00:03:21,030 ‫So if you ever get asked the difference 68 00:03:21,030 --> 00:03:23,910 ‫between state and props in a job interview, 69 00:03:23,910 --> 00:03:26,733 ‫I sure hope that you're going to nail it.