1 00:00:01,200 --> 00:00:03,750 ‫In order for the rendering process to work 2 00:00:03,750 --> 00:00:06,330 ‫in the way that we just learned before, 3 00:00:06,330 --> 00:00:10,140 ‫our render logic needs to follow some simple rules. 4 00:00:10,140 --> 00:00:14,032 ‫So, let's look at these rules in this lecture 5 00:00:14,032 --> 00:00:19,032 ‫but first of all, what actually is render logic? 6 00:00:19,050 --> 00:00:21,210 ‫Well, in order to understand that, 7 00:00:21,210 --> 00:00:23,491 ‫let's actually take a look at the two types 8 00:00:23,491 --> 00:00:27,630 ‫of logic that we can write in React components. 9 00:00:27,630 --> 00:00:32,190 ‫So, that's render logic and event handler functions. 10 00:00:32,190 --> 00:00:36,000 ‫So, render logic is basically all the code that lifts 11 00:00:36,000 --> 00:00:39,150 ‫at the top level of your component functions 12 00:00:39,150 --> 00:00:42,102 ‫and that participates in describing how the view 13 00:00:42,102 --> 00:00:46,440 ‫of a certain component instance should look like. 14 00:00:46,440 --> 00:00:51,000 ‫So in this code example, there is a lot of render logic. 15 00:00:51,000 --> 00:00:54,151 ‫So we have these two lines of code at a top level 16 00:00:54,151 --> 00:00:58,770 ‫and then also the return block where our component returns 17 00:00:58,770 --> 00:01:00,840 ‫it's JSX. 18 00:01:00,840 --> 00:01:03,383 ‫So these describe exactly how the component 19 00:01:03,383 --> 00:01:06,390 ‫will be displayed on the screen. 20 00:01:06,390 --> 00:01:09,690 ‫However, if we look closely, we can identify 21 00:01:09,690 --> 00:01:13,590 ‫yet another piece of render logic here, even though 22 00:01:13,590 --> 00:01:16,803 ‫this code is actually inside a function. 23 00:01:17,670 --> 00:01:21,180 ‫So as you can see in the return block, the code there 24 00:01:21,180 --> 00:01:24,930 ‫is actually calling this createList function. 25 00:01:24,930 --> 00:01:27,779 ‫And therefore, that logic also participates 26 00:01:27,779 --> 00:01:30,210 ‫in describing the component view. 27 00:01:30,210 --> 00:01:33,690 ‫And so, it's also render logic. 28 00:01:33,690 --> 00:01:36,993 ‫So basically, render logic is all the code 29 00:01:36,993 --> 00:01:41,460 ‫that is executed as soon as the component is rendered. 30 00:01:41,460 --> 00:01:44,403 ‫So each time that the function is called. 31 00:01:45,570 --> 00:01:48,480 ‫Now moving on to event handler functions, 32 00:01:48,480 --> 00:01:51,420 ‫those are very easy to identify. 33 00:01:51,420 --> 00:01:55,200 ‫So, they're basically pieces of code that are executed 34 00:01:55,200 --> 00:01:58,226 ‫as a consequence of the event that the handler 35 00:01:58,226 --> 00:02:00,600 ‫is listening to. 36 00:02:00,600 --> 00:02:03,960 ‫So in our example, we have this line of code 37 00:02:03,960 --> 00:02:07,308 ‫that essentially registered handle new answer 38 00:02:07,308 --> 00:02:11,640 ‫for the change event and therefore handle new answer 39 00:02:11,640 --> 00:02:14,490 ‫is our event handle function. 40 00:02:14,490 --> 00:02:17,820 ‫And this is of course nothing new at this point. 41 00:02:17,820 --> 00:02:21,690 ‫So we have done this many times in the course, right? 42 00:02:21,690 --> 00:02:24,060 ‫But it's still important to differentiate 43 00:02:24,060 --> 00:02:26,340 ‫between these two types of logic 44 00:02:26,340 --> 00:02:31,200 ‫because they do actually do fundamentally different things. 45 00:02:31,200 --> 00:02:35,610 ‫So while render logic is code that renders the component, 46 00:02:35,610 --> 00:02:40,110 ‫event handlers contain code that actually does things. 47 00:02:40,110 --> 00:02:42,999 ‫So basically code that makes things happen 48 00:02:42,999 --> 00:02:45,300 ‫in the application. 49 00:02:45,300 --> 00:02:49,020 ‫So, event handlers contain things like state updates, 50 00:02:49,020 --> 00:02:52,729 ‫HTTP requests, reading input fields, page navigation, 51 00:02:52,729 --> 00:02:55,230 ‫and many more. 52 00:02:55,230 --> 00:02:57,480 ‫So all things that basically change 53 00:02:57,480 --> 00:03:01,320 ‫and manipulate the application in some way. 54 00:03:01,320 --> 00:03:04,255 ‫Now why is this all so important? 55 00:03:04,255 --> 00:03:07,686 ‫Well, it's important because React requires 56 00:03:07,686 --> 00:03:11,885 ‫that components are pure when it comes to render logic 57 00:03:11,885 --> 00:03:16,123 ‫in order for everything to work as expected. 58 00:03:16,123 --> 00:03:19,830 ‫But what does pure actually mean? 59 00:03:19,830 --> 00:03:22,287 ‫To answer that, let's have a quick refresher 60 00:03:22,287 --> 00:03:25,290 ‫on functional programming principles, 61 00:03:25,290 --> 00:03:29,040 ‫which are quite important in React in general. 62 00:03:29,040 --> 00:03:31,617 ‫And let's start with side effects. 63 00:03:31,617 --> 00:03:36,060 ‫So, a side effect happens whenever a function depends 64 00:03:36,060 --> 00:03:37,860 ‫on any data that is 65 00:03:37,860 --> 00:03:41,670 ‫outside the function scope, or even more importantly 66 00:03:41,670 --> 00:03:46,670 ‫whenever a function modifies data that is outside its scope. 67 00:03:46,980 --> 00:03:48,900 ‫And I like to think as a side effect 68 00:03:48,900 --> 00:03:52,761 ‫as a functions interaction with the outside world. 69 00:03:52,761 --> 00:03:57,570 ‫For example, this function is mutating an outside object. 70 00:03:57,570 --> 00:04:00,490 ‫And so this is clearly a side effect. 71 00:04:00,490 --> 00:04:04,214 ‫Other examples of side effects are HTTP requests, 72 00:04:04,214 --> 00:04:09,150 ‫riding to the DOM, setting timers and more. 73 00:04:09,150 --> 00:04:13,080 ‫The other important functional concept is pure functions, 74 00:04:13,080 --> 00:04:16,338 ‫which are basically functions without side effects. 75 00:04:16,338 --> 00:04:20,940 ‫So basically, these are functions that do not change 76 00:04:20,940 --> 00:04:23,543 ‫any variable outside their scope. 77 00:04:23,543 --> 00:04:27,510 ‫Also, when we give a pure function the same input, 78 00:04:27,510 --> 00:04:30,428 ‫it'll always return the same output. 79 00:04:30,428 --> 00:04:34,890 ‫For example, this function is clearly a pure function 80 00:04:34,890 --> 00:04:37,890 ‫because if we give it the same argument r, 81 00:04:37,890 --> 00:04:39,484 ‫it'll always give us the area 82 00:04:39,484 --> 00:04:43,770 ‫of the circle based on that r value. 83 00:04:43,770 --> 00:04:47,040 ‫So the output only depends on the inputs, 84 00:04:47,040 --> 00:04:49,654 ‫which makes this function predictable. 85 00:04:49,654 --> 00:04:52,713 ‫This other function right here on the other hand 86 00:04:52,713 --> 00:04:55,410 ‫is completely unpredictable 87 00:04:55,410 --> 00:04:59,010 ‫because it returns a string that contains a date 88 00:04:59,010 --> 00:05:02,400 ‫and that date changes every second. 89 00:05:02,400 --> 00:05:04,170 ‫So in this case, even 90 00:05:04,170 --> 00:05:06,071 ‫if we give the function the same input, 91 00:05:06,071 --> 00:05:08,910 ‫the output will always be different 92 00:05:08,910 --> 00:05:11,580 ‫because the date will always be different 93 00:05:11,580 --> 00:05:15,360 ‫and therefore, this is an impure function. 94 00:05:15,360 --> 00:05:18,423 ‫And the same is true for the second function. 95 00:05:19,290 --> 00:05:22,963 ‫So notice how this function mutates an outside variable, 96 00:05:22,963 --> 00:05:27,339 ‫which of course makes this function impure as well. 97 00:05:27,339 --> 00:05:30,930 ‫Now, calling functions impure makes it sound 98 00:05:30,930 --> 00:05:33,810 ‫as if side effects are somehow bad 99 00:05:33,810 --> 00:05:36,372 ‫but that's actually not true. 100 00:05:36,372 --> 00:05:40,860 ‫So, side effects are not bad in themselves. 101 00:05:40,860 --> 00:05:42,771 ‫In fact, if we think about it, 102 00:05:42,771 --> 00:05:47,580 ‫any program can only be useful if it has some interaction 103 00:05:47,580 --> 00:05:51,420 ‫with the outside world at some point, right? 104 00:05:51,420 --> 00:05:55,290 ‫Like a web application that never affects any data 105 00:05:55,290 --> 00:05:59,813 ‫or never writes to the DOM is just completely useless. 106 00:05:59,813 --> 00:06:04,680 ‫However, in order to make useful and bug-free applications, 107 00:06:04,680 --> 00:06:08,670 ‫we need to know when and how to create side effects, 108 00:06:08,670 --> 00:06:10,836 ‫which brings us back to React 109 00:06:10,836 --> 00:06:14,378 ‫and its rules for render logic. 110 00:06:14,378 --> 00:06:17,940 ‫And essentially, there's just one big rule, 111 00:06:17,940 --> 00:06:21,450 ‫which is that components must be pure functions 112 00:06:21,450 --> 00:06:23,835 ‫when it comes to render logic. 113 00:06:23,835 --> 00:06:28,020 ‫This means that if we give a certain component instance 114 00:06:28,020 --> 00:06:30,786 ‫the same props, so the same input, 115 00:06:30,786 --> 00:06:33,660 ‫then the component should always return 116 00:06:33,660 --> 00:06:38,130 ‫the exact same output in the form of JSX. 117 00:06:38,130 --> 00:06:40,860 ‫In practice, this means that render logic 118 00:06:40,860 --> 00:06:44,850 ‫is not allowed to produce any side effects. 119 00:06:44,850 --> 00:06:47,790 ‫So in other words, the logic that runs 120 00:06:47,790 --> 00:06:50,160 ‫at the top level and is responsible 121 00:06:50,160 --> 00:06:53,375 ‫for rendering the component should have no interaction 122 00:06:53,375 --> 00:06:55,830 ‫with the outside world. 123 00:06:55,830 --> 00:06:58,560 ‫This means that render logic is not allowed 124 00:06:58,560 --> 00:07:01,608 ‫to perform network requests to create timers 125 00:07:01,608 --> 00:07:05,040 ‫or to directly work with the DOM API. 126 00:07:05,040 --> 00:07:08,943 ‫For example, listening to events using at event listener. 127 00:07:09,780 --> 00:07:12,390 ‫Now, according to what we learned previously, 128 00:07:12,390 --> 00:07:15,810 ‫render logic must also not mutate objects 129 00:07:15,810 --> 00:07:18,197 ‫or variables that are outside the scope 130 00:07:18,197 --> 00:07:20,700 ‫of the component function. 131 00:07:20,700 --> 00:07:24,930 ‫And this is actually the reason why we cannot mutate props, 132 00:07:24,930 --> 00:07:29,460 ‫which remember is one of the hard rules of React. 133 00:07:29,460 --> 00:07:32,340 ‫And so now you know why that rule exists. 134 00:07:32,340 --> 00:07:35,610 ‫It's because doing so would be a side effect 135 00:07:35,610 --> 00:07:38,198 ‫and side effects are not allowed. 136 00:07:38,198 --> 00:07:42,180 ‫Finally, we really cannot update state 137 00:07:42,180 --> 00:07:44,940 ‫or refs in render logic. 138 00:07:44,940 --> 00:07:48,780 ‫And updating state in render logic would actually create 139 00:07:48,780 --> 00:07:52,920 ‫an infinite loop, which is why we can never do that. 140 00:07:52,920 --> 00:07:56,130 ‫State updates are technically not side effects 141 00:07:56,130 --> 00:08:00,117 ‫but it's still important for them to be on this list. 142 00:08:00,117 --> 00:08:03,510 ‫Now, there are other side effects that are technically 143 00:08:03,510 --> 00:08:07,230 ‫not allowed as well, but that we create all the time 144 00:08:07,230 --> 00:08:11,790 ‫like using console.log or creating random numbers. 145 00:08:11,790 --> 00:08:15,630 ‫So these are clearly interactions with the outside world 146 00:08:15,630 --> 00:08:17,940 ‫but they don't seem to do any harm. 147 00:08:17,940 --> 00:08:21,120 ‫And so we can safely keep doing them. 148 00:08:21,120 --> 00:08:24,985 ‫Alright, but now you might be wondering if all this stuff 149 00:08:24,985 --> 00:08:28,590 ‫is not allowed, then how will I ever be able 150 00:08:28,590 --> 00:08:32,520 ‫to make an API call to fetch some data? 151 00:08:32,520 --> 00:08:35,400 ‫Well, keep in mind that these side effects 152 00:08:35,400 --> 00:08:39,120 ‫are only forbidden inside render logic. 153 00:08:39,120 --> 00:08:41,220 ‫This means that you have other options 154 00:08:41,220 --> 00:08:43,980 ‫for running your side effects. 155 00:08:43,980 --> 00:08:47,284 ‫First of all, we saw earlier that event handler functions 156 00:08:47,284 --> 00:08:51,146 ‫are not render logic and therefore, side effects 157 00:08:51,146 --> 00:08:54,227 ‫are allowed and actually encouraged 158 00:08:54,227 --> 00:08:57,660 ‫to be used inside these functions. 159 00:08:57,660 --> 00:09:01,048 ‫And second, if we need to create a side effect as soon 160 00:09:01,048 --> 00:09:04,500 ‫as the component function is first executed, 161 00:09:04,500 --> 00:09:06,488 ‫we can register that side effect 162 00:09:06,488 --> 00:09:10,170 ‫using a special hook called useEffect. 163 00:09:10,170 --> 00:09:14,010 ‫But we will learn all about that in the next section. 164 00:09:14,010 --> 00:09:17,542 ‫For now, let's move on to another super important topic, 165 00:09:17,542 --> 00:09:20,253 ‫which is state update batching.