1 00:00:01,140 --> 00:00:05,010 ‫Okay, so we have just seen the power of state 2 00:00:05,010 --> 00:00:07,440 ‫by using the useState function, 3 00:00:07,440 --> 00:00:09,960 ‫but now let's get a better understanding 4 00:00:09,960 --> 00:00:13,053 ‫of how exactly state works in React. 5 00:00:14,310 --> 00:00:17,700 ‫And let's start from a fundamental React principle 6 00:00:17,700 --> 00:00:20,610 ‫that we have already discussed earlier. 7 00:00:20,610 --> 00:00:23,760 ‫So remember how we learned that in React 8 00:00:23,760 --> 00:00:26,610 ‫we do not manipulate the DOM directly 9 00:00:26,610 --> 00:00:30,660 ‫when we want to update a component's view, right? 10 00:00:30,660 --> 00:00:34,440 ‫So React is declarative, not imperative, 11 00:00:34,440 --> 00:00:37,860 ‫and so we never touch the DOM in our code. 12 00:00:37,860 --> 00:00:39,300 ‫But if that's the case, 13 00:00:39,300 --> 00:00:41,700 ‫then this leads us to the question of, 14 00:00:41,700 --> 00:00:44,760 ‫how do we update the component on the screen 15 00:00:44,760 --> 00:00:46,860 ‫whenever some data changes 16 00:00:46,860 --> 00:00:51,450 ‫or whenever we need to respond to some event like a click? 17 00:00:51,450 --> 00:00:52,560 ‫Now, we already know 18 00:00:52,560 --> 00:00:55,170 ‫that the answer to this question is state, 19 00:00:55,170 --> 00:00:59,520 ‫but here we are trying to derive it from first principles. 20 00:00:59,520 --> 00:01:02,580 ‫So anyway, to answer that question, 21 00:01:02,580 --> 00:01:06,420 ‫we need to understand another fundamental React principle, 22 00:01:06,420 --> 00:01:10,410 ‫which is the fact that React updates a component view 23 00:01:10,410 --> 00:01:13,920 ‫by re-rendering that entire component 24 00:01:13,920 --> 00:01:16,920 ‫whenever the underlying data changes. 25 00:01:16,920 --> 00:01:19,440 ‫Now, as soon as we will reach the section 26 00:01:19,440 --> 00:01:22,110 ‫about how React works behind the scenes, 27 00:01:22,110 --> 00:01:24,780 ‫we will learn exactly what actually happens 28 00:01:24,780 --> 00:01:28,410 ‫inside React when a component re-renders. 29 00:01:28,410 --> 00:01:32,190 ‫But for now, just know that re-rendering basically means 30 00:01:32,190 --> 00:01:35,430 ‫that React calls the component function again, 31 00:01:35,430 --> 00:01:38,850 ‫so each time the component is rendered. 32 00:01:38,850 --> 00:01:42,210 ‫So conceptually we can imagine this as React 33 00:01:42,210 --> 00:01:45,420 ‫removing the entire view and replacing it 34 00:01:45,420 --> 00:01:49,830 ‫with a new one each time a re-render needs to happen. 35 00:01:49,830 --> 00:01:54,240 ‫But again, we will learn exactly what happens later. 36 00:01:54,240 --> 00:01:57,120 ‫Now, React preserves the component state 37 00:01:57,120 --> 00:01:58,680 ‫throughout re-renders, 38 00:01:58,680 --> 00:02:01,710 ‫and so even though a component can be rendered 39 00:02:01,710 --> 00:02:04,740 ‫and re-rendered time and time again, 40 00:02:04,740 --> 00:02:07,170 ‫the state will not be reset 41 00:02:07,170 --> 00:02:11,070 ‫unless the component disappears from the UI entirely, 42 00:02:11,070 --> 00:02:14,400 ‫which is what we call unmounting. 43 00:02:14,400 --> 00:02:18,510 ‫Now speaking of state, it is when state is updated 44 00:02:18,510 --> 00:02:22,620 ‫that a component is automatically re-rendered. 45 00:02:22,620 --> 00:02:27,090 ‫So let's imagine that there is an event handler in the view, 46 00:02:27,090 --> 00:02:30,630 ‫for example, on a button that the user can click. 47 00:02:30,630 --> 00:02:33,480 ‫So the moment that button is clicked, 48 00:02:33,480 --> 00:02:36,990 ‫we can update a piece of state in our component 49 00:02:36,990 --> 00:02:41,040 ‫using the set function coming from the useState hook. 50 00:02:41,040 --> 00:02:44,880 ‫So just like we did in the last lecture, right? 51 00:02:44,880 --> 00:02:48,720 ‫Then when React sees that the state has been changed, 52 00:02:48,720 --> 00:02:51,720 ‫it'll automatically re-render the component, 53 00:02:51,720 --> 00:02:56,720 ‫which will result in an updated view for this component. 54 00:02:56,940 --> 00:02:59,100 ‫Or as a more real example, 55 00:02:59,100 --> 00:03:01,860 ‫we can look at the simple advice app 56 00:03:01,860 --> 00:03:05,970 ‫that we built right in the first lecture of the course. 57 00:03:05,970 --> 00:03:08,190 ‫So in that application, 58 00:03:08,190 --> 00:03:11,010 ‫each time we click the get advice button, 59 00:03:11,010 --> 00:03:15,180 ‫a new piece of advice is fetched from the API. 60 00:03:15,180 --> 00:03:17,130 ‫Then when that data arrives, 61 00:03:17,130 --> 00:03:20,550 ‫we store the data in the advice state variable, 62 00:03:20,550 --> 00:03:22,923 ‫so we update the advice state. 63 00:03:23,790 --> 00:03:25,110 ‫So let's imagine 64 00:03:25,110 --> 00:03:29,610 ‫that the new advice is quality beats quantity. 65 00:03:29,610 --> 00:03:32,190 ‫React will notice the state change 66 00:03:32,190 --> 00:03:34,200 ‫and re-render the component. 67 00:03:34,200 --> 00:03:36,510 ‫So it will remove the old one 68 00:03:36,510 --> 00:03:41,010 ‫and display a new updated component view on the screen. 69 00:03:41,010 --> 00:03:43,290 ‫And with this, I hope that the mechanics 70 00:03:43,290 --> 00:03:47,640 ‫of state in React are now really clear to you. 71 00:03:47,640 --> 00:03:52,140 ‫So the conclusion of all this is that as React developers, 72 00:03:52,140 --> 00:03:55,050 ‫whenever we want to update a component view, 73 00:03:55,050 --> 00:03:56,880 ‫we update its state. 74 00:03:56,880 --> 00:04:00,120 ‫And so React will then react to that update 75 00:04:00,120 --> 00:04:01,710 ‫and do its thing. 76 00:04:01,710 --> 00:04:06,660 ‫And in fact, this whole mechanism is so fundamental to React 77 00:04:06,660 --> 00:04:09,000 ‫that it's actually the reason 78 00:04:09,000 --> 00:04:12,870 ‫why React is called React in the first place. 79 00:04:12,870 --> 00:04:16,650 ‫So on a high level, moving from the component level 80 00:04:16,650 --> 00:04:21,540 ‫to the application level now, React reacts to state changes 81 00:04:21,540 --> 00:04:24,750 ‫by re-rendering the user interface. 82 00:04:24,750 --> 00:04:26,970 ‫That's the main thing that it does. 83 00:04:26,970 --> 00:04:31,770 ‫And therefore it was decided to call this library React. 84 00:04:31,770 --> 00:04:34,350 ‫And with this we have come full circle 85 00:04:34,350 --> 00:04:38,220 ‫from the first lecture about why frameworks exist. 86 00:04:38,220 --> 00:04:40,620 ‫There we learned that frameworks exist 87 00:04:40,620 --> 00:04:43,380 ‫to keep UI in sync with data. 88 00:04:43,380 --> 00:04:48,063 ‫And so now we have learned a bit better how React does that.